HOME > Wordpress > 【WordPress】コメントのアバターを表示させて”親しみやすさ”をアップさせる
公開日:2014.3.22
更新日:2017.7.23
この記事は約6分で読めます。

【Wordpress】コメントのアバターを表示させて”親しみやすさ”をアップさせる

この記事は最終更新日から1年以上経過しているため現状にそぐわない可能性もあります。

ブログに必ず付いてるコメント機能。

ワードプレスの場合、そこにアバターと呼ばれるアイコン画像を付けることができます。

SIRIUSレビューイメージ画像

アバター機能

追記 -2017.7.23-

当記事は2014年3月22日公開の記事ですが、2017年7月23日に一部加筆しました。

アバターの表示・非表示の変更は「設定」「ディスカッション」から行えます。

イメージ画像

上の画像のように「アバターを表示する」と「ミステリーマン」にチェックを入れると、下の画像のように表示されます。

イメージ画像

でもこれだとちょっと味気ない気がしませんか?

コメントが届いても、なんか殺風景というか無機質というか。

それにミステリーマンって誰やねん?っていう話もあるとかないとか。

ここにオリジナルの顔アイコンなんかが表示されれば、(ちょっとだけかもしれませんが)親近感のようなものがアップするんではないかと思うんです。

 

ネット上での見ず知らずの人とのコミュニケーションって、感情が表に出にくいでしょう?

でもコメントをもらいコメントを返すっていうやり取りは、少なくとも何らかの意思をもって投稿するわけだから、そこに感情まで表現できればもっと親しみや共有感が増えるんじゃないかなとも思うんですよ。

そのための表現の一種としてアバターの表示は効果的ではないかと思うのです。

たとえちっちゃな効果だと言われようとも。

ただ、デフォルトの『ミステリーマン』では、ちょっと、ねぇ。

そこでコメントをくれた人と管理人(私です)のオリジナルアバターを作ってみようというのが今回の内容です。

ゲスト側のアバター設定

検証は行ってますがカスタマイズ・実装に関しては”サイトが表示されない”などのトラブルが発生する可能性もあります。

失敗した時に元に戻せるようオリジナルファイルのコピーは必ず作っておいてください。

最初に、コメントをくれた方のアイコン画像設定です。

後述する「Gravatar」にアイコン画像を登録している方はその画像が表示されます。

アイコン画像はあらかじめ作っておきます。

私は76px四方で作ってみました。こちら↓です。

アバター画像

これをテーマフォルダ内のどこかに保存しておきます。

今回は「image」というフォルダを作ってそこに保存してみました。

そしてfunctions.phpに以下のテキストを書き込みます。

上記コード内の'/image/avatar-guest.png'というところが画像までのパスになります。

ここでは「image」というフォルダ内に保存した「avatar-guest.png」という名称の画像という意味です。

(フォルダ名や画像名は適宜変えてください)

'ゲストさん'という部分は『ミステリーマン』といった表示上の名称です。

ここも変更可能です。

これで下のように表示されます。

最下段に新たに「ゲストさん」がお目見えしました。

イメージ画像

これでさきほどのコメント欄を見ると…ちゃんとアイコンが変わってます。

無機質なイメージがだいぶ和らいだと思うんですがいかがでしょう。

イメージ画像

ただこのままだとコメント側も管理人(私)もどちらも同じ画像になっちゃうので、今度は管理人側の画像を別のものに変えてみます。

管理人側のアバター設定

管理人側のアバターは「Gravatar」というWebサービスを利用します。

ここに画像を登録しておくと、自サイトだけでなく他サイトでも自分の画像を表示させることができます。

反対にコメントをくれたゲストの方のアイコンもGravatarに登録されていればその画像が表示されます。

Gravatar への登録

Gravatarを開きます。

「Create Your Own Gravatar」をクリックして新規登録するか、「WordPress.com」のアカウントでログインします。

下はWordPress.comでのログイン画面です。

イメージ画像

ログインすると下のような画面になるので「ここをクリックして追加してください」をクリックして画像を登録します。

イメージ画像

画像はあらかじめ用意しておきます。

アップする画像を指定します。

今回はPCに保存してある画像をアップロードするので一番上を選択します。

イメージ画像

画像が読み込まれるのでトリミングが必要ならこの場で切り取ります。

「切り抜いて完成」をクリックして画像のアップロードが終了します。

イメージ画像

最後にレーティングと呼ばれる設定です。

ここは特に指定していなければ制限なしの「G」を選んでおきます。

イメージ画像

これで画像の登録は完了です。

下のような画面になりますが特にすることはありません。

イメージ画像

これでコメント欄を確認すると、下のように反映されてるのがわかります。

イメージ画像

どうでしょう、こっちの方が優しい感じがしませんか?

目立つという意味でもおススメかと。

ここから以降が追記分となります。

Avatarの変更(追記)

一般的なブログだとブログサイトは1個だけという方も多いことでしょう。

しかしアフィリエイトサイトを運営してると、同時にいくつものサイトを構築してる場合があります。

こんなとき、ちょっとしたトラブルに見舞われることがあります。

というのもワードプレスの場合、サイトを新規で作成する時はメールアドレスが必要になってきます。

特に問題なければメールアドレスはおそらくどのサイトも共通したメールアドレスになってるんじゃないでしょうか。

私なんかがそのいい例ですよ。

サイトごとに一つ一つメールアドレスを変えるのが面倒だったものでね。

それにメールアドレスを一つにまとめておけば一つのメールクライアントを開くだけで済みますし。

こんな状態でAvatarを有効にすると、どのサイトでも同じAvatarが表示されちゃいます。

というのも1個のAvatarは1個のメールアドレスと対になってるからです。

しかしサイトによっては最初に作ったAvatar画像がサイトイメージに合わないということもありえます。

そういった場合はAvatarの変更が(具体的には”Avatarの追加”ですね)必要になります。

 

例えば別サイトのこちら↓のコメント欄をご覧ください。

当サイトと同じメールアドレスで登録してるのでAvatarも同じモノになってます。

イメージ画像

これを別のイラスト調のAvatarに変更してみます。

変更方法

まずは管理画面のユーザーあなたのプロフィールを開いてメールアドレスを新規のものに差し替えます。

イメージ画像

GravatarにログインしてマイGravatarを開き「Add email address」をクリックします。

(画像ではすでに2個目を登録済みなので今回は3個目の登録を例に挙げていきます)

イメージ画像

新規メールアドレスを入力して「追加」をクリックします。

イメージ画像

”入力したメルアドに認証用のリンクを送ったのでそれをクリックしろ”的な文面(汗)が表示されます。

イメージ画像

メールをチェックするとGravatarからのメールが届いているのでリンクをクリックします。

イメージ画像

無事、3個目のメルアドの登録が完了しました。

そのまま「Add a nwe image」をクリックします。

イメージ画像

「Upload new」をクリックします。

イメージ画像

予め作っておいたAvatar用の画像を選択して「次へ」をクリックします。

イメージ画像

元々正方形で作っていた場合はそのまま「Crop image」をクリック、横長の画像を指定した場合は表示部分する部分を範囲指定して「Crop image」をクリックします。

イメージ画像

レーティングは「G」のままで「Set Rating」をクリックします。

イメージ画像

ここで新しく登録したメルアドを選択します。

イメージ画像

これで無事、新メルアド用のAvatar画像が登録されました。

イメージ画像

実際にさきほどのページをリロードしてみると、無事新しいアイコンに変わりました。

イメージ画像

以上です。

スポンサーリンク

スポンサーリンク

記事はお役にたてましたか?

記事に興味をもっていただけたらソーシャルボタンでの共有お願いします^^

 ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓

コメントはお気軽にどうぞ

メールアドレスは公開されません。
* が付いている欄は必須項目です。

内容に問題なければ下記の「コメントを送信する」ボタンを押してください。

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)