（プロフィールって必要？）と思っている人はいますが，プロフィールをサイトの見やすい位置に設置することで，信頼感や親近感が上がりますので，プロフィールは設置することをおすすめします。
今回は，WordPressテーマAFFINGER5でプロフィールを全エリア別に設置する方法と，プロフィールのカスタマイズ方法を紹介します。
この記事はこんな人におすすめ
- プロフィールをサイドバーに設置したい
- プロフィールカードを設置したい
- プロフィールを記事下に設置したい
- おしゃれなプロフィールにしたい
当記事の信頼性
- 当ブログでもアフィンガーを使用
- アフィンガーでカスタマイズ中
- プロフィール全種類実施済み
アフィンガーで設定できるプロフィールは次の3種類です。
アフィンガーで設定できるプロフィール
- サイドバーにプロフィール
- サイドバーにプロフィールカード
- 記事下に「この記事を書いた人」
それでは順に解説していきます。
プロフィールを用意する
まずはプロフィールの設定をします。
ここでの大まかな流れは次のようになります。
step
1プロフィールの設定をする
step
2SNS，お問い合わせフォームのボタンを設定する
step
3プロフィールアイコンを設定する
プロフィールの設定をする
管理画面から
- 「ユーザー」
- プロフィール
をクリックします。
プロフィールに添える自己紹介を入力します。
SNS，お問い合わせフォームのボタンを設定する
ここでは，
- ホーム（ブログURL）
- SNS
- お問い合わせページ
を設定できます。
リンクさせるURLがある場合，ここで入力します。
プロフィールアイコンを設定する
プロフィール用の画像を無料アイコン作成サイトで用意する場合は，3つほど紹介しますので，参考にしてください。
デザインの質を求めるならやはりプロフィールに使うアイコンは信頼できるプロに頼んで手に入れましょう。
WordPressでプロフィール画像を設定する方法は2パターンです。
どちらか1つの方法でOKです。
- Gravatarでプロフィール画像を設定する
- 「WP User Avatar」などのプラグインでプロフィール画像を設定する
- 「サイドバーにプロフィール」でプロフィール画像を設定しない場合は「サイドバーにプロフィール」までスキップしてもらってOKです。
- サイドバーにプロフィールカードを設置するのみの場合はアフィンガーのテーマのカスタマイズでプロフィール画像の設定ができますので「サイドバーにプロフィールカード」までスキップしてもらってOKです。
それでは順に解説していきます。
Gravatarでプロフィール画像を設定する
プロフィールの設定画面で，「Gravatarでプロフィール画像の変更が可能です。」をクリックします。
「Gravatar」のページに移動しますので，アカウントがある場合は「ログイン」，新規の場合は「Gravatarを作成」をクリックします。
「Gravatarを作成」をクリックした場合，必要事項を入力します。
- メールアドレス，ユーザー名，パスワードを入力します。
- 「アカウントを作成」をクリックします。
入力したメールアドレス宛にアカウント作成用のメールが届くので，「アカウントを有効化」をクリックしてください。
Gravatarにログインできれば，アカウントの作成は完了です。
もしくは，「Gravatar」のログインページで「ログイン」をクリックした場合，次のようなページになります。
- メールアドレスまたはユーザー名を入力します。
- 「Continue」をクリックします。
「メールをご確認ください。」という画面になりますので，メールを確認してリンクをクリックします。
「Continue to WordPress.com」をクリックすると，ログインできるはずです。
ログイン後，画像を設定するために「ここをクリックして追加してください！」をクリックします。
「Upload new」をクリックします。
- 「ファイルを選択」をクリックして画像を指定します。
- 「Next」をクリックします。
サイズを変更できる画面に変わります。
画像のサイズが長方形になっている場合は，正方形に変更することをおすすめします。
画像をそのまま使用する場合は変更する必要はありません。
完了したら「Crop Image」をクリックします。
- 設定した画像のレーティング（評価の制限）を設定（普通の画像であれば「G」を選択）
- 「Set rating」をクリック
これで「gravatar」でのプロフィール画像の設定は完了です。
WordPressのプロフィールの設定画面で，アイコンに設定した画像が反映されていれば成功です。
反映されていない場合は，ブラウザのキャッシュを消去や，時間をあけて再度確認してみてください。
最後に「プロフィールを更新」をクリックします。
プラグイン「WP User Avatar」でプロイール画像を設定する
プラグイン「WP User Avatar」を使った方法を解説します。
プラグイン新規追加ページで「WP User Avatar」を「今すぐインストール」をクリックします。
「有効化」をクリックします。
プロフィールの設定画面で，プラグインの画像の項目が追加されていますので，「画像の選択」をクリックして，プロフィールに設定する画像を選択します。
最後に「プロフィールを更新」をクリックします。
サイドバーにプロフィール
当ブログでサイドバーにプロフィールを設置した場合の完成のイメージは，以下の画像のようになります。
カスタマイザーでのプロフィール設定
まずはカスタマイザーでプロフィールの設定をします。
管理画面から，
- 外観
- カスタマイズ
をクリックします。
「オプションカラー」をクリックします。
「サイト管理者紹介（プロフィールカード）」をクリックします。
ここで設定できる項目
- ボーダー色（プロフィールの枠の色）
- 背景色（プロフィールの背景色）
ここで好みの色を設定してください。
ここではボーダー色を黒色，背景色を灰色に設定しています。
例: ボーダー色: #000000
例: 背景色: #efefef
「公開」をクリックします。
設定したプロフィールをサイドバーに設置
管理画面から，
- 外観
- ウィジェット
をクリックします。
「STINGERサイト管理者紹介」を右にあるサイドバーエリアの任意の位置にドラッグアンドドロップで移動させます。
ここでは，サイドバートップに設定しています。
- タイトル名を入力（ここではプロフィール）
- 保存をクリック
「完了」をクリックします。
これでプロフィールのサイドバー設置が完成です。
確認してみると，はじめに解説したプロフィールの設定（SNS，お問い合わせフォームのボタンを設定する）での，SNSボタンとホームボタンが設置されています。
サイドバーにプロフィールカード
当ブログでサイドバーにプロフィールカードを設置した場合の完成のイメージは，以下の画像のようになります。
カスタマイザーでのプロフィールカード設定
まずはカスタマイザーでプロフィールカードの設定をします。
管理画面から，
- 外観
- カスタマイズ
をクリックします。
「オプションカラー」をクリックします。
「サイト管理者紹介（プロフィールカード）」をクリックします。
「プロフィールカードに変更」にチェックを入れます。
- 「画像を選択（プロフィールカード）」（背景画像を設定できる）
- プロフィールカードの画像を選択（プロフィールカードの画像を設定できる）
- 「アバター画像に影をつける（プロフィールカード）」（チェックを入れるとアバター画像に影がつく）
ここでは，プロフィールカードの画像を設定し，「アバター画像に影をつける（プロフィールカード）」にチェックを入れています。
プロフィールカードのボーダー色
例: #000000
プロフィールカードの背景色
例: #efefef
- テキスト色（プロフィールカード）（プロフィールカードの文字の色を設定できる）
- 影をつける（プロフィールカード）（チェックを入れると，プロフィールカードの枠に影がつく）
- 角丸にする（プロフィールカード）（チェックを入れると，プロフィールカードの枠が角丸になる）
ここでは，
影をつける（プロフィールカード）にチェックを入れています。
プロフィールカードの下の部分にリンクボタンをつける
プロフィールカードの下の部分にリンクボタンをつけることが出来ます。
リンクボタンをつけた場合のイメージは，以下の画像のようになります。
カスタマイザーの「サイト管理者紹介（プロフィールカード）」の画面でリンクボタンの設定ができます。
ここで設定できる項目
| ボタンURL | リンク先のURL（紹介したい記事など） |
| ボタンテキスト | リンクボタンにつけるタイトル名 |
| ボタンテキスト色（プロフィールカード） | ボタンの文字色 |
| ボタン上部背景色（プロフィールカード） | ボタンの上の部分の背景色 |
| ボタン下部背景色（プロフィールカード） | ボタンの下の部分の背景色 |
| ボタン影色（プロフィールカード） | ボタンの影の色 |
ここでは，「ボタンURL」と「ボタンテキスト」のみ設定しています。
「公開」をクリックします。
設定したプロフィールカードをサイドバーに設置
管理画面から，
- 外観
- ウィジェット
をクリックします。
「STINGERサイト管理者紹介」を右にあるサイドバーエリアの任意の位置にドラッグアンドドロップで移動させます。
ここでは，サイドバートップに設定しています。
- タイトル名を入力（ここではプロフィール）
- 保存をクリック
「完了」をクリックします。
これでプロフィールカードのサイドバー設置が完成です。
確認してみると，はじめに解説したプロフィールの設定（SNS，お問い合わせフォームのボタンを設定する）での，SNSボタンとお問い合わせボタンとホームボタンが設置されています。
記事下に「この記事を書いた人」
記事の下に「この記事を書いた人」を設置した場合の完成のイメージは，以下の画像のようになります。
「この記事を書いた人」を設置する場合は，WordPressでプロフィール画像を設定する必要がありますので，まだ設定していない場合は，
でプロフィール画像を設定してください。
管理画面から，「AFFINGER5管理」をクリックします。
「投稿・固定記事」をクリックします。
「この記事を書いた人」の箇所で好みに合わせて設定してください。
ここで設定できる項目
| 「この記事を書いた人」を有効化する | チェックを入れると，記事下に「この記事を書いた人」が設置されます。 |
| 「この記事を書いた人」の最新記事を表示する | チェックを入れると，「この記事を書いた人」の最新記事が表示されます。 |
| 記事上にライター情報を表示する | チェックを入れると，記事上にライター情報が表示されます。 |
| 「この記事を書いた人」及び「ライター情報」を固定ページでも表示する | チェックを入れると，「この記事を書いた人」及び「ライター情報」が固定ページの下にも設置されます。 |
| アバター画像を丸くする（※コメント欄のアバター画像含む） | チェックを入れると，アイコンが丸くなります。 |
| プロフィール情報にhtmlタグを許可する | チェックを入れると，プロフィール情報でhtmlタグが使用できるようになります。 |
ここでは，
- 「この記事を書いた人」を有効化する
- 「この記事を書いた人」の最新記事を表示する
にチェックを入れています。
「SAVE」をクリックします。
これで「この記事を書いた人」の設置が完了です。
確認してみると，はじめに解説したプロフィールの設定（SNS，お問い合わせフォームのボタンを設定する）したSNSボタンとホームボタンが設置されています。
「最新記事」も表示されています。
まとめ
アフィンガー5でできるデザイン変更やカスタマイズについては，以下の記事で詳しく解説しています。
参考
当ブログでも使用しているテーマ「WING（AFFINGER5）」は，SEOに強く収益が発生しやすいと評価されていて，稼ぐことに特化した人気のあるWordPress有料テーマです。
WING（AFFINGER5）に興味のある人は，
WING（AFFINGER5）【メリットとデメリットは？】購入とインストールの手順
で紹介していますので，参考にしてください。
-
-
WING（AFFINGER5）【メリットとデメリットは？】購入とインストールの手順
続きを見る
今回は以上になります。
それではまた！
