こんにちは "osaboo"
です。"@osaboo_Bot"
初心者でもできる！AFFINGER6でおしゃれなプロフィールカードを作る方法とデザインカスタマイズをわかりやすく解説します。
プロフィールカード…どう作る？
それではご覧ください。
プロフィールカードとは？
プロフィールカードとは、ブログやサイトに設置する「自分の情報をまとめた小さなボックス」です。
主に以下の情報を掲載します：
- プロフィール画像
- 名前・肩書き
- 簡単な自己紹介
- SNSリンクやメールアドレス
プロフィールカードを設置するメリット
- 信頼感をアップ
- 読者に顔や情報を見せることで、ブログの信頼性が高まります。
- 読者との距離を縮める
- 自己紹介やSNSリンクを載せることで、ファンやリピーターを増やせます。
- ブログ運営に役立つ誘導
- SNSやメルマガ登録への導線としても使えます。
完成イメージはこんな感じ！
当サイトのプロフィールはこんな感じです。
自分の個性（キャリア）等をアピールするために表示するのはとても重要です。
作り方は簡単なので「是非」作りましょう。
- 基本作業内容は以下です。
- ニックネームを決める
- SNSアイコンの表示選択
- 表示させるSNSのURLを入力
- プロフィール情報（自己紹介文）を書く
- プロフィール背景用の画像の設定
- アバター用の画像の設定
- ボタン設定（除外）
それでは手順を見ていきましょう。
AFFINGER6でプロフィールカードを作る手順
AFFINGER6では、プロフィールカードを簡単に作成できる機能が用意されています。
初心者でも迷わず設定できるよう、順を追って説明します。
❶ プロフィールカードの基本設定
ここで、ニックネーム（名前）・SNSアイコン・自己紹介文などを設定できます。
Menu 『WordPress管理＞ダッシュボード＞ユーザー＞プロフィール』をクリックします。
「プロフィール」画面では、以下の情報を設定します。
- ニックネーム
- プロフィール画像の下に表示されます。
- 名前や肩書きは短いものがおすすめです。
- プロフィール画像の下に表示されます。
- SNSアイコンのリンク
- プロフィールカードの最下部に表示されます。
- Twitter・Instagram・YouTubeなど主要SNSのリンクを追加可能です。
- 設置したSNSアイコンは自動でプロフィールカード内に表示されます。
- フォローボタン風にデザインすることでクリック率もアップします。（カスタマイザーで設定）
- プロフィールカードの最下部に表示されます。
- プロフィール情報
- ニックネームの下に表示されます。
- 自己紹介文はブログのテーマや読者に伝えたいポイントを簡潔にまとめましょう。
- 改行や絵文字も使用可能で、見やすくする工夫ができます。（詳細設定は後述）
- ニックネームの下に表示されます。
入力が終わったら、ページ下部の『プロフィールを更新』をクリックして保存します。
❷ プロフィール画像を設定
プロフィール画像はヘッダー用とアバター用の2つがあり、カスタマイザーから設定できます。
カスタマイザーを起動します。
Menu 『WordPress管理＞ダッシュボード＞外観＞カスタマイズ』をクリックします。
「カスタマイザー」画面で以下の手順で進み、詳細を設定します。
ここでは、「アーカイブページ」の詳細設定項目について紹介します。（赤破線部）
オプション（その他）
➡︎
プロフィールカード
➡︎
詳細設定項目
⬇︎
ここでは、プロフィール詳細設定で登録した画像と、プレビューでの表示箇所を確認できます。
詳細設定項目
表示箇所
❸ デザインのカスタマイズ方法
画層やアバターの形状・影を整えたら、プロフィールカード全体を調整してさらにおしゃれに仕上げましょう。
ここでは、カスタマイザーで設定できるデザインのカスタマイズ項目と、そのプレビューを確認できます。
（赤破線部）
カスタマイザーでの設定変更が完了したら、最後に『公開』をクリックしましょう。
サイトにブログカードを表示する方法
次に、作成したプロフィールカードをサイトに表示させるための設定を行います。
プロフィールカードをサイトに表示するには、ウィジェット機能を利用します。
ここでは、プロフィールカードを「サイドバー上部」のウィジェットエリアに設置する手順をご紹介します。
それでは見ていきましょう。
Menu 『WordPress管理＞❶ダッシュボード＞❷外観＞❸ウィジェット』をクリックします。
以下のウィジェット画面が表示されます。
ウィジェット画面で、❹『11_AFFINGERプロフィールカード』を選択し、❺『サイドバー（上部）』を指定して❻『ウィジェットを追加』をクリックすれば完了です。
ウィジェット機能について こちらの記事で詳しくご紹介しています。あわせてご覧ください。
-
-
【AFFINGER6】利用できるウィジェット一覧＆設定・活用法を徹底解説【WordPress対応】
AFFINGER6の専用ウィジェットとWordPress標準ウィジェットをすべて解説！設定方法や削除方法を詳しく説明し、初心者にもわかりやすく用途を紹介。ウィジェット活用ガイドを作りました！
プロフィールをもっと見やすくする方法
AFFINGER専用の拡張機能では、プロフィール情報をhtmlタグで設定できるため、文字のセンタリングやサイズ調整などを自由に行えます。
また、前述の通り、カスタマイザーでのアバター形状設定とは別に、AFFINGER管理画面でもアバターを丸くする設定が可能です。基本的にはカスタマイザーで十分ですが、テーマ設定でも調整できることを覚えておきましょう。
プロフィールカードで、htmlを許可しない表人の表示とセンター表示の違いをご覧ください。
左側のように、デフォルトではテキストが左詰めの中央寄せになっており、「改行・配置・装飾」などの細かな調整はできません。
htmlを有効にすると、右側のように改行や配置などを自由にカスタマイズできるようになります。
デフォルト、テキスト調整無し
htmlタグで設定し、テキストを調整
それでは設定方法を見ていきましょう。
Menu 『WordPress管理＞❶ダッシュボード＞❷AFFINGER管理＞❸投稿・固定記事＞❹この記事を書いた人』をクリックします。
❹をクリックすると以下の画面までスクロールダウンします。
赤枠部の項目にチェックを入れます。
補足
- アバター画像を丸くする（※コメント欄のアバター画像含む）◀︎ おすすめです。
- プロフィール情報にhtmlタグを許可する ◀︎ 「幅・振り分け・改行」等の自由度が広がります。
例えば
<br> を入れて「改行」する。
<p class="●●”>テキスト</p> で、「中央寄せ・強調」など、テキストを変更する。
まとめ！AFFINGER6 プロフィールカードの作り方とデザインカスタマイズ徹底解説
この記事では、AFFINGERのプロフィールカードをおしゃれに表示するための設定方法を解説しました。
アバターの形状や影、デザイン調整に加えて、ウィジェットを使ったサイトへの設置手順、さらにhtmlを活用した細かなレイアウト調整まで行うことで、見た目も印象もぐっとアップします。
自分らしさを引き出すデザインで、ブログ全体の信頼感と統一感を高めていきましょう。
この記事がお役に立てば嬉しいです。
「最後まで、ご観覧いただきありがとうございました。」
また、次の記事で…お会いしましょう。＼^^／
