AFFINGER5

AFFINGER5(アフィンガー5)のプロフィール全エリア設置方法を解説!

悩める人
「AFFINGER5」にプロフィールを設置したいけど、設定するメニューがどこにあるのか分からない。

上記のような悩みを解決できる記事となっています。

 

本記事の内容

  • サイドバーにプロフィールを設置する方法
  • 「この記事を書いた人」のプロフィールを設置する方法

 

本記事の信頼性

私は「AFFINGER5」を2年半以上使用しており、現在は専業ブロガーとして活動しています。

 

「プロフィールなんて設置しても意味はない」と思う方は非常に多いです。

しかし、プロフィールを設置すれば、読者からの信頼を得やすくなるだけでなく、ファン化させることにも繋がります。

「AFFINGER5」では標準機能でプロフィールを設定できますが、設置できるエリア・デザインとしては多様です。

ということで、「AFFINGER5」を利用している場合に設置できるプロフィールについて、設定方法を詳しく解説していきます。

本記事を読み終えれば、読者に読まれやすい位置にプロフィールを設置することができますよ。

それでは、本文の内容を見ていきましょう。

 

 

AFFINGER5(アフィンガー5)のサイドバーにプロフィールを設置する方法

まず、「AFFINGER5」のサイドバーにプロフィールを設置する方法です。

サイドバーにプロフィールを設置したイメージとしては、下記の通りです。

サイドバーのプロフィール

アイコンに背景画像、プロフィール本文、SNSボタン、お問い合わせフォームボタンを設置可能となっています。

サイドバーのプロフィール設置手順としては、下記の通りです。

なお、今回はサイドバーに設置する方法となりますが、ウィジェットを機能を利用し、プロフィールを設置します。

よって、ウィジェットエリアとして用意されている位置であれば、プロフィールは自由に設置可能です。

 

STEP1:自己紹介文の入力

最初に、プロフィールに表示する自己紹介文の入力を行います。

入力位置ですが、WordPressのダッシュボードから「ユーザー > プロフィール」をクリックします。

ユーザー > プロフィール

 

プロフィールの編集画面にて、下へスクロールすると「プロフィール情報」の項目があるので、自己紹介文を入力しましょう。

「プロフィール情報」の項目

改行を入れてもプロフィールの自己紹介文には反映されないので、ご注意ください。

 

自己紹介文を入力後、「プロフィールを更新」ボタンをクリックすれば、登録完了です。

「プロフィールを更新」ボタン

 

STEP2:SNS・お問い合わせフォームボタンの表示設定

「AFFINGER5」のプロフィールには、SNSボタンとお問い合わせフォームボタンを任意で表示できます。

表示イメージとしては、下記の通りです。

SNSボタンとお問い合わせフォームボタン

 

各ボタンを表示する方法ですが、先述の「自己紹介文の入力」と同様に、WordPressのプロフィール編集画面へ遷移します。

下へスクロールすると、連絡先情報としてSNSとお問い合わせフォームのURLを入力できます。

SNSとお問い合わせフォームのURL入力欄

 

表示可能なSNSボタンは下記の通りです。

SNS一覧

  • Twitter
  • Facebook
  • Instagram
  • YouTube
  • Amazon
  • feed

利用しているSNSに関して、URLを入力するようにしましょう。

URLを入力しているSNSボタンのみ、プロフィール欄に表示される仕組みとなっています。

 

お問い合わせフォームのボタンも表示したい場合は、「form」の項目にURLを入力します。

なお、事前にお問い合わせページを設置しておく必要があるので、まだ作成していない方は下記記事を参考にしてください。

関連記事AFFINGER5(アフィンガー5)のお問い合わせフォームは標準機能で設置できる?

SNSとお問い合わせフォームボタンの設定方法は以上です。

 

STEP3:プロフィールのカスタマイズ

次に、プロフィールに表示する画像やカラーなどのカスタマイズ方法を解説していきます。

カスタマイズ画面ですが、WordPressのダッシュボードから「外観 > カスタマイズ」をクリックします。

外観 > カスタマイズ

 

WordPressのカスタマイザー画面が立ち上がるので、「オプションカラー > サイト管理者紹介(プロフィールカード)」と遷移します。

オプションカラー > サイト管理者紹介(プロフィールカード)

 

プロフィールについて、いくつかカスタマイズ項目が用意されているので、詳細を見ていきます。

 

プロフィールカードの利用有無

まず設定すべきが「プロフィールカードに変更」の項目です。

「AFFINGER5」のプロフィールには2種類のデザインが用意されており、「プロフィールカードに変更」のチェックの有無で下記の通りイメージが変わります。

チェックあり

チェックありのプロフィール

チェックなし

チェックなしのプロフィール

見栄えとしてはプロフィールカードのほうが整っています。

また、チェックなしの場合、プロフィールにお問い合わせフォームボタンを表示できません。

よって、「プロフィールカードに変更」の項目はチェックしておくことをおすすめします。

 

アイコン・背景画像の設定

「AFFINGER5」のプロフィールにはアイコンだけでなく、背景画像も設定できます。

アイコンと背景画像のイメージ

 

アイコンを設定する場合は、「アバター画像」の項目にアイコン画像を設定します。

「アバター画像」の項目

画像サイズとしては、150px以上の正方形画像が推奨されています。

ちなみに、当サイトの場合は「800px × 800px」の下記アイコン画像を設定しています。

アイコン画像

大きすぎても、そのまま最適なサイズで縮小される仕様です。

 

次に、アイコンの背景画像ですが、設定する場合は「ヘッダー画像(プロフィールカード)」の項目に画像を登録します。

「ヘッダー画像(プロフィールカード)」の項目

 

1つ注意点として、背景画像は自動でマスクが掛かるわけではありません。

例えば、色の濃い背景画像を使用すると、下記のようにアイコンが少々霞んでしまいます。

アイコンが霞む

 

しかし、背景画像の色合いを薄くすると、アイコンが際立ちます。

アイコンが際立つ

アイコンのカラーにもよりますが、背景画像が自動で薄くなったり、黒色のマスクが掛かるわけではありません。

もし、プロフィールに色が多いと感じた場合は、背景画像を薄くすると効果的です。

 

任意のリンクボタンの表示設定

「AFFINGER5」のプロフィールには、先述の通りSNSとお問い合わせボタンを設置できますが、任意のリンクボタンも設置可能です。

例えば、下記はおすすめ記事へのリンクとして、「当サイト利用テーマ」というボタンを配置したプロフィールです。

おすすめ記事へのリンク

 

ボタンを設置する場合は、「ボタンURL」と「ボタンテキスト」の項目を入力しましょう。

「ボタンURL」と「ボタンテキスト」

 

デザイン設定

様々なカスタマイズ項目が用意されている「AFFINGER5」ですが、プロフィールに関しても豊富なデザインの設定項目があります。

プロフィールのデザインカスタマイズ項目としては、下記の通りです。

プロフィールのデザインカスタマイズ項目

デザインカスタマイズ項目一覧

  • ボーダーカラーの変更
  • 背景カラーの変更
  • テキストカラーの変更
  • ボタンカラーの変更
  • シャドウを付ける

必要に応じてデザインを変更してみてください。

プロフィールのカスタマイズ方法は以上となります。

 

STEP4:プロフィールをサイドバーに設置

ここまででプロフィールの設定は完了なので、最後にサイドバーへプロフィールを設置していきます。

サイドバーへ設置する方法ですが、WordPressのダッシュボードから「外観 > ウィジェット」をクリックします。

外観 > ウィジェット

 

ウィジェットパーツに「11_STINGERサイト管理者紹介」の項目があるので、「サイドバートップ」へ追加します。

「11_STINGERサイト管理者紹介」を「サイドバートップ」へ追加

 

サイドバーにプロフィールが反映されていれば、完了です。

サイドバーにプロフィール反映

もし、ウィジェットの設定を反映してもサイドバーにプロフィールが表示されない場合、ブラウザのキャッシュが影響している場合があります。

再度時間をおいて確認するか、キャッシュを削除してください。

※Chromeの場合「Shift + F5」でキャッシュを無視して、ページを再読み込みします。

「AFFINGER5」のサイドバーにプロフィールを設置する方法は以上です。

 

AFFINGER5(アフィンガー5)の「この記事を書いた人」を設置する方法

「AFFINGER5」では、記事下に「この記事を書いた人」のプロフィールを設置できます。

この記事を書いた人

記事下は読者が記事を読み終え、次の行動を起こすエリアでもあるので、SNSのリンクを配置しておけば、クリックされる確率もアップします。

「この記事を書いた人」の設置手順は下記の通りです。

なお、プロフィールアイコンの設定方法だけ少々複雑となっているので、手順通り進めていきましょう。

 

STEP1:プロフィールアイコンを設定する

まず、プロフィールに表示する自己紹介文やSNSボタンの表示は、先述しました方法と同じです。

>>自己紹介文の入力

>>SNS・お問い合わせフォームボタンの表示設定

 

プロフィールのアイコンを設定する方法としては、下記2パターンあります。

簡単なのは「WP User Avatar」を利用する方法ですが、プラグインの導入が必要となります。

もし、プラグインの導入を少しでも減らしたい方は、「Gravatar」のサービスを利用するようにしましょう。

 

Gravatarで設定する

まずはプラグインを利用せず、「Gravatar」でプロフィールアイコンを設定する方法です。

「Gravatar」は無料で利用できますが、アカウントの登録が必要なのでご注意ください。

 

アカウントの登録方法からですが、Gravatarの公式サイトへアクセスし、「Gravatarを作成」ボタンをクリックします。

Gravatarの公式サイト

 

「Gravatar」のアカウント作成画面へ遷移するので、メールアドレス・ユーザー名・パスワードを入力し、「アカウントを作成」ボタンをしてください。

アカウント作成画面

 

入力した情報に問題がないか、チェックされます。

各項目が正常に入力されていれば、入力したメールアドレスにメールを送った旨の下記画面が表示されます。

メールを送った旨の画面

 

「WordPress.com」から下記メールが届くので、本文の「アカウントを有効化」ボタンをクリックします。

もしメールが届いていない場合は、迷惑メールフォルダも確認するようにしましょう。

メール本文の「アカウントを有効化」ボタン

 

「アカウントを有効化」ボタンをクリック後、「Gravatar」にログインできれば、アカウントの作成は完了となります。

Gravatarのログイン後の画面

 

「Gravatar」のアカウント作成後は、「AFFINGER5」のプロフィールに表示するアイコン画像の設定を行います。

画面右上にアカウントマークがあるので、クリックします。

右上のアカウントマーク

 

プロフィールの設定画面が表示されるので、「クリックして写真を変更」ボタンをクリックしてください。

「クリックして写真を変更」ボタン

 

プロフィールに使用するアイコンを選択すると、画像サイズを変更できる画面に切り替わります。

もし、アイコンのサイズが長方形の場合、正方形に変更するのをおすすめします。

画像のサイズ設定画面

 

サイズを調整後、「写真を変更」ボタンをクリックすると、アイコン画像の設定は完了となります。

アイコンのプロフィール反映

 

WordPressダッシュボードの「ユーザー > プロフィール」から、設定したアイコン画像が「プロフィール写真」の項目に反映されているのを確認してください。

Gravatarで設定した画像の反映確認

画像の反映には少し時間が掛かる場合もあります。

時間をおいて再度確認するか、ブラウザのキャッシュを消すようにしましょう。

「Gravatar」を利用したプロフィール画像の設定方法は以上です。

 

WP User Avatarのプラグインで設定する

次に、「WP User Avatar」のプラグインを利用し、プロフィール画像を設定する方法です。

WordPressのプラグイン新規追加画面から、「WP User Avatar」と検索フォームに入力します。

入力すると「WP User Avatar | User Profile Picture」のプラグインが表示されるので、インストールを完了させ、有効化してください。

WP User Avatar | User Profile Picture

 

プラグインを導入後、WordPressのダッシュボードから「ユーザー > プロフィール」と遷移します。

ユーザー > プロフィール

 

プロフィール画面を下へスクロールさせると、「画像」の項目がプラグインにより追加されています。

「画像の選択」ボタンをクリックし、プロフィールに設定したい画像を選択してください。

「画像の選択」ボタン

最後に「プロフィールを更新」ボタンをクリックすれば、画像の登録は完了となります。

 

STEP2:「この記事を書いた人」を表示する

アイコンの登録が完了したら、次に「この記事を書いた人」の表示設定を行います。

表示する方法ですが、WordPressのダッシュボードから「AFFINGER5 管理」をクリックします。

AFFINGER5 管理

 

「AFFINGER5」の専用カスタマイズ画面が立ち上がるので、「投稿・固定記事」のメニューを選択します。

「投稿・固定記事」のメニュー

 

下へスクロールすると、「この記事を書いた人」を有効化するのチェックボックスがあるので、チェックしましょう。

「この記事を書いた人」を有効化するのチェックボックス

 

また、「この記事を書いた人」のプロフィールでは、下記のように「最新記事」のタブを表示できます。

最新記事

 

「最新記事」タブの設定は任意ですが、表示する場合は「この記事を書いた人」の最新記事を表示するにチェックを入れましょう。

「この記事を書いた人」の最新記事を表示するのチェックボックス

「この記事を書いた人」のプロフィールと「最新記事」のタブが表示されれば、設置完了となります。

 

STEP3:カラーを変更する

最後に、「この記事を書いた人」のカラーを変更する方法です。

カラーの変更は先ほど解説しました、WordPressカスタマイザーの「サイト管理者(プロフィールカード)」にある「ボーダー色」と「背景色」の項目から行います。

「ボーダー色」と「背景色」の項目

 

例えば、ボーダー色を青色、背景色を白色にすると下記のようなプロフィールとなります。

ボーダー色を青色、背景色を白色にしたプロフィール

こちらも自身のサイトカラーに合わせて、カスタマイズするようにしましょう。

「この記事を書いた人」の表示方法からカスタマイズ方法は以上となります。

 

AFFINGER5(アフィンガー5)のプロフィールまとめ

「AFFINGER5」に設置できるプロフィールは、大きく分けてウィジェットエリアと記事下の「この記事を書いた人」の2つです。

ウィジェットエリアとしては、サイドバーに設置するケースがほとんどでしょう。

サイドバーにプロフィールを設置する方法は特に難しくありませんが、「この記事を書いた人」のプロフィールはアイコン画像の設定だけ、少々手間となります。

しかし、プロフィールは読者の信頼も得やすくなり、ファン化にも繋がる重要な情報です。

「AFFINGER5」でブログを始めた方は、最初のうちに設定しておくようにしましょう。

手順は多いですが、設定自体は難しくありません。本記事を参考に手早く設定を済ませてくださいね!
はらちゃん
 
  • この記事を書いた人
  • 最新記事

はらちゃん

専業ブロガー【経歴】開始6ヶ月のブログ収益月400円 ▶︎ 2年半で月50万円 | 私が実践した初心者の方に役立つブログ運営術・SEOノウハウを発信 | 現在4つのブログを運営中 | Twitterフォロワー2,000人超え | 25歳で結婚し、現在27歳の超童顔若手ブロガー

-AFFINGER5

© 2020 アフィリエイトゼミ