AFFINGER6 プロフィールカードの作り方とデザインカスタマイズ徹底解説

こんにちは "osaboo"です。"@osaboo_Bot"

初心者でもできる！AFFINGER6でおしゃれなプロフィールカードを作る方法とデザインカスタマイズをわかりやすく解説します。

それではご覧ください。

プロフィールカードとは？

プロフィールカードとは、ブログやサイトに設置する「自分の情報をまとめた小さなボックス」です。

主に以下の情報を掲載します：

• プロフィール画像
• 名前・肩書き
• 簡単な自己紹介
• SNSリンクやメールアドレス

プロフィールカードを設置するメリット

1. 信頼感をアップ
   • 読者に顔や情報を見せることで、ブログの信頼性が高まります。
2. 読者との距離を縮める
   • 自己紹介やSNSリンクを載せることで、ファンやリピーターを増やせます。
3. ブログ運営に役立つ誘導
   • SNSやメルマガ登録への導線としても使えます。

完成イメージはこんな感じ！

それでは手順を見ていきましょう。

AFFINGER6でプロフィールカードを作る手順

AFFINGER6では、プロフィールカードを簡単に作成できる機能が用意されています。
初心者でも迷わず設定できるよう、順を追って説明します。

❶ プロフィールカードの基本設定

ここで、ニックネーム（名前）・SNSアイコン・自己紹介文などを設定できます。

Menu 『WordPress管理＞ダッシュボード＞ユーザー＞プロフィール』をクリックします。

「プロフィール」画面では、以下の情報を設定します。

• ニックネーム
  • プロフィール画像の下に表示されます。
    • 名前や肩書きは短いものがおすすめです。
• SNSアイコンのリンク
  • プロフィールカードの最下部に表示されます。
    • Twitter・Instagram・YouTubeなど主要SNSのリンクを追加可能です。
    • 設置したSNSアイコンは自動でプロフィールカード内に表示されます。
    • フォローボタン風にデザインすることでクリック率もアップします。（カスタマイザーで設定）
• プロフィール情報
  • ニックネームの下に表示されます。
    • 自己紹介文はブログのテーマや読者に伝えたいポイントを簡潔にまとめましょう。
    • 改行や絵文字も使用可能で、見やすくする工夫ができます。（詳細設定は後述）

入力が終わったら、ページ下部の『プロフィールを更新』をクリックして保存します。

❷ プロフィール画像を設定

プロフィール画像はヘッダー用とアバター用の2つがあり、カスタマイザーから設定できます。

カスタマイザーを起動します。

Menu 『WordPress管理＞ダッシュボード＞外観＞カスタマイズ』をクリックします。

「カスタマイザー」画面で以下の手順で進み、詳細を設定します。

ここでは、「アーカイブページ」の詳細設定項目について紹介します。（赤破線部）

ここでは、プロフィール詳細設定で登録した画像と、プレビューでの表示箇所を確認できます。

❸ デザインのカスタマイズ方法

画層やアバターの形状・影を整えたら、プロフィールカード全体を調整してさらにおしゃれに仕上げましょう。

ここでは、カスタマイザーで設定できるデザインのカスタマイズ項目と、そのプレビューを確認できます。
（赤破線部）

カスタマイザーでの設定変更が完了したら、最後に『公開』をクリックしましょう。

サイトにブログカードを表示する方法

次に、作成したプロフィールカードをサイトに表示させるための設定を行います。

プロフィールカードをサイトに表示するには、ウィジェット機能を利用します。

ここでは、プロフィールカードを「サイドバー上部」のウィジェットエリアに設置する手順をご紹介します。

それでは見ていきましょう。

Menu 『WordPress管理＞❶ダッシュボード＞❷外観＞❸ウィジェット』をクリックします。

以下のウィジェット画面が表示されます。

ウィジェット画面で、❹『11_AFFINGERプロフィールカード』を選択し、❺『サイドバー（上部）』を指定して❻『ウィジェットを追加』をクリックすれば完了です。

ウィジェット機能について こちらの記事で詳しくご紹介しています。あわせてご覧ください。

プロフィールをもっと見やすくする方法

AFFINGER専用の拡張機能では、プロフィール情報をhtmlタグで設定できるため、文字のセンタリングやサイズ調整などを自由に行えます。

また、前述の通り、カスタマイザーでのアバター形状設定とは別に、AFFINGER管理画面でもアバターを丸くする設定が可能です。基本的にはカスタマイザーで十分ですが、テーマ設定でも調整できることを覚えておきましょう。

プロフィールカードで、htmlを許可しない表人の表示とセンター表示の違いをご覧ください。

それでは設定方法を見ていきましょう。

Menu 『WordPress管理＞❶ダッシュボード＞❷AFFINGER管理＞❸投稿・固定記事＞❹この記事を書いた人』をクリックします。

❹をクリックすると以下の画面までスクロールダウンします。

赤枠部の項目にチェックを入れます。

以上で、プロフィールカードの作り方は終了です。お疲れ様でした。

まとめ！AFFINGER6 プロフィールカードの作り方とデザインカスタマイズ徹底解説

この記事では、AFFINGERのプロフィールカードをおしゃれに表示するための設定方法を解説しました。
アバターの形状や影、デザイン調整に加えて、ウィジェットを使ったサイトへの設置手順、さらにhtmlを活用した細かなレイアウト調整まで行うことで、見た目も印象もぐっとアップします。
自分らしさを引き出すデザインで、ブログ全体の信頼感と統一感を高めていきましょう。

この記事がお役に立てば嬉しいです。

「最後まで、ご観覧いただきありがとうございました。」
また、次の記事で…お会いしましょう。＼^^／