loading
 読み込み中...
ウェブの触手-日々の生活に新たなスパイスを-
Home > [Wordpress] > 【WordPress】コメントのアバターを表示させて「親しみやすさ」をアップさせよう
この記事は約6分で読めます。

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

投稿日:2014.3.22
更新日:2017.7.23

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

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

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

↓↓↓簡単にサイトが作れる次世代ツール↓↓↓

SIRIUSレビューイメージ画像

アバター機能

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

イメージ画像

 

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

イメージ画像

 

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

コメントが届いても、なんか殺風景というか無機質というか。
それにミステリーマンって誰やねん?っていう話もあるとかないとか。

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

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

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

そのための表現の一種としてアバターの表示は効果的であると思うのです。
たとえちっちゃな効果だと言われようとも。

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

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

 

スポンサーリンク

ゲスト側のアバター設定

これはコメントをくれた方のアイコン画像設定です。

後述する「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」を選んでおけばいいでしょう。

イメージ画像

これで画像の登録は完了です。
下のような画面になりますが特にすることはありません。

イメージ画像

 

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

イメージ画像

 

どうでしょう、こっちの方が優しい感じがしませんか?
目立つという意味でもおススメかと。

追記 -2017.7.23-

ここから以降が加筆分となります。

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画像が登録されました。

イメージ画像

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

イメージ画像

以上です。

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

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

 ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓

スポンサーリンク

おススメTCDテーマ

WordPressテーマ「LAW (TCD031)」

コメント(0件)

コメントをどうぞ

入力いただいたメールアドレスは公開されません。

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

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

先頭へ