こんにちは "osaboo"
です。"@osaboo_Bot"
この記事で解決できる悩み
この記事では、これらのお悩みを解決します。
「まずはブログを始めたい！」という方は、『WordPressブログ完全ガイド』をご覧ください。
開設から運営・収益化までを初心者向けに画像付きでわかりやすく解説しています。
AFFINGER7のプロフィールカードとは？
AFFINGER7のプロフィールカードは、運営者の情報を見やすく表示できる機能です。
プロフィール画像や名前、自己紹介文、SNSアイコンなどをまとめて表示できるので、読者に「どんな人が運営しているブログなのか」を伝えやすくなります。
また、デザインや表示内容も自由にカスタマイズできるので、ブログの雰囲気に合わせたプロフィールカードを作成できます。
この記事では、プロフィールカードの作成方法からデザインのカスタマイズ、ウィジェットへの設置方法まで、初心者の方にもわかりやすく解説します。
プロフィールカードを設置するメリット
- 信頼感をアップ
- 読者に顔や情報を見せることで、ブログの信頼性が高まります。
- 読者との距離を縮める
- 自己紹介やSNSリンクを載せることで、ファンやリピーターを増やせます。
- ブログ運営に役立つ誘導
- SNSやメルマガ登録への導線としても使えます。
完成イメージはこんな感じです。
当サイトのプロフィールはこんな感じです。
自分の個性（キャリア）等をアピールするために表示するのはとても重要です。
作り方は簡単なので「是非」作りましょう。
- 基本作業内容は以下です。
- ニックネームを決める
- SNSアイコンの表示選択
- 表示させるSNSのURLを入力
- プロフィール情報（自己紹介文）を書く
- プロフィール背景用の画像の設定
- アバター用の画像の設定
- ボタン設定（除外）
関連記事
ブログ全体の基本設定がまだの方は、先にサイト基本情報を設定しておきましょう。
-
-
AFFINGER7のサイト基本情報設定｜サイトのタイトル・キャッチフレーズ・サイトアイコン設定を解説
AFFINGER7のサイト基本情報設定を解説します。カスタマイザーでサイトタイトル・キャッチフレーズ・サイトアイコンを設定する方法や、WordPressの一般設定との連動について初心者向けに分かりやすく紹介します。
AFFINGER7でプロフィールカードを作る手順
AFFINGER7のプロフィールカードは、まずWordPressでプロフィール情報を登録し、その後カスタマイザーで画像やデザインを設定します。
最後にウィジェットへ設置すれば、プロフィールカードを表示できます。
❶ WordPressのプロフィールで基本情報を入力する
Menu『WordPress管理画面 → ユーザー → プロフィール』をクリックします。
「プロフィール」画面では、以下の情報を設定します。
- ニックネーム
- プロフィール画像の下に表示されます。
- 名前や肩書きは短いものがおすすめです。
- プロフィール画像の下に表示されます。
- SNSアイコンのリンク
- プロフィールカードの最下部に表示されます。
- Twitter・Instagram・YouTubeなど主要SNSのリンクを追加可能です。
- 設置したSNSアイコンは自動でプロフィールカード内に表示されます。
- フォローボタン風にデザインすることでクリック率もアップします。（カスタマイザーで設定）
- プロフィールカードの最下部に表示されます。
- プロフィール情報
- ニックネームの下に表示されます。
- 自己紹介文はブログのテーマや読者に伝えたいポイントを簡潔にまとめましょう。
- 改行や絵文字も使用可能で、見やすくする工夫ができます。（詳細設定は後述）
- ニックネームの下に表示されます。
入力が終わったら、ページ下部の『プロフィールを更新』をクリックして保存します。
❷ プロフィール画像・ヘッダー画像を設定する
プロフィール情報を登録したら、次はプロフィールカードに表示する画像を設定しましょう。
プロフィールカードには、「ヘッダー画像」と「アバター画像」の2種類の画像を表示できます。どちらもWordPressカスタマイザーから簡単に設定できます。
カスタマイザーを起動します。
Menu『WordPress管理画面 → 外観 → カスタマイズ』をクリックします。
「カスタマイザー」画面で以下の手順で進み、詳細設定項目を開きます。
オプション（その他）
➡︎
プロフィールカード
➡︎
詳細設定項目
⬇︎
詳細設定項目で、設定した「ヘッダー画像」と「アバター画像」がプロフィールカードのどこに表示されるのかを、プレビューで確認しながら設定できます。
詳細設定項目
表示箇所
❸ プロフィールカードのデザインをカスタマイズする
ヘッダー画像やアバターの形状・影を設定したら、プロフィールカード全体のデザインを整えて、さらにおしゃれに仕上げましょう。
カスタマイザーで設定できるデザインのカスタマイズ項目と、そのプレビューを確認できます。
カスタマイザーでの設定変更が完了したら、最後に『公開』をクリックしましょう。
関連記事
プロフィールカードの色もブログ全体のデザインに合わせると、統一感のあるサイトに仕上がります。
-
-
AFFINGER7の全体設定を解説｜サイト全体の初期設定とカスタマイズ方法
AFFINGER7の全体設定を初心者向けに解説。カラーパターンやデザインパターン、レイアウト、フォントなど、サイト全体の初期設定とおすすめのカスタマイズ方法を画像付きでわかりやすく紹介します。
❹ プロフィールカードをウィジェットへ設置する
次に、作成したプロフィールカードをサイトに表示させるための設定を行います。
プロフィールカードをサイトに表示するには、ウィジェット機能を利用します。
ここでは、プロフィールカードを「サイドバー上部」に表示するための設置手順を解説します。
それでは設定方法を見ていきましょう。
Menu『WordPress管理画面 → ❶ダッシュボード → ❷外観 → ❸ウィジェット』をクリックします。
以下のウィジェット画面が表示されます。
ウィジェット画面で、❹『11_AFFINGERプロフィールカード』を選択し、❺『サイドバー（上部）』を指定して❻『ウィジェットを追加』をクリックすれば完了です。
関連記事
ウィジェット機能について こちらの記事で詳しくご紹介しています。あわせてご覧ください。
-
-
AFFINGER7のウィジェット一覧と設定方法｜おすすめの使い方も解説
AFFINGER7のウィジェット一覧や設定方法を初心者向けに解説。おすすめのウィジェット配置例、不要なウィジェットの無効化、ウィジェットタイトルのスタイル設定、表示されないときの対処法まで分かりやすく紹介します。
プロフィールをもっと見やすくする方法
AFFINGER専用の拡張機能を使うと、プロフィール情報にHTMLタグを使用できます。
文字を中央揃えにしたり、文字サイズを変更したり、リンクを追加したりと、自己紹介を自由にカスタマイズできるので、見やすくおしゃれなプロフィールカードに仕上げられます。
また、前述のとおり、アバターの形状はカスタマイザーだけでなく、AFFINGER管理からも丸型に変更できます。基本的にはカスタマイザーで設定すれば十分ですが、設定できる場所がもう一つあることも覚えておくと便利です。
下の画像では、HTMLを許可しない場合とHTMLを許可して中央揃えにした場合の表示を比較しています。どのように見た目が変わるのか、ぜひ見比べてみてください。
左側のように、デフォルトではテキストが中央揃えで表示されるので、改行や文字の配置、装飾などを細かく調整することはできません。
HTMLを有効にすると、右側のように改行や文字の配置、装飾などを自由にカスタマイズでき、より見やすいプロフィールカードを作成できます。
デフォルト、テキスト調整無し
htmlタグで設定し、テキストを調整
それでは設定方法を見ていきましょう。
Menu『WordPress管理画面 → ❶ダッシュボード → ❷AFFINGER管理 → ❸投稿・固定記事 → ❹この記事を書いた人』をクリックします。
❹をクリックすると以下の画面までスクロールダウンします。
赤枠部の項目にチェックを入れます。
補足
- アバター画像を丸くする（※コメント欄のアバター画像含む）◀︎ おすすめです。
- プロフィール情報にhtmlタグを許可する ◀︎ 「幅・振り分け・改行」等の自由度が広がります。
例えば
<br> を入れて「改行」する。
<p class="●●”>テキスト</p> で、「中央寄せ・強調」など、テキストを変更する。
プロフィールカードが表示されないときの対処法
プロフィールカードが表示されない場合は、次のポイントを確認してみましょう。
- プロフィールカードウィジェットが設置されているか
「外観 → ウィジェット」で、表示したいウィジェットエリアにプロフィールカードが追加されているか確認します。 - プロフィール情報が登録・保存されているか
「ユーザー → プロフィール」で自己紹介や表示名を入力し、「プロフィールを更新」をクリックして保存します。 - カスタマイザーの設定を公開しているか
画像やデザインを変更したあとは、「公開」をクリックして設定を反映させましょう。 - キャッシュが残っていないか
変更が反映されない場合は、ブラウザやキャッシュ系プラグインのキャッシュを削除して再読み込みします。
まとめ！AFFINGER7のプロフィールカードの作り方｜デザインカスタマイズ手順
今回は、AFFINGER7でプロフィールカードを作成・カスタマイズする方法をご紹介しました。
プロフィールカードは、運営者の情報をわかりやすく伝えられるだけでなく、ブログに安心感や親しみやすさを与えられる便利な機能です。
設定の流れは次の4ステップです。
- 「ユーザー → プロフィール」で基本情報を登録する
- カスタマイザーでヘッダー画像・アバター画像を設定する
- プロフィールカードのデザインをカスタマイズする
- ウィジェットへ設置して表示を確認する
どの設定も難しくないので、ぜひこの記事を参考に、自分のブログに合ったプロフィールカードを作成してみてください。
