AFFINGERのプロフィールカードって、デフォルトだとシンプルすぎて「ちょっと物足りないな…」と感じたことはありませんか？
AFFINGERなら管理画面だけで「枠線・背景色・文字色・影・角丸」まで自由に調整できます。
さらに紹介文をHTMLで整えると、段落や文字サイズまできれいに仕上げられるので、読みやすさもアップ。
この記事では、
- 管理画面だけでできるカスタマイズ方法
- HTMLを使って紹介文を整えるコツ
を、実例つきでわかりやすく解説していきます。
プロフィールカードとは？
プロフィールカードは、サイトの運営者を紹介するためのボックスです。
AFFINGERでは、サイドバーや記事下に簡単に設置できるので、読者に「どんな人が書いているのか」を伝えるのに役立ちます。
特にブログ初心者にとっては、信頼感を持ってもらえる大切な要素です。
「顔が見える安心感」があると、読者は記事を読み進めやすくなりますし、Google AdSenseの審査でも評価されやすくなります。
ちなみに、記事下に表示される「この記事を書いた人」とは別機能です。
こちらは固定のレイアウトですが、プロフィールカードはカスタマイズの幅が広く、サイトのデザインに合わせて調整できるのが特徴です。
カスタマイズ画面でできること
AFFINGERのプロフィールカードは、管理画面の「外観 → カスタマイズ」から見た目を自由に変更できます。
まずは、設定できる項目を表でまとめてみました。
| 項目 | 設定できる内容 | 効果・特徴 |
|---|---|---|
| ヘッダー画像 | 任意の画像をアップロード | サイトの雰囲気に合わせたデザインにできる |
| アバター画像 | 丸型／影付きに変更可能 | 写真やロゴを目立たせ、カードらしさを演出 |
| 枠線・背景色・文字色 | 色を自由に指定可能 | サイト全体のカラーに統一できる |
| 影・角丸 | チェックを入れるだけでON/OFF | 立体感や柔らかさを簡単に追加 |
| ボタン | リンク先URL・テキスト・色を変更可能 | お問い合わせやプロフィール詳細へ誘導できる |
このように、プロフィールカードはCSSをいじらなくても管理画面だけで柔軟にカスタマイズできます。
次からは各項目の設定手順を具体的に見ていきましょう。
ヘッダー画像を設定する
- 管理画面で「外観 → カスタマイズ」を開く
- 「オプション（その他）」→「プロフィールカード」を選択
- 「ヘッダー画像」の項目から画像をアップロード
- サイトの雰囲気に合わせた画像を設定すると印象が一気に変わります
アバター画像を丸型／影付きにする
- アバター画像の下に「丸くする」「影をつける」のチェックボックスがあるので✔を入れる
- 保存してプレビュー確認
丸いアバターのほうがよりプロフィールっぽく見えます。
影は付けても付けなくてもそんなに変わりません。
枠線・背景色・文字色・影・角丸を調整する
- プロフィールカードの「全体」までスクロール
- ボーダー・テキスト色・背景色をカラーコードまたはカラーパレットで指定
- 「影をつける」「角丸にする」にチェックを入れて保存
装飾例
- ボーダー：#185e2d
- テキスト：#000000
- 背景色：#5effde
- ☑ 影をつける
- ☑ 角丸にする
ボタンのリンク先や色を変更する
- プロフィールカードの「ボタン」設定を開く
- 「URL」にリンク先を入力（例：プロフィールページ）
- テキスト・背景色・文字色を指定して公開する
読者を誘導したいページ（問い合わせ・自己紹介詳細など）がある場合に便利。
HTMLタグで紹介文をきれいに整える方法
プロフィールカードの「紹介文」は、そのまま入力すると改行が効かず読みにくくなってしまいます。
以下のタグを少し使うだけで、ぐっと見やすくなります。
- 改行：
<br> - 段落：
<p>…</p> - 強調：
<strong>重要語</strong> - リンク：
<a href="URL">テキスト</a>
たとえば「詳しいプロフィールを見る」といった導線はこんな感じです。
<p style="text-align:right; font-size:90%;">
<a href="/profile/" target="_blank" rel="noopener">→ 詳しいプロフィールを見る</a>
</p>改行・余白・文字サイズなどを組み合わせると、プロフィール紹介文はこんな感じに整えられます。
詳しいやり方や、他のレイアウト例については以下の記事にまとめていますので参考にしてください。
実際のカスタマイズ例
ここからは、実際にプロフィールカードをカスタマイズした例を紹介します。
同じ機能でも設定次第で印象が大きく変わるので、ぜひ参考にしてください。
例1：シンプル
最小限の情報だけを伝えるスタイル。
ブログ初心者や、シンプルデザインを好む人におすすめです。
例2：CTA付き
CTA（行動喚起）を意識したスタイル。
問い合わせやSNSフォローに誘導したい場合に効果的です。
例3：カード風
ちょっとした装飾で“名刺カード”のような雰囲気に。
自己紹介をしっかり載せたい場合に向いています。
まとめ
AFFINGERのプロフィールカードは、管理画面だけで「枠線・背景色・文字色・影・角丸」まで自由に調整できます。
初心者でもCSSをいじらずに、見た目を大きく変えられるのが魅力です。
さらに紹介文にHTMLを使うと、段落や文字サイズを整えて、より読みやすくできます。
ちょっとした工夫ですが、「この人の記事を読んでみよう」と思ってもらえるきっかけになりますよ。
プロフィールカードを整えることは、信頼性アップにも直結します。
ぜひ自分のサイトの雰囲気に合わせて、カスタマイズを楽しんでください。
関連する記事も合わせてどうぞ。
