タグ: Design

WordPress のユーザーのアバターを設定します。ここでいうアバターはアイコン画像のことで、管理画面のログインユーザや投稿の投稿者の表示などで使われます。

WordPress のユーザーのアバターは、Gravatar というサービスにアカウントを作りアイコン画像を登録することで、WordPress 上に表示されるようになります。管理画面でアイコン画像をアップロードして設定するということはできないようです。

Gravatar とは

Gravatar の公式サイトに「Globally Recognized Avatar」と説明があります。登録したアバター（アイコン画像）が世界中の色々なウェブサービス（Slack、GitHubなど）で認識されて、アカウントと紐付けて自動で表示される、という感じでしょうか。
運営はAutomattic というWordPress.com を運営している会社が行っています。この会社はプラグインのAkismet やJetpack の運営も行っていて、2018年にはTumblr社を買収しているので、世間的にはある程度の信頼を得ている会社なのではないかと思われます。
・Gravatar（公式サイト）

Gravatar のアカウント登録

Gravatar のアカウント登録は、WordPress.com アカウントを使って行います。つまり、既にWordPress.com アカウントを持っている人はそのアカウントを使ってGravatar のアカウントを登録することができますが、持っていない人は新たにWordPress.com アカウントを登録する必要があるということになります。
・WordPress.com（公式サイト）

具体的にアカウント登録の方法は、以下の3つのパターンがあります。

• 既にWordPress.com アカウントを持ってる人向け
• 新たにWordPress.com アカウントを登録する人向け（メールアドレスとパスワードを使ってアカウントを登録）
• 新たにWordPress.com アカウントを登録する人向け（GoogleまたはAppleのアカウントを使ってアカウントを登録）

Gravatar のアカウントを登録するためには、まずはGravatar のウェブサイトにアクセスします。
WordPress の管理画面で、
[ユーザー] > [プロフィール写真] の [Gravatar でプロフィール画像の変更が可能です] のリンクをクリックしてGravatar のウェブサイトにアクセスすることができます。

既にWordPress.com アカウントを持ってる人向け

既に持っているWordPress.com アカウントを使ってGravatar のアカウントを登録します。

1. Gravatar のトップページにある[Gravatar を作成] ボタンをクリック
2. [すでに WordPress.com のアカウントをお持ちですか？] のリンクをクリック
3. 持っているWordPress.com アカウントでログインします。（下記のいずれか）
   • メールアドレスまたはユーザー名とパスワードを使ってログイン
   • GoogleまたはAppleのアカウントを使ってログイン
4. “Sign in to Gravatar with WordPress.com Connect” で[Sign in with WordPress.com] ボタンをクリック
5. WordPress.comからメールが送られてくるのでメール本文の[有効化]ボタンをクリックすると、Gravator のアカウントが登録されます

新たにWordPress.com アカウントを登録する人向け（メールアドレスとパスワードを使ってアカウントを登録）

Gravatar のウェブサイト上で、メールアドレス、ユーザー名、パスワードを入力してアカウントを登録する方法です。登録完了後のGravatar へのログインは、登録したメールアドレスまたはユーザー名とパスワードを入力して行います。いわゆるパスワード認証です。

アカウントの登録は以下の手順で行います。

1. Gravatar のトップページにある[Gravatar を作成] ボタンをクリック
2. “WordPress.com アカウントを使用して Gravatar にサインアップする” と表示されているページで下記を入力して[アカウントを作成] ボタンをクリック
   • メールアドレス
   • ユーザー名
   • パスワード
3. “Sign in to Gravatar with WordPress.com Connect” で[Sign in with WordPress.com] ボタンをクリック
4. WordPress.comからメールが送られてくるのでメール本文の[有効化]ボタンをクリックすると、WordPress.com とGravator のアカウントが登録されます

新たにWordPress.com アカウントを登録する人向け（GoogleまたはAppleのアカウントを使ってアカウントを登録）

WordPress.com とGravatarのアカウントのパスワードを管理したくない人向けです。Gravatarを使う為にはWordPress.com アカウントを持つ必要がありますが、WordPress.com アカウントはGoogle またはApple のアカウントを使ってログインすることができるので、これを利用します。いわゆるソーシャルログイン（SNS認証）です。

手順としては、(1) Google またはApple のアカウントを使ってWordPress.com アカウントを作成してから、(2) 上記”既にWordPress.com アカウントを持ってる人向け” の手順でWordPress.com アカウントでGravatar にログインしてGravatarにサインアップ（Gravatar のアカウントを登録）する、という流れになります。

• WordPress.com アカウントの作成
  1. WordPress.com のウェブサイトにアクセスします。（ブラウザのアドレスバーに https://wordpress.com を入力してWordPress.com のページを開くなど）
  2. 右上の[始めてみよう]ボタンをクリック
  3. “ここからスタート。まず、WordPress.com アカウントを作成してください” と表示されているページで、下記のいずれかの方法でアカウントを作成する。（細かい手順は省略します）
     • メールアドレス、ユーザー名、パスワードを入力して作成
     • GoogleまたはAppleのアカウントを使って作成
  4. ドメインを選択します
     • 選択窓に任意の名称を入力します。入力した名称が未登録だと、入力した名称をサブドメインとした「入力した名称.wordpress.com」のような無料のドメインが選択できます。
  5. プランを選択します
     • パーソナル、プレミアム、ビジネス、eコマースなど有料のプランが目立って表示されていますが、[無料サイトで開始] のリンクから無料のサイトを選択することが可能です。
  6. WordPress.comからメールが送られてくるのでメール本文の[今すぐ認証]ボタンをクリックすると、WordPress.com のアカウントが登録されます
• Gravatar アカウントの登録
  • 上記”既にWordPress.com アカウントを持ってる人向け” 参照

Gravatar のアバターを登録

Gravatar アカウントの登録が完了したら、自身のアバター（アイコン画像）をアップロードします。
わたしがアップロードした画像はこちらです。

ちなみに、Google のカウントにプロフィール写真を登録しておくと、Gravatar アカウントを登録した際にその画像が登録されます。

画像は複数アップロードしておいて選択することができるので、気分でアバターを変えたい場合は使いたい画像をすべてアップロードしておいて、変えたくなったら都度変更するという使い方もよさそうです。

Gravatar への画像の追加は、いろいろなところでできるようです。
・右上のアイコンをクリックして表示されるメニューから[画像を追加] をクリック
・メニューの[マイプロフィール]をクリックし、サイドバーの[フォトギャラリー] を選択して[新規画像を追加]ボタンをクリック
・メニューの[マイGravatar] をクリックし、”2. 新規画像を選択”の”新規画像を追加” のリンクをクリック

Gravatar に画像を追加する方法は下記の4種類の方法があります。
・新規アップロード
・過去のアップロード
・URLから
・ウェブカメラから

この中から”新規アップロード” の手順を記載します。

画像を新規アップロードする手順

1. [ファイルを選択] ボタンをクリックして端末上の画像ファイルを選択し[次へ] をクリック
   • アップロードする画像のサイズは10MBという制限があります
2. アップロードした画像の切り抜きを行います。
3. レーティングの選択
   • 年齢を確認するオプションで、画像が誰に対して表示するのに適切であるのかを指定します。
   • 通常は”G” を選択すると思いますが、子どもには不適切な場合や人によっては不快に感じる可能性がある場合は”G” 以外を設定します。
     • G：誰に対してもOK
     • PG：失礼な振る舞い、挑発的な服装、冒涜的な言葉、軽い暴力を含む
     • R：冒涜的な表現、激しい暴力、ヌード、薬物の乱用等を含む
     • X：ハードコアな性的画像や非常に不快な暴力を含む
4. 画像に割り当てるメールアドレスを選択
   • 割り当てる場合は、対象のメールアドレスにチェックを入れて、[選択したアドレスに使用する] をクリック
   • 割り当てない場合は、[この画像はまだ使用しない] ボタンをクリック

WordPress 上にアバターを表示する

WordPressのユーザーとGravatarのアカウントの紐付けは登録したメールアドレスで行われる仕組みになっています。
もし、WordPressのユーザーとGravatarのアカウントのメールアドレスが同じであれは、この時点でWordPress上にアバターが表示されているのではないでしょうか？

WordPress のユーザのメールアドレスと、Gravatar に登録されているメールアドレスが異なる場合

もし、WordPress のユーザーとGravatar のアカウントに登録されているメールアドレスが異なっている場合は、Gravatar に登録したアバターをWordPress のユーザーに紐付けることができないのでWordPress に表示されません。この場合は、WordPress のユーザーのメールアドレスを、Gravatar に追加することで紐付けることが可能です。

Gravatar のアカウントにメールアドレスを追加する手順

1. Gravatar にログインして右上のアイコンをクリックして表示されるメニューから[メールアドレスの追加] を選択します
2. 追加するメールアドレスを入力して[追加] ボタンをクリック
3. Gravatar（gravatar.com ドメインのメールアドレス）からメールが送られてくるのでメール本文の認証用のURLをクリック（またはブラウザにURLを貼り付ける）すると、Gravatar アカウントにメールアドレスが追加されます
4. メニューの[マイGravatar] をクリックして、”Gravatars を管理” の”1. 修正するメールを選択” で追加したメールアドレスを選択
5. “2. 新規画像を選択” でメールアドレスに紐付ける画像を選択します。画像を追加したい場合は、[新規画像を追加] リンクをクリックして画像を追加してから選択します。

参照

• Gravatar − Gravatar の公式サイト
• Automattic − Automattic の公式サイト
• WordPress.com − WordPress.com の公式サイト

WordPressのfaviconをデフォルトから自分が用意したアイコン画像に変更します。

favicon の作成と設定

[外観] > [カスタマイズ] で開いたテーマのカスタマイズ画面で、サイドメニューの[サイト基本情報] を選択するとサイドメニューに表示される「サイトアイコン」で自作のアイコン画像を選択して指定することができます。

画像のサイズは「サイトアイコンは512 × 512ピクセル以上の正方形にしてください」とのことです。

今回、このブログ向けにアイコン画像を自作してみました。画像のサイズが間違えて512 × 512ピクセルより少し大きく作ってしまったのですが、画像をアップロードした後に512 × 512ピクセルで切り抜きする機能があったので調整することができました。
自作のアイコン画像はこちら（PNG形式で作りました）↓

あとがき

自作のアイコン画像は、ブログの名前「Mad Overload」の頭文字「M」にしました。
ゲームWizardryの頭文字「W」を回転させると「M」になるので、ここでもWizardry感を出してみました。
ただ、実際に指定してブラウザのタグを見てみると、字が細くて何かしょぼい。。
気が向いたら字を太くするとか、もっといいデザインを考えようと思います。

WordPressをインストールした際の最新のデフォルトテーマは「Twenty Twenty-One」でしたが、文章が読みやすくシンプルなデザインにしたかったので、過去のデフォルトテーマを眺めてその中から「Twenty Sixteen」を使うことにしました。

テーマのカスタマイズ

テーマを選択したデフォルトのままではあまりにも個性がないので、テーマをカスタマイズしてWizardry FC版のような雰囲気にすることにチャレンジしてみました。

追加CSS を使って簡単にカスタマイズ

テーマのカスタマイズは、サブメニューに[追加CSS] という便利な機能があるので、この機能を使うことにしました。（テーマのソースコードを直接修正しません）

ウェブデザインの知識については、HTML5とCSS3ことをよく理解できていないのですが、Chrome のデベロッパーツールを使って変更したい箇所で有効になっているCSSの定義を探しては[追加CSS]にコピペして値を変更するという作業を繰り返して、なんとかWizardry っぽい感じにすることができました。
今回[追加CSS] に記載した内容は下記になります。

/* layout */
.site-header {
  padding: 0.5em 7.6923%;
}
.site-branding, .site-header-menu, .header-image {
  margin-top: 0.375em;
  margin-bottom: 0.375em;
}
.site-header-menu {
  margin-top: 1.575em;
  margin-bottom: 0;	
}
.site-main {
  padding: 0.5em;
  border: solid;
  border-radius: 6px;
}

/* font */
body {
  font-family: Montserrat, "Helvetica Neue", sans-serif;
}
h2 {
  font-family: Merriweather, Georgia, serif;
}
.site-branding .site-title a {
  color: red;	
  font-family: Merriweather, Georgia, serif;
}
.site-description {
  color: red;
  font-family: Merriweather, Georgia, serif;
}
.main-navigation {
  font-family: Merriweather, Georgia, serif;
}
.entry-title {
  font-family: Merriweather, Georgia, serif;
}
.wp-block-code {
  color: #0ff;
}
.wp-block-search .wp-block-search__label {
  font-family: Merriweather, Georgia, serif;
}
.site-info {
  font-family: Merriweather, Georgia, serif;
}

できたのがこちら↓

Chrome デベロッパーツール

Chrome デベロッパーツールのことを少し書いてみます。Chrome デベロッパーツールはChromeに備わっている機能で、ブラウザに拡張機能を追加しないで使うことができるツールです。

ツール自体は、確認対象のページを表示した状態で、メニューから[その他のツール] > [デベロッパーツール] をクリックして起動します。

今回はページのデザインに関する調査なので、”Elements”タブに表示されるHTMLのコードを展開して調査したい行をクリックで選択し、下の”Styles”タブに表示されるCSSの定義の中からレイアウトであれば(margin, padding, border)、フォントであれば(font-family, color)を探すという感じで進めます。

この[Style]タブはとても便利で、カーソルを当てると現れるチェックをOFFにするとその定義が無効になって即時で表示中のページに反映されます。それだけでなく、値の変更や、プロパティの追加もできるので、ここでちょこちょこと編集してから[追加CSS]にコピペするという使い方をするのも効率がよくていいです。

今回のデザイン変更は約3時間でできました。画面を少し動かして目に見えた箇所を調整した感じなので、WordPressのいろいろな機能を使うとデザインが崩れるかもしれませんが、とりあえず今回はこのくらいで満足しておきます。使っていて気になったら適宜直していこうとは思います。

参照

• Twenty Sixteen – WordPress.ORG
• Chrome Dev Tools – デベロッパーツールの公式サイト（英語）