DISQUSコメント機能サービスを日本語でも使えるようにカスタマイズする!

コメント機能を簡単にどんなページでも実装できるサービスとしてもっとも安定して普及している「DISQUS」。他のサイトでもメリットや導入方法は詳しく解説しているサイトがあるのでそちらを参照してください。

top44

DISQUS導入方法

DISQUS導入方法

日本語表示のおかしい箇所が

DISQUSのアカウント取得して、コメント設置の設定画面で日本語に設定できます。

しかし、ある程度表示に関しては許せる範囲の日本語になるのですが、一部、どうしても許せない日本語が、、ありそれをどうにか変更できないかやってみた。

「コメントできるまえに、設定をしてください。」、、、、んん、やっぱりおかしい。
SNSアカウントを登録済のある程度達者な方であれば、この画面の意味も直感でわかると思うのですが、 そうでない方にもわかりやすくと考えるとなんか適当すぎる、、、。

maee

それでやった方法はCSSで文字を飛ばして、背景に画像を入れてやる。という方法しかできませんでした。
:afterなどの擬似クラスの”content”で文字列を追加する方法もあったのですが、DISQUS内部のソースにはどうしてもこの手法は適用されませんでした。contentを禁止するような仕組みがあるのかな??

適用した表示はこんな感じ(タイトル文字は画像なんでお好みで)

sumi

CSSのカスタマイズ方法

CSSの編集場所は、DISQUSログインした管理画面の下記のページ「setting」⇒「Appearance」⇒一番下の方

st1

「Custom CSS」という項目があるので、そこに下部のようなCSSを記述すればOK。

st2

DISQUSカスタマイズのCSS記述

編集するクラス名は、このまま使えると思います。挿入する画像は、自身で作っていただいき、任意の場所へUPする必要があります。


/*コメント後のダイアログのタイトルを変更*/
.dsq-popup-container .dsq-popup-title h3 {text-indent:-9999em !important;background:url("画像の絶対パス") no-repeat 10px center !important;}

/*コメント後のダイアログのメール欄のタイトルを変更*/
#dsq-field-email-label {text-indent:-9999em !important;background:url("画像の絶対パス") no-repeat left center !important;}

/*コメント後のダイアログの名前欄のタイトルを変更*/
#dsq-field-name-label {text-indent:-9999em !important;background:url("画像の絶対パス") no-repeat left center !important;}

.dsq-commenter-name {padding:0 30px 0 0;}

/*コメント掲載時に名前の後に「さん」を付ける*/
.dsq-commenter-name {background:url("画像の絶対パス") no-repeat right center;}

/*その他DISQUSのロゴやログインのリンクを非表示にしてみたりする場合*/
p.dsq-login-subscribe {display:none !important;}

.dsq-popup .dsq-login-add-url {display:none !important;}
#disqus_thread a {text-decoration:none !important;}
h3,
#dsq-global-toolbar ,
#dsq-account-dropdown,
#dsq-sort-by,
#dsq-footer{display:none;}
#dsq-reply {margin:5px 0 0 0;}
#dsq-global-toolbar {margin:5px 0 !important;}
.dsq-comment-header {font-size:12px;}
.dsq-comment-footer {font-size:11px;}

このブログの下部に設置してあるコメントもDISQUSです。(Wordpressプラグインバージョンです。)テストコメントでもしてください。