AFFINGER7のプロフィールカード設定方法｜画像・自己紹介・カスタマイズを解説

「AFFINGER7でプロフィールカードを作りたいけど、設定方法がわからない……」

「サイドバーに自分のアイコン画像や自己紹介を表示したい！」

「プロフィール文を改行したり、デザインを変更したりできるの？」

そんな疑問を持っていませんか？

AFFINGER7には、ブログの運営者情報をわかりやすく紹介できるプロフィールカード機能が用意されています。

プロフィールカードを設置すると、読者に「どんな人が記事を書いているのか」を伝えられるだけでなく、プロフィールページやSNSへの案内にも役立ちます。

しかも、基本的な設定なら難しいコードを書く必要はありません。

この記事では、AFFINGER7を使い始めたばかりの初心者向けに、次の内容を解説していきます。

• プロフィールカードをサイドバーに設置する方法
• アイコン画像やヘッダー画像の変更方法
• 名前・自己紹介文・SNSの設定方法
• 改行・左寄せ・太字・リンクなどのカスタマイズ
• プロフィールカードが表示されない場合の対処法

実際の設定手順を中心に、順番に説明していきます。

この記事を読みながら操作すれば、自分らしいプロフィールカードを作成できますよ。

※この記事はAFFINGER6で作成した旧記事をAFFINGER7向けに見直したものです。管理画面の名称や表示は利用中のバージョンによって異なる場合があります。

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

AFFINGER7のプロフィールカードは、ブログの運営者情報をカード形式で表示できる機能です。

主にサイドバーで使用し、プロフィール画像や自己紹介文、SNSへのリンクなどをまとめて掲載できます。

プロフィールカードはこんな感じです。

プロフィールカードでは、主に次の項目を設定できます。

設定項目	内容
プロフィール画像	顔写真やオリジナルアイコンを表示
ヘッダー画像	カード上部に背景画像を表示
名前	ブログ運営者の表示名
自己紹介文	経歴・専門分野・発信内容など
SNSリンク	登録したSNSへのリンク
ボタン	詳しいプロフィールなどへの案内
カードデザイン	背景色・枠線・影などの調整

※利用できる項目やデザインはAFFINGER7のバージョン、設定内容によって異なります。

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

プロフィールカードには、主に3つのメリットがあります。

① 誰が記事を書いているのか伝えられる

初めてブログを訪れた人は、記事の内容だけでなく、どんな人が情報を発信しているのか気になることがあります。

プロフィールカードに運営者の経歴や経験、ブログのテーマを掲載することで、読者が発信者について理解しやすくなります。

② プロフィールページへ誘導できる

短い自己紹介だけでは伝えきれない情報は、専用のプロフィールページにまとめておくと便利です。

プロフィールカードからそのページへリンクを設置すれば、ブログ運営者についてさらに知ってもらうきっかけになります。

③ SNSやほかのページへ案内できる

SNSを運用している場合は、プロフィールカードからSNSアカウントへ案内することもできます。

また、問い合わせページやサービス紹介ページへのボタンを設置する使い方もあります。

ただし、プロフィールカードを設置しただけで検索順位が上がったり、必ず読者の滞在時間が長くなったりするわけではありません。

あくまで、読者に役立つ運営者情報をわかりやすく伝えることが大切です。

AFFINGER7のプロフィールカード設定方法【5ステップ】

それでは、実際にプロフィールカードを設定してみましょう。

作業は次の5ステップです。

1. サイドバーにプロフィールカードを追加する
2. プロフィール画像を設定する
3. 名前と自己紹介文を登録する
4. SNSリンクとボタンを設定する
5. 公開画面で表示を確認する

まずは基本的なプロフィールカードを完成させ、そのあとでデザインを変更していきます。

関連記事：AFFINGER7の基本操作をもっと知りたい方へ

プロフィールカード以外の設定方法も知りたい方は、こちらの記事を参考にしてください。

AFFINGER7の使い方まとめ｜初期設定からカスタマイズまで初心者向けに解説

AFFINGER7のプロフィールカードをカスタマイズする方法

プロフィールカードは、画像や自己紹介を設定するだけでも十分ですが、デザインを調整するとブログ全体に統一感が生まれます。

ここでは、初心者でも取り組みやすいカスタマイズ方法を紹介します。

① 背景色や枠線の色を変更する

プロフィールカードの背景色や枠線を変更したい場合は、カスタマイザーのプロフィールカード設定画面を開きます。

変更できる項目には、背景色や枠線の色などがあります。

おすすめは、ブログ全体で使用しているメインカラーに合わせることです。

例えば、ブログの見出しやボタンに青色を使用しているなら、プロフィールカードにも同系色を取り入れると統一感が出ます。

ただし、色を増やしすぎると、かえって読みにくくなる場合があります。

基本的には、背景色・文字色・アクセントカラーの組み合わせをシンプルにまとめるとよいでしょう。

② 角丸や影を設定する

プロフィールカードのデザイン設定では、カードの角を丸くしたり、影を付けたりできます。

角丸を使用すると柔らかい印象に、影を付けるとカードが背景から少し浮き上がったような印象になります。

ただし、影を強くしすぎると目立ちすぎることもあるため、控えめな設定がおすすめです。

設定を変更したら、必ずプレビューで確認してみてください。

③ 自己紹介文を改行する方法

プロフィールカードを設定したあと、次のように感じることがあります。

「自己紹介の文章がつながって表示されてしまう……」

「読みやすい位置で改行したい！」

その場合は、HTMLタグを使用する方法があります。

まずはHTMLタグの利用を許可する設定を確認しましょう。

「AFFINGER管理」→「投稿・固定記事」→「この記事を書いた人」を選択します。

「プロフィール情報にhtmlタグを許可する」にチェックを入れて保存します。

この機能は、プロフィール情報で一部のHTMLタグを使用できるようにするものです。

すべてのHTMLタグが自由に使えるわけではありません。

次に「プロフィール」の自己紹介入力欄で改行したいところに「<br>」と入力します。

入力が終わったら下の「プロフィールを更新」をクリックして保存してください。

「外観」→「カスタマイズ」で確認すると自己紹介文が改行されているのが確認できると思います。

④ 自己紹介文を左寄せにする方法

自己紹介文はそのままでは中央寄せの表示になります。

左寄せにするには「プロフィール」の自己紹介入力欄の最初に「<p style="text-align:left">」最後「</p>」と入力します。

※AFFINGER管理で「プロフィール情報にhtmlタグを許可」設定後でないと反映されません。

入力が終わったら下の「プロフィールを更新」をクリックして保存してください。

「外観」→「カスタマイズ」で確認すると自己紹介文が左寄せになっているのが確認できると思います。

⑤ 自己紹介文の一部を太字にする方法

テキストを太字にする場合は太字にしたい文字を

「<B>テキスト</B>」

または

「<strong>テキスト</strong>」

といった＜B＞タグや＜strong＞タグを利用することで太字にすることができます。

※AFFINGER管理で「プロフィール情報にhtmlタグを許可」設定後でないと反映されません。

⑥ 自己紹介文にリンクを設置する方法

リンクを設定するには＜A＞タグを利用します。

<a href="URL">プロフィールはこちら</a>

こんな感じでタグとURLを設定することでリンクを設定することができます。

※AFFINGER管理で「プロフィール情報にhtmlタグを許可」設定後でないと反映されません。

ただし、リンク用HTMLも利用環境によっては制限される場合があります。

HTMLを使わずにボタンURLとボタンテキストを設定する方が初心者には簡単です。

HTMLカスタマイズで注意したいこと

HTMLを使用する場合は、次の点に注意してください。

• 利用できるのはテーマが許可している一部のHTMLタグ
• 保存後に実際の表示を必ず確認する
• コピーしたコードに不要な記号が含まれていないか確認する
• 信頼できないサイトのコードをそのまま貼り付けない
• JavaScriptなどの複雑なコードは入力しない

また、複数人でWordPressを管理している場合は、HTMLの利用を許可する範囲についても慎重に判断しましょう。

まずは標準機能でプロフィールカードを完成させ、必要な部分だけをカスタマイズするのがおすすめです。

プロフィール画像の作り方とおすすめサイズ

プロフィールカードを作成する際に、意外と迷いやすいのがアイコン画像です。

「顔写真を使わないといけないの？」

「イラストでも問題ない？」

という疑問を持つ方もいると思います。

結論からいうと、顔写真である必要はありません。

ブログの雰囲気に合ったオリジナルイラストやアイコン画像でも大丈夫です。

プロフィール画像のおすすめサイズ

プロフィール画像には、正方形の画像を使用するのがおすすめです。

例えば、次のサイズを目安にするといいと思います。

画像の種類	おすすめの準備サイズ
アイコン画像	600×600px程度
ヘッダー画像	500×150px程度から調整

これらは画像制作時の目安であり、AFFINGER7の公式な必須サイズではありません。

実際には表示枠の形やトリミングによって見え方が変わります。

そのため、画像の端ぎりぎりに文字や顔などを配置しないようにしましょう。

また、画像のファイルサイズが大きすぎるとページの読み込みに影響する場合があります。

必要以上に大きな画像を使用せず、WebPなどの画像形式で適切に圧縮することもおすすめです。

無料素材サイトでアイコンを用意する

画像制作が苦手な方は、イラスト素材サイトを利用する方法があります。

代表的なサイトには次のようなものがあります。

• いらすとや
• イラストAC
• CHARAT

ただし、素材サイトによって商用利用や加工、再配布などの利用条件が異なります。

利用前に必ず最新の利用規約を確認してください。

Canvaでオリジナルアイコンを作る

ブログのデザインに合わせてアイコンを作りたい場合は、Canvaも便利です。

→　Canva公式サイト

Canvaでは、画像や図形、背景色、文字などを組み合わせて画像を作成できます。

無料で利用できる機能もあるため、初めて画像を作る方にも取り組みやすいです。

例えば、次のような手順で作成できます。

1. Canvaを開く
2. 600×600pxのデザインを作成する
3. 背景色やイラストを設定する
4. 必要に応じて文字を追加する
5. PNGなどの画像形式で保存する

保存した画像を、AFFINGER7のプロフィールカードに登録すれば完成です。

なお、素材の使用条件はCanvaのライセンスに従ってください。

AI画像生成でアイコンを作る

最近では、AIを使用してアイコン画像を作成する方法が一番簡単です。

例えば、「優しい雰囲気のブログ運営者のイラスト」など、作りたい画像のイメージを文章で指定して生成できます。

ただし、AI画像を利用する場合には、生成サービスの利用規約や第三者の著作権、肖像権などに注意が必要です。

特に、既存のキャラクターや実在する人物と似た画像を無断で使用しないようにしましょう。

プロフィール画像はブログの印象を左右する部分なので、自分のブログに合うものを選んでくださいね。

AFFINGER7のプロフィールカードが表示されない場合の対処法

プロフィールカードを設定したのに、うまく表示されない場合もあります。

そんなときは、慌てずに原因を一つずつ確認してみましょう。

① プロフィールカード自体が表示されない

まずは、ウィジェットが正しい場所に設置されているか確認します。

確認手順

1. 「外観」→「ウィジェット」を開く
2. プロフィールカード用のウィジェットを探す
3. サイドバー用エリアに配置されているか確認する
4. 必要な設定を保存する
5. 実際のブログを開いて確認する

ウィジェットの設置先がフッターなど別の場所になっていると、想定した位置に表示されません。

また、固定ページやLP用のレイアウトなど、サイドバーが表示されないページもあります。

通常の投稿ページでも確認してみましょう。

② プロフィール画像が表示されない

画像だけが表示されない場合は、次の項目を確認します。

• カスタマイザーでアバター画像を設定したか
• 画像の設定を公開したか
• メディアライブラリの画像が正常に表示されるか
• キャッシュが古い状態になっていないか

まずはカスタマイザーを開き、画像が登録されているか確認してください。

問題がない場合は、ブラウザを再読み込みしてみましょう。

キャッシュ系プラグインを使用している場合は、必要に応じてキャッシュの削除も確認します。

③ 自己紹介文が反映されない

自己紹介文が表示されない場合は、WordPressのユーザープロフィールを確認します。

「ユーザー」→「プロフィール」を開き、プロフィール情報欄に文章が入力されているか確認してください。

入力後に「プロフィールを更新」をクリックしていない場合、変更が保存されていない可能性があります。

また、複数のユーザーでブログを運営している場合は、表示対象のユーザーが異なることもあります。

その場合は、プロフィールカードが参照しているユーザー情報も確認しましょう。

④ 改行やHTMLが反映されない

自己紹介文に<br>などのHTMLタグを入力しても反映されない場合は、次の設定を確認してください。

「AFFINGER管理」→「投稿・固定記事」→「この記事を書いた人」

「プロフィール情報にhtmlタグを許可する」が設定されているかを確認します。

ただし、この設定を有効化しても、すべてのHTMLやCSSが利用できるわけではありません。

許可されていないタグや属性は、保存時に削除されたり、表示に反映されなかったりする場合があります。

特に装飾用のCSSが反映されない場合は、通常の文章表示に戻すことも検討しましょう。

⑤ SNSアイコンが表示されない

SNSアイコンが表示されない場合は、ユーザープロフィールに入力したURLを確認します。

次の点をチェックしてください。

• SNSのURLが正しく入力されているか
• 入力内容を保存したか
• 利用中のAFFINGER7が該当SNSに対応しているか
• 対象のSNSアイコンを非表示にする設定がないか

SNSによってはテーマのバージョンや対応状況が異なります。

専用アイコンが用意されていない場合は、プロフィールボタンなど別のリンク設置方法を検討してみましょう。

⑥ スマートフォンで表示されない

パソコンでは表示されるのに、スマートフォンで見つからない場合もあります。

これは、スマートフォンではサイドバーの表示位置やレイアウトが異なることがあるためです。

まずは記事の一番下までスクロールしてみましょう。

それでも見つからない場合は、次の点を確認します。

• スマートフォンでサイドバーを表示する設定になっているか
• モバイル表示で非表示にする設定がないか
• 1カラムなどサイドバーのないレイアウトを使用していないか

カスタマイザーのプレビューだけでなく、実際のスマートフォンでも確認することをおすすめします。

⑦ 設定を変更してもデザインが反映されない

設定変更後に以前のデザインが表示される場合は、キャッシュが影響している可能性があります。

次の順番で確認してみましょう。

1. 設定を保存・公開したか確認する
2. ブラウザを再読み込みする
3. シークレットウィンドウで表示を確認する
4. キャッシュ系プラグインの設定を確認する
5. 必要に応じてサイト側のキャッシュを削除する

複数の設定を一度に変更すると、何が原因なのかわかりにくくなります。

できれば、一つずつ変更して表示を確認するのがおすすめです。

それでも解決しない場合は、テーマや関連プラグインのバージョン、ほかのプラグインとの競合なども確認してください。

AFFINGER7の設定をまとめて確認したい方はこちら

プロフィールカード以外の初期設定や便利な機能については、こちらの記事で紹介しています。

AFFINGER7の使い方完全ガイド｜初期設定・記事作成・カスタマイズ

AFFINGER7のプロフィールカードに関するよくある質問

プロフィールカードを作成するためにプラグインは必要ですか？

AFFINGER7に用意されている標準のプロフィールカード機能を利用する場合、基本的には専用の追加プラグインは必要ありません。

ただし、プロフィール画像の管理方法や追加したい機能によっては、別のプラグインを使用する選択肢もあります。

最初は標準機能を使用するのがおすすめです。

AFFINGER6とAFFINGER7でプロフィールカードの設定方法は違いますか？

AFFINGER6で使用されていたプロフィールカードの基本的な仕組みは、AFFINGER7と大きな違いはありません。

ただし、AFFINGER7ではテーマ全体の機能や設定項目に変更が加えられているため、すべての画面や操作が同じとは限りません。

設定項目が見つからない場合は、使用しているAFFINGER7のバージョンに対応した公式マニュアルを確認してみてください。

プロフィールカードの画像は顔写真でなくても大丈夫ですか？

はい。オリジナルイラストやアイコン画像でも問題ありません。

ブログのテーマや雰囲気に合う画像を選びましょう。

大切なのは、ブログの運営者を読者が認識しやすくすることです。

プロフィールカードを複数の場所に設置できますか？

設置できる場所は、AFFINGER7のウィジェットエリアやレイアウト設定によって異なります。

ただし、プロフィールカードは原則としてサイドバーでの使用を想定した機能です。

複数の場所への配置を検討する場合は、それぞれの表示方法やデザインを確認してください。

プロフィールカードと「この記事を書いた人」は同じ機能ですか？

関連する設定はありますが、表示する目的や場所が異なります。

プロフィールカードは主にサイドバーでサイト運営者を紹介するためのものです。

一方、「この記事を書いた人」は、各投稿記事の執筆者情報を表示する機能です。

それぞれ適切に使用すると、ブログ全体の運営者情報と記事ごとの執筆者情報をわかりやすく伝えられます。

プロフィールカードを設置するとSEOに効果がありますか？

プロフィールカードを設置するだけで検索順位が上がるわけではありません。

ただし、運営者の経験や専門分野を明確にすることは、読者が情報の発信元を理解するうえで役立ちます。

SEOを意識する場合も、単にプロフィールカードを設置するのではなく、読者に必要な情報を正確に掲載することを大切にしましょう。

まとめ｜AFFINGER7のプロフィールカードを設定してブログの信頼性を高めよう

今回は、AFFINGER7のプロフィールカードを設定する方法について解説しました。

最後に、設定手順をおさらいしておきましょう。

1. 「外観」→「ウィジェット」でプロフィールカードを設置する
2. カスタマイザーからアバター画像やヘッダー画像を設定する
3. 「ユーザー」→「プロフィール」で名前と自己紹介文を入力する
4. SNSリンクやプロフィールボタンを設定する
5. 公開画面で表示を確認する

基本的なプロフィールカードなら、難しいHTMLを使わなくても作成できます。

慣れてきたら、背景色や枠線を変更したり、自己紹介文をカスタマイズしたりしてみてください。

プロフィールカードで大切なのは、デザインをおしゃれにすることだけではありません。

「誰が、どんな経験をもとに、どのような情報を発信しているのか」を読者にわかりやすく伝えることです。

まずは短い自己紹介から始めて、少しずつ自分らしいプロフィールカードを完成させましょう。

AFFINGER7の便利な機能をもっと活用しよう！

AFFINGER7には、プロフィールカード以外にもブログを見やすくするための機能が数多くあります。

例えば、記事の見出しデザイン、ボタン、記事一覧、FAQブロックなどもカスタマイズできます。

「次はどこを設定すればいいの？」という方は、AFFINGER7の使い方をまとめた記事も参考にしてみてください。

AFFINGER7の使い方まとめ｜初心者向けの設定・カスタマイズガイドはこちら

また、テーマの特徴や機能を詳しく知りたい方は、こちらもおすすめです。

AFFINGER7完全ガイド｜特徴・メリット・使い方を解説

少しずつ使い方を覚えて、自分らしいブログに仕上げていってください！