この間、Google+ での言及を表示する「Google+ コメント欄」の話題を記事にしてきました。

• Blogger ブログに従来のコメント欄と Google+ のコメント欄の両方を表示する方法
• Blogger ブログのコメント欄に Google+ でのコメントも表示できるようになりました

が、今回は Blogger オリジナルのコメント欄について。先月（2013 年 9 月）までこうだったコメント欄が



こんな風に変わっています。



Google+ のコメント欄と同じような、フラットなデザインに変わっていますね。今回の変更について、Blogger 公式のアナウンスを見つけることができなかったんですが、

• つわものぶろぐ: Bloggerのコメントシステムが改良

によると、モバイル端末からのコメント入力が随分しやすくなったとのこと。目下 Google+ に押されがちですが、Blogger オリジナルのコメント投稿も、今後活発になっていくといいですね。

2013 年 4 月に、Blogger ブログに、通常のコメント欄と入れ替える形で Google+ のコメント欄が設置できるようになりました（参考）。複数のブログについたコメントや他人のブログにつけたコメントが Google+ で一元的に閲覧できるので非常に便利なんですが、その一方で通常のコメント欄と比べ不便なところもいくつか指摘されています。

• Google+ ユーザーしかコメントできない。
  通常のコメント欄なら Google ユーザー、OpenID ユーザーに加え、「匿名」も選べます。
• 公開範囲が分かりにくい。
  Google+ のサークルが適用されるため、誰にどのコメントが見えているのか把握しにくいかと。
• ブログのドメインを変えられない。
  Google+ 上でのコメントは、リンクの URL で Blogger ブログと関連付けられているため、ドメインを変更してしまうと、ブログから以前のコメントが見れなくなってしまいます。
• 記事ごとのコメント表示・非表示、新規受け付けの可否設定ができない。
  Blogger の投稿エディタのオプション指定が効きません。
• コメントの「オーナー承認後公開」ができない。
  ブログにコメントがつくというより、Google+ での言及をブログに表示できる、というのが本質なので、しょうがないといえばしょうがないんですが。
• ブログについたコメント一覧が確認できない。
  通常のコメントだと、ダッシュボードやコメントフィードで確認できますね。

参考：

• The Real Blogger Status: Reverting Your Blog Back To Blogger Comments, From Google+ Comments

ということで、従来のコメント欄も Google+ のコメント欄も両方ブログに載せてしまおうと思ったわけです。参考にしたのはこちらのブログ。

• Google+コメント機能をBlogger以外に設置する方法【非公式】 | アンギス

導入してみた様子が、次の画像です。



導入方法

１．Blogger の管理画面「Google+」から「このブログで Google+ のコメントを使う」のチェックを外します。元々 Blogger ブログを Google+ プロフィールと関連付けていない人は、そのままで。

２．Blogger 管理画面「テンプレート ＞ HTML の編集」から


というコードを見つけます。「Ctrl + f」キーからエディタの検索機能を使うと便利です。

３．２のコードのすぐ後に


というコードを挿入して「テンプレートを保存」ボタンを押します。赤字部分は Google+ コメント欄の最大幅です。通常のコメント欄の幅に合わせて調整するのがいいと思います。

青字の部分は、Google+ コメント欄の上部に表示されるメッセージで、自由に書き換えることができます。閲覧者がどちらにコメントすればいいのか迷わないように、何か説明を書いてもいいかもしれませんね。

なお、<div id='backlinks-container'> は 2 箇所あるので、両方のコードの後に同じコードを貼り付けてください。


ということで、「Google+ のコメント欄を置きたいけど、前についたコメントも表示しときたいんだよな…」という人も、「Blogger アカウントと Google+ アカウントをまだ関連付けていないんだけど…」という人も、ぜひお試しください。


ちなみに

テンプレートによっては、Blogger のコメント欄が 425px 幅で固定になっているものがあります。これは、Blogger 公式の外部 CSS ファイルで指定されているもので、Blogger 管理画面「テンプレート ＞ HTML の編集」から、テンプレートの CSS 部分


のすぐ後にでも、


と挿入することで、テキストエリアの幅の上書きが可能です。Google+ のコメント欄と幅を合わせたいというときに思い出してください。

Blogger に新ガジェット「連絡フォーム」が追加されています。

• Blogger - Google+ - We introduced a new "Contact Form" widget today. If a…

「コンタクトフォーム」とか「問い合わせフォーム」とか言われるアレですね。コメントと違いブログ上にメッセージが公開されないのと、メールと違いブログオーナーのアドレスを公開する必要がないのが特徴です。

ブログへの追加は、Blogger 管理画面「レイアウト」から「ガジェットを追加」リンクをクリック、「その他のガジェット」タブから「連絡フォーム」を選ぶだけ。


ガジェットの設定画面で選択できるのは「タイトル」のみ。このタイトルはデフォルトで「連絡フォーム」になっています。「お問い合わせ」などの方が分かりやすいかもしれませんね。

実際にブログに追加してみたのが、下の画像。


ブログ訪問者のつもりで試しに、「クリボウ」「（自分のメールアドレス）」「こんにちは！」とメッセージを入力し送信してみたところ、ブログ管理用メールアドレスに、以下のようなメールが届きました。


送信者に「クリボウ <no-reply@blogger.com>」と出ているので、メールアドレスは入力しても表示されないのかな？と一瞬思ったんですが、メールのソースを見てみるとアドレスは「From」欄ではなく「Reply-To」欄にしっかり記録されていました。なので「返信」すれば、メッセージをくれた人に直接メールを送れるというわけです。

一般のサイトのように運用しているブログなんかでは、コメント欄を閉じて問い合わせフォームだけを設置するのもいいかもしれません。こんな風に、訪問者とのコミュニケーションに選択肢が増えるのはいいことですね。

Google+ に接続した Blogger ブログのコメント欄で、これまでのブログのコメントに加えて、Google+ でブログへのリンクが共有された際の内容も表示できるようになりました。

• Blogger Buzz: Bringing Google+ Comments to Blogger

同じアナウンスが、Google Japan Blog にも掲載されているので、そこで新機能の大まかな感じがつかめると思います。あと、細かいところは Blogger ヘルプで。

• Google Japan Blog: Blogger で Google+ のコメントが見られるようになりました
• Google+ のコメントについて - Blogger ヘルプ

このコメント欄を有効にするには「Google+ ＞ Google+ のコメント」をオンにするだけ。すでに Google+ との接続を済ませているユーザーは、設定しておくといいかもしれませんね。


注意点

１．コメント投稿者

上のスクリーンショットを見て分かるとおり、この機能を有効にすると、ブログのコメント欄に Google+ アカウントのある人しか投稿できなくなります。Blogger のコメント欄の進化というより、Google+ のコメント欄を Blogger に設置できるようになったととらえた方がいいかも。現在設定によって可能な Blogger、OpenID、匿名といったアカウントでのコメントができなくなると、ブログの種類によっては困る場合も出てくるかと。

２．コメントの公開対象

Google+ のサークルが Blogger のコメント欄でも適用されることになるので、誰にどのコメントが見えているのか、分かりにくいところがあると思います。それで混乱や読者間のトラブルなどなければいいですが…。

３．ブログ URL

Google+ 上でのコメントはリンクの URL 単位で管理されています。

ブログの URL を変更すると、既存の Google+ のコメントは削除されます。カスタム ドメインやブログの URL の変更を検討している場合、変更してから Google+ のコメントを有効にしてください。

と、Blogger ヘルプにも書かれているのでご注意を。

Blogger ブログでは、匿名ユーザーや、アバターを指定していない Blogger ユーザーがコメントを投稿した場合、コメント欄にはデフォルトのユーザーアイコンが表示されます。今回は、このデフォルトで使用する画像をブログで自由に設定する方法についてです。

※ このカスタマイズは、「埋め込み」方式のコメント欄にのみ有効です。コメント投稿フォームを投稿ページに埋め込むには、Blogger 管理画面「設定 ＞ 投稿とコメント」ページから、「コメントの場所」項目を「埋め込み」にしてください。

今回のカスタマイズ方法については、以下のサイトを参考にしました。（コードは一部変更しています。）

導入方法

さっそく導入方法を見ていきます。


これだけです。簡単ですね。


カスタマイズ方法

導入方法で示したコード中、赤字部分で匿名用のアバター画像、青字部分で Blogger ユーザー用のアバター画像が指定されています。好みの画像が別にあれば差し替えてみてください。

緑色のコードは、JavaScript のライブラリ jQuery を呼び出している部分です。通常このままで問題ありませんが、ブログで他に jQuery を呼び出して使っている箇所がある場合、省略した方がいいと思います。


テンプレート変更などブログの模様替えの際に、こういった細かいところもテーマに合わせてカスタマイズしてみると面白そうです。フォトログやイラストブログなんかで、自分の撮った写真や手書き画像にしてみるのもいいかもしれませんね。

以前、Blogger の埋め込み式コメント欄でコメントをスレッド表示にできるようになった件について、記事にしました。

• Blogger 新コメントシステム開始、返信でスレッド表示に | クリボウの Blogger Tips

今日は、そのスレッド式のコメント欄のコメントに番号を振る方法です。コメントスレッドのもとになるコメントには「1」「2」「3」という吹き出しがつき、それらのコメントへの返信は、「1.a」「1.b」「2.a」のように、アルファベットが付加されます。

参考にしたのはこちらのページ。

• Numbered comments on threaded comments for Blogger/Blogspot | Blogger Help

導入方法

その１　Blogger 管理画面「レイアウト」から「ガジェットを追加」リンクをクリック、「HTML / JavaScript ガジェット」を選択して、以下のコードを貼り付けます。

その２　面倒だという人は、下の「Add to Blogger」ボタンを押して、スクリプトを導入したいブログを選択したのち「ウィジェットを追加」ボタンを押すだけでもＯＫです。「その１」と同じことを自動でしてくれます。

<style type="text/css"> .comment-thread ol { counter-reset: countcomments; } .comment-thread li:before { content: counter(countcomments,decimal); counter-increment: countcomments; float: right; font-size: 22px; color: #555555; padding-left:10px; padding-top:3px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6_Vhbaek5hfW1FKz_bTDQO4rl76Jtofvi0_hEuYejdE24VAxkr8Xh7i744tPn87CLDvx18YNZkuqjdVmr4JjZwlvJVKJmU-BKXSKrrHCt7JYiJTHC1SZuVzkIpN7VoRNl44UtQQ/s1600/comment+bubble2.png) no-repeat; margin-top:7px; margin-left:10px; width: 50px; /*image-width size*/ height: 48px; /*image-height size*/ } .comment-thread ol ol { counter-reset: contrebasse; } .comment-thread li li:before { content: counter(countcomments,decimal) "." counter(contrebasse,lower-latin); counter-increment: contrebasse; float: right; font-size: 18px; color: #666666; } </style>

コメントのたくさんつくブログでは、各コメントに言及するのに「3 にあるように…」とか「5.c のコメントで…」という風にコメントを指定することができるので、便利かもしれませんね。