記事の任意の場所にコメントが出来るようになる【Inline Comments】

wordpress

ブログのコメントをよりわかりやすく楽しくするwordpress plugin【Inline Comments】の紹介です。

指定のセレクターで囲んだ部分にコメントが出来るようになる、画期的なpluginです。pluginを導入するにあたって、このブログのコメントシステムをDisqusからwordpressデフォルトのコメントシステムに変更しました。また、今までは名前とメールアドレスの入力が必須だったのですが、匿名でのコメントも出来るように必須項目を無くしました。

スポンサーリンク

Inline Commentsの使い方

インストール後、メニューの【設定】に【inline-comments】が追加されているので、セッティングページに移動します。

Inline Commentsセッティング

Inline Commentsセッティング

各設定項目の概要は以下の通り。

項目 概要
Selectors コメント出来る箇所のセレクター指定
Use Ajaxify (no page reload) コメントをajax対応にする(別pluginの導入が必須)
Enable Inline Replies インラインでの返信を出来るようにする。
“Slide Site” Selector コメントアイコンをクリックした際に、コンテンツをスライドさせるか、スライドさせる場合は任意のセレクタを記入する。
Custom CSS CSSでデザインを変更できる。
Position アイコンの位置
Display Avatars アバターを表示する、Gravatarに登録しているユーザーも表示される。
Bubble Style コメントアイコンのスタイル
Background Colour 背景色
Background Opacity 背景の透過度
Hide Static Bubbles 複数のコメントアイコンが近くにある場合、コメントがついていないものを隠す。
Content Before コメントリストの前にHTMLを挿入できる。
Bubble Fade In アイコンのアニメーション設定
Bubble Fade Out アイコンのアニメーション設定
Remove Closing “x” 【X】閉じるボタンを表示しない。
Remove Field “Website” コメントする際、urlを入力するフォームを表示しない。
Remove Link “Cancel” キャンセルのリンクを表示しない。
Display Permalinks チェックすると、パーマリンクのアイコンは、各コメントの横に表示されます。
Display References 参照先の段落へのリンクをどこに表示するか。
Always Display Bubbles コメントアイコンを常に表示するか。

ajax対応させる為のpluginはこちらです。

インストール後、設定ページで【Enable plugin】にチェックを入れれば導入完了です。

Inline Commentsの動作

では実際の動作はどのような感じなのかチェックしてみましょう。良ければ実際にコメントしてみて動作を確認してみてください。

記事を書く際に、セッティングで設定したセレクタで任意の段落を囲みます。
例えばこの部分を設定したセレクタで囲んでいます。
<div class="user_comments">記事を書く際に、セッティングで設定したセレクタで任意の段落を囲みます。
例えばこの部分を設定したセレクタで囲んでいます。</div>
コメントアイコン

コメントアイコン

この様なアイコンが表示されるので、クリックするとコメントフォームが表示されます。
以下はテストサイトで試してみた画像です。

コメントテスト画像

コメントテスト画像

コメントは匿名の方がされやすい

普通のコメントをする人でも、メールアドレスや名前の入力が必須項目である場合、面倒くさくてコメントをしないですよね。

コメントや掲示板で思いつくのが2ちゃんねるですが、流行った要因で上がる理由の一つが匿名性の高さ。

今ではブログへのコメントが、SNSの共有機能に置き換わりつつありますが、それでもブログ自体へのコメントは欲しいと思うこのごろでした。

この記事が気に入ったら
『いいね』しよう!