Gravatarを設定した話(基本編)

# Gravaterって何だっけ？
ふとRedmineのユーザ設定を見た。
![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295125/099c2bb5-cb09-bab6-6694-df5e867ab51c.png)
「なんか↑このマーク見たことあるんだよな…」

ふとQiitaのアカウント設定を見るとGravatarのアイコンも選べるよと書いてある…
そしてそこには大学時代に使っていたアイコンがある…

あぁ、そうだ。Gravatarの初期アイコンってあんなんだった(気がする)！
というわけで、Gravatarを久しぶりに変更しようという話。

# 対象読者
- Gravatarを初めて使ってみるよという人
- アバター画像とメールアドレスの紐づけがわからねぇって人

# だからGravaterって何なんだよ
公式によると、Gravaterとは「グローバルに認識されるアバター」だそうだ。
メールアドレスとアバターとして利用する画像を紐づけておけば、様々なWebサービスで共通して同じアバターを利用できるってわけ。
同じメールアドレスを利用するサービスに共通のアバターを設定するのが基本だが、複数のメールアドレスに一つのアバターを紐づけることもできる。
WordPressやGithub、Redmineに…Qiitaでも。Gravatarの利用できるサービスは少なくない。

# 設定方法
## 1. [Gravatar](https://ja.gravatar.com/)にログインしよう
### ①WordPress.comなにそれおいしいの？という人
赤枠の作成ボタンを押して、アカウントを作ることからはじめる。
![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295125/5129572f-e9bd-54d7-3653-d134a5229ded.png)

「アカウントは持っているけど~~垢バレしたくない~~社用とプライベートのアイコンを変えたいな！」
という場合でもメールアドレスによって画像を変更できるのでログインで問題はない。

入力したメールアドレス宛に登録手続きに関するメールが届くので、
受け取ったメールに従ってアカウントを有効化しよう。
有効化後に画面へログインすれば、[画像を登録](#①新しく画像を設定したい人)できるようになる。

### ②WordPress.comのアカウントを持っている人
WordPress.comに登録したアカウントでログインする。
自分のサーバで使っているWordPressのアカウントではない。
**フォーラムでキャッキャウフフしたり、JetPackプラグインやAkismetプラグインで使っているアカウントだ。**

パスワードを忘れた場合は再設定するのだが、何世代か分の「以前のパスワード」は再登録できないので要注意だ…！~~心折れかけた~~
### ②-2 WordPress.comのアカウントに新しくメールアドレスを紐づけたい人
ログイン後、[Add email address](https://ja.gravatar.com/emails/new)からメールアドレスを登録する。
新規登録の際と同様に入力したメールアドレス宛に登録確認メールが送信される。
届いたメールからURLをクリックし、入力フォームに従って登録操作をする。

なお、この時に「WordPress.comにアカウントは登録したけれど、自身のWordPressのアバターが紐づかない」という嘆きをたまに見かけることがある。
**新しいメールアドレスをWordPress.comのアカウント(主アドレス)に登録しただけではアバターは設定されないので、続けてアバターの設定が必要となる**。

メールアドレスの一覧でアバターの設定状況はすぐに確認ができる。
![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295125/64d8ab7f-9c19-5fb8-c51b-6a1221b86627.png)
利用したいメールアドレスにGravatarのデフォルト画像が表示されているなら、以下の「2. アバターを設定する」の手順を踏んでアバターを設定しよう。

## 2. アバターを設定する
### ①新しく画像を設定したい人
[Add a new image](https://ja.gravatar.com/gravatars/new)から画像をアップロードしよう。
リンクをクリックすると、4つのメニューが表示される。
![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295125/23049147-2e5e-38ed-f0a2-c05f02fe5cf3.png)
②を選択するとWeb上にアップロードされた画像を利用することもできるが、ここでは①について解説する。**もちろんどの場合も著作権周りは確認してほしい！**

①のボタンを押すと、アップロード画面が開くので利用したい画像を選んで[次へ]のボタンを押し、トリミング画面に移動する。
するのだが…
黒線だけの透過画像を利用する際はこんなことになる…
![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295125/2a0f04f6-9279-8f04-0d16-325c2aec21d2.png)
透過部分が[いつものアレ](https://www.pnsm.jp/wedfg2/uploads/cfb955960f129ce03afba25cc4c1fbbb.jpg)でなく、黒で表示されるのだ。
…諦めてプレビューを見ながらトリミングしよう。
※赤(#CC0000)だととてもヤバい感じに見えて心に刺さった
![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295125/3c83a13c-df87-ff2c-cbf2-0b4435d5a5a7.png)
さて、トリミングが終われば「よく躓くポイント」として挙げられるのレーティングの設定に移る。
![gvt03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295125/6364d874-0757-6e4f-d07b-2d6203d9a714.png)
**そんな深く考えずデフォルト(G)でいいんだよ！**と言いたい。
これは「自分が登録したアバターはどのような画像か？」という設定になる。
それぞれを説明するとこんな感じ。

|rate|説明|古谷兎丸作品に見るヤバさ目安|
|:-:|---|---|
|G|誰が見ても問題ない画像|幻想ピカソ|
|PG|不愉快・攻撃的に思うかもしれない画像|帝一の國|
|R|少年誌ではNGな画像|ライチ☆光クラブ|
|X|やべぇ奴だ…！と思われる画像|インノサン少年十字軍|

主義主張はあるものの「それが攻撃的でないか？」「若年層の目に触れて問題ないか？」という観点から設定を行うのだが、自分の分身と言われるアバターにそんなものを使うなよ…
目安は私が友人に兎丸作品を貸した時に友人からいただいた評価である(解せぬ)。

レーティング問題を乗り越えると、どのメールアドレスに紐づけるか？という画面が表示されるので、紐づけるアドレスを選択すれば設定は完了する。

### ②昔登録した画像にメールアドレスを紐づけたい人
既に登録されている画像をそのまま使いたい場合は以下のように設定する。
マイGravatarのページで紐付けるメールアドレスを選択する。
![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295125/9dd44135-6ea3-11af-5679-372312d25460.png)
この状態で、アバターのリストから設定するアバターのサムネイルをクリックする。
![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295125/5577b292-4b16-c3aa-16e5-4468659744f2.png)
ポップアップで確認メッセージが表示されるので[実行]ボタンを押せば設定は完了だ。

ちなみに、レーティング変更設定からもメールアドレスとの紐づけができる。
アバターのリストからレーティングのアイコンをクリックする。
![gvt06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295125/95b32410-0092-55ac-27e9-2bd48a84ebff.png)
すると、新規登録同様レーティング設定の画面が表示されるのだが、
レーティングを設定し終えると、画像の新規追加同様にメールアドレスの紐づけ設定の画面が表示されるのだ。

## 3. 反映されるのを待とう
反映にかかる時間は大体5分ぐらいだと言われる。
反映されねぇなって時は[Ctrl]+[F5]でリロードするとよい。
WordPressのプラグイン等でSuperCacheを使っている場合などは別途そちらのキャッシュを削除する必要もあるのをお忘れなく！

# さいごに
~~友人からのヤバい奴認定はいつ解けるだろうか~~
今回は、この設定で利用させていただいたアイコンの配布サイトを紹介して終わろうと思う。商用利用可能で超便利なので、クライアントへの資料や提案書のお供にも最高だ。

## 参考サイト
[アイコン素材ダウンロードサイト「icooon-mono」 | 商用利用可能なアイコン素材が無料(フリー)ダウンロードできるサイト](https://icooon-mono.com/)