Gravatarを利用してコメントに独自アバターを表示する

投稿したコメントの横に表示される画像をアバターと呼びます。自分が投稿したコメントに表示されるアバターの画像は WordPress.com が提供している Gravatar というサービスを利用することで独自の画像を表示することができるようになります。ここではコメント欄のアバターを Gravatar を利用して独自の画像に設定する方法について解説します。

(Last modified: )

Gravatarへの登録と画像の設定

Gravatar サービスではメールアドレスに紐づいた画像を設定することができます。普段使用しているメールアドレスに対して画像を登録しておくと、コメントを投稿する時に画像と紐づいているメールアドレスを指定するだけで独自のアバターが表示されます。

それでは Gravatar を使って画像を設定します。次に URL へアクセスしてください。

https://ja.gravatar.com/

Gravatarへの登録と画像の設定(1)

「Gravatarを作成」をクリックしてください。

Gravatarへの登録と画像の設定(2)

Gravatar は WordPress.com で提供されているサービスで利用するにはアカウントを登録する必要があります。( WordPress.com は WordPress を使ったブログをオンラインで利用できるように提供しているサービスです。インストールして利用する WordPress を配布している WordPress.org とは異なります)。

Gravatarへの登録と画像の設定(3)

WordPress.com のアカウントを既にお持ちの場合は「すでに WordPress.com のアカウントをお持ちですか?」をクリックしてログイン画面へ進んでください。 WordPress.com のアカウントが無い場合は、表示された画面で「メールアドレス」「ユーザー名」「パスワード」を指定したあと「アカウント作成」をクリックしてください。

Gravatarへの登録と画像の設定(4)

入力したメールアドレス宛に確認メールが送信されます。

Gravatarへの登録と画像の設定(5)

届いたメールに表示されている「アカウントを有効化」をクリックしてください。これで WordPress.com のアカウント登録は完了です。(ログイン画面が表示されるかもしれませんが、ここではログインしなくても構いません)。

再び https://ja.gravatar.com/ へアクセスしてください。そして画面右上の「ログイン」をクリックしてください。

Gravatarへの登録と画像の設定(6)

ログイン画面が表示されます。最初にユーザー名またはメールアドレスを入力し、次の画面でパスワードを入力してログインしてください。

Gravatarへの登録と画像の設定(7)

次のような画面が表示されます。

Gravatarへの登録と画像の設定(8)

画像を設定します。「Add a new image」または「ここをクリックして追加してください !」をクリックしてください。

Gravatarへの登録と画像の設定(9)

次の画面で「Upload new」をクリックしてください。

Gravatarへの登録と画像の設定(10)

「ファイルを選択」をクリックして使用する画像を選択してください。使用できる画像の最大サイズは 1MB です。

Gravatarへの登録と画像の設定(11)

画像の選択が終わりましたら「次へ」をクリックしてください。

Gravatarへの登録と画像の設定(12)

画像の一部を使用する場合は左側の大きな画像で使用する部分を選択してください。右側にプレビューが表示されます。選択が終わりましたら「Crop Image」をクリックしてください。

Gravatarへの登録と画像の設定(13)

続いて自分の画像のレーティングを選択します。誰が見ても問題ない画像であれば G を選択してください。少々不愉快になるような画像の場合は PG 、成人向けの画像の場合は R 、非常に不愉快な画像の場合は X を選択します。今回は G を選択しました。選択が終わりましたら「Set Rating」をクリックしてください。

Gravatarへの登録と画像の設定(14)

画像を使用するメールアドレスにチェックをしてください。チェックが終わりましたら「選択したアドレスに使用する」をクリックしてください。

Gravatarへの登録と画像の設定(15)

画像の設定が完了しました。

Gravatarへの登録と画像の設定(16)

独自のアバターが表示されるコメントを投稿する

コメントを投稿する時にメールアドレスを入力しますが、メールアドレスに対して Gravatar で画像が設定されていれば自動的にコメントのアバターとして画像が表示されます。

コメントの投稿欄に次のように入力しました。メールアドレスとして先ほど Gravatar で登録したメールアドレスを入力しています。

独自のアバターが表示されるコメントを投稿する(1)

コメントを投稿するとコメントのアバターとして設定された画像が表示されます。

独自のアバターが表示されるコメントを投稿する(2)

また画像が設定されているメールアドレスで WordPress にログインした状態でコメントを投稿すると、コメント投稿欄の名前とメールアドレスは自動的に設定されるため、結果として同じようにコメントのアバターとして設定された画像が表示されます。

独自のアバターが表示されるコメントを投稿する(3)

独自のアバターが表示されるコメントを投稿する(4)

コメントを投稿する人は自分が使用するメールアドレスに対して Gravatar を使って好きな画像を設定することができます。コメントが投稿されれば設定されている画像がアバターとして表示されますので、不適切な画像が表示されていないか注意が必要です。

独自のアバターが表示されるコメントを投稿する(5)

※ アバターの表示そのものを行わないようにするには「コメントへのアバターの表示/非表示の切り替えとデフォルトアバターの設定」を参照されてください。

-- --

コメント欄のアバターを Gravatar を利用して独自の画像に設定する方法について解説しました。

( Written by Tatsuo Ikura )

Profile
profile_img

著者 / TATSUO IKURA

プログラミングや開発環境構築の解説サイトを運営しています。