>--> Blogger のコメント欄で、デフォルトのアバター画像を変更する方法 | クリボウの Blogger Tips

クリボウの Blogger Tips

Google Blogger の使い方、カスタマイズ方法、各種ツールなど、
Blogger 関連の役立つ情報を紹介しています。

> | | > Blogger のコメント欄で、デフォルトのアバター画像を変更する方法

Blogger のコメント欄で、デフォルトのアバター画像を変更する方法

Posted at: 2012-08-27 Label: , , 13

Blogger コメント欄デフォルトアバターの変更前と変更後

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

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

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

thumbnailHow to Change Default Anonymous Avatar in Blogger Comments | Blogger Help  


上に示した以外のアバターも紹介されています。それぞれ URL が掲載されているので、気に入ったものがあれば、以下のカスタマイズ方法に従って変更してみてください。


導入方法

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

１．Blogger 管理画面で「テンプレート ＞ HTML の編集 ＞ 続行」 と進みます。

２．</body> の直前に次のコードを挿入します。</body> は、ブラウザの検索機能を使うと見つけやすいと思います。
<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'></script>
<script type='text/javascript'>
$("img[src='http://img1.blogblog.com/img/anon36.png']").attr('src', 'http://1.bp.blogspot.com/-Zphr2YJH_6w/T6ZZE4YeNBI/AAAAAAAACF0/Tyuj8hkOpdc/s1600/default_avatar.gif');
$("img[src='http://img2.blogblog.com/img/b36-rounded.png']").attr('src', 'http://1.bp.blogspot.com/-eKbzORzVaBQ/T6ZXHmdgHqI/AAAAAAAACFs/rVy3T4gxojM/s1600/blogger-user.png');
</script>

３．「テンプレートを保存」ボタンを押します。

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


カスタマイズ方法

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

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


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


スポンサードリンク：
お願い：
「この記事役に立った！」と思ったら、ぜひフィード登録をお願いします。　
このエントリーをはてなブックマークに追加

Comments:13

  6. こんにちはブログの立ち上げのとき、クリボウさんのブログを見ながら
    bloggerでブログを作りました。
    コメント欄に自分のプロフィール写真が表示されなくなってしまい
    その解決方法を調べに来ました。

    こちらの記事ではブログ訪問者のコメントに付くアバター画像の表示の変更について書いてくださっていますが、自分のコメントのアバター画像を再び表示させる方法はありますか？

    現在コメントすると、アバターが表示される部分に「侵入禁止マーク」のような
    円の中に横線の引かれた画像が表示されます。
    自分のブログでも、他のblogger利用者のブログでも、コメントするとこうなってしまいます。

    ReplyDelete
    Replies

    1. 心当たりがあるのが、ブログ記事の投稿画面の作成モードで
      「画像の追加」で追加する画像を選ぶときに
      「Googleアルバムアーカイブから」を選択すると
      「Bloggerの画像」という項目がありました

      そこにプロフィール写真やアバターに使用している画像が何枚もあって
      （元の画像は全て同じ１つの画像を使用しています）

      「何で同じ画像が何枚もあるのかな？じゃまだしややこしいから１つにしよう」と思って数枚消したことです。

      これを元に戻せばいいのかもしれないと思いますが、戻し方がわかりません。
      クリボウの Blogger 入門から初めてブログを作るような状態なので
      HTML の編集をいじって大丈夫な自信はありませんが頑張ってみようと思います。

      コメント返信はメール通知されるようにしていますので
      お時間ある時にコメント返信くださいますとうれしいです。

      Delete

    2. 解決できました、ご心配おかけして申しわけございませんでした。

      プロフィール写真をすると、自動的に何枚も同じ写真が複製されるようです。
      プロフィール写真を登録しなおすことで「Bloggerの画像」という項目に
      同じ名前の画像が複数作られて、コメント欄の写真も表示されるようになりました。

      Delete

  7. http://emc-mee.kinja.com/east-eldmam-com-1791211077
    http://emc-mee.kinja.com/jumperads-com-1791210879
    http://emc-mee.kinja.com/1791211197
    http://emc-mee.kinja.com/1791211921
    http://emc-mee.kinja.com/1791211985

    ReplyDelete

  8. http://emc-mee.kinja.com/1791212330
    http://emc-mee.kinja.com/1791212834
    http://emc-mee.kinja.com/1791212889
    http://emc-mee.kinja.com/1791212965
    http://emc-mee.kinja.com/1791213033

    ReplyDelete

Comments on Google+:

© 2005-2014 Kuribo. Powered by Blogger.