Disqusの設定について
このHPに設置してあるDisqusの細かい設定について説明していきます。
良かったら自分でDisqusを設置する時の参考にしてみてください。
Disqusの設定について
Disqusのサイトの設定の「Settings」で設定ができます。
Disqusの管理画面の「Settings」でDisqusの設定ができます。
まずは、コメント機能の基本設定です。このサイトでは、以下のように設定しています。
基本設定の項目です。拡大してみてください。
まずは、基本的な設定です。Generalタブの項目について説明します。
といってもアカウント作成時にほとんど入力済みだと思います。
投稿に特別な敬称をつける設定です。
次の項目は、重要ですのでちゃんと設定しておくことをおすすめします。
Moderator Badge Text ：
右のように、本人の投稿などの時に特別な敬称をつける機能です。
項目には「管理人」などを記入するとよいでしょう。
Language：
コメント機能を日本語にする設定です。項目で「Japanese」を選択しましょう。
続いてDiscoveryタブの項目について説明します。このサイトでは、以下のように設定しています。
ディスカバリーボックスの設定です。拡大してみてください。
正直、Disqusは、海外のサービスですので日本で広告収入を得れるような最適化はされていません。
ですので、Disqusでの広告表示はしないようにするのが正解だと思います。
（広告は、海外資本のため英語サイトなどしか表示されない＆支払い環境が日本と違うため。）
Moderators（管理者設定）タブとFilters（除外設定）タブは、初期設定のままです。
ココは、基本的に変えなくていいと思います。
続いて、Advancedタブの設定です。このサイトでは、以下のように設定しています。
Disqusの詳細設定タブです。拡大してみてください。
次の項目は、重要ですのでちゃんと設定しておくことをおすすめします。
Default Commenter Avatar ：
ゲスト投稿者のアイコンです。デフォルトはかっこ悪いので必ずなんらかの画像を設定しましょう。設定することでサイトの特色が形作られ、コメントしやすくなると思います。
Akismet ：
Akismetは、WordPressのコメントスパム対策用のプラグインのことです。
とりあえず導入したほうが良いと思います。
「Settings」での設定は以上です。後は、管理人のプロフィールを設定するとよいと思います。
プロフィールは、右上のところのEdit Profileをで編集できます。
管理画面の右上の項目を選択してプロフィールを編集します。
ココの「Full Name」の欄がコメント欄に表示される名前となります。（重要）
ちなみに、「Website」が運営サイトのURL、「Location」は住んでる国、「Short Bio」はプロフィールの経歴となります。
Disqusユーザーは、コメント欄から簡単にプロフィールが閲覧されます。
「Full Name」以外にも「Website」、「Short Bio」などを書いておくと、プロフィール経由で興味を持った訪問者が来るかもしれません。
続いて、Avatar（表示アイコン）の編集をしましょう。
コメントに書き込んだときに表示されるアイコン画像を設定できます。ココもデフォルトのままだと、
激しくかっこわるいですので、必ず変更するようにしてください。
以上で、Disqus側の設定は、完了です。
コメント機能を記事ページに追加する
記事ページにDisqusのコメント機能を追加します。普通のコメント機能を追加する時と同じように、
＜？php comments_template()；？＞のタグを設置したいテンプレートファイルに記入することで
Disqusのコメント機能は追加できます。
このサイトでは、以下のように記述を追加しています。
<div class="comment">
<h2 id="com">この記事へのコメント</h2>
<?php comments_template(); ?>
<p class="hosoku">【コメントの投稿の仕方について】<br />
<br />
このサイトでは、「Disqus」と呼ばれるコメント機能を使っています。<br />
ツイッターやフェイスブックなどにアカウントをお持ちの方は、ログインすることで<br />
自分の各プロフィールでコメントすることが出来ます。<br />
なんのアカウントもない人もメールアドレスさえ入力すればコメントできます。<br />
（入力したメアドはコメント投稿には表示されません。）<br />
また、コメント欄には画像を張ることも出来ます。</p><br />
<div class="coco">ひと言コメントや、記事の質問や感想など お気軽にお書きください。<br />
なにか書いていただけると管理人が嬉しがります。</div>
</div>
CSSでコメント欄をデザインする
後は、CSSにコメント欄用の記述を追加するだけです。以下の記述を追加してください。
/* コメント */
.hosoku {
font-size: 0.75em;
margin: 0px 0px 0px 10px;
color: #888888}
div.coco { font-size: 0.8em;
padding:5px 0 5px 10px;
margin: 0px 0px 10px 0px;
border-left:#7777ff 8px solid;
border-right:#7777ff 8px solid;
color: #000099}
#disqus_thread {font-family: 'メイリオ', 'Hiragino Kaku Gothic Pro', sans-serif;
border-top: solid 1px #aaaaaa;
margin-top: 0px 30px 0px 30px;
padding-top: 5px;
font-size: smaller}
#com {margin: 5px 0px 0px 0px;
font-size: 1.2em;
color: #000099; /* 文字の色 */
border-left-color: #7777ff; /* 左枠の色 */
padding: 3px 0px 0px 3px; /* 余白の幅 */
border-style: solid; /* 枠の種類 */
border-width: 0px 0px 0px 15px /* 枠の幅 */}
.comment {background: #ffffff;
background-image: url('image/bg_body2.png');
background-repeat: repeat-x;
padding: 5px 30px 5px 30px;
box-shadow: 2px 2px 5px #aabbaa;/* css3用記述 */
border-radius: 25px 25px 25px 25px / 13px 13px 13px 13px;/* css3用記述 */}
overflow: hidden}
Disqusのコメント機能の背景画像は この画像を使っています。
これで完了です。
Pingback: WordPressカスタマイズ － 究極データベース()
Pingback: wordpressメモ帳 » コメントDISQUSの設定について()
Pingback: "unknown"lab. » DISQUSEでコメント欄つくったときに、参考にしたサイト()
Pingback: [WordPress] コメント欄にDisqusを導入してみましたけどよくわからなくてつらい(´･_･`) | Time to live forever()
Pingback: ファンブログのコメント欄に「DISQUS」を設置 | Big Bang()
Pingback: web:E:note()