【AFFINGER】プロフィールカードを作成する方法を解説

今回はWordPressテーマ「AFFINGER」における、プロフィールカードの作成方法について解説していきます。

「AFFINGER」のプロフィールには「デフォルトデザインのプロフィール」と「カード化したプロフィール」の2種類があります。デフォルトの設定とカード化したものとでは、デザインが異なります。

多くの「AFFINGER」のユーザーの方は「カード化したデザイン」にカスタマイズしてる方が多く、おしゃれなデザインになっていることがわかります。

こんな人におすすめ

「AFFINGER」でプロフィールカードを作成したい方
プロフィールカードのカスタマイズをしたい方

この記事を書いた人

＼当ブログ使用テーマ／

誰でも簡単オシャレなデザイン！
インフォトップ月間総合第１位！
SEO対策と収益UPを標準で搭載！

有名ブロガーに愛用されているSEO最強WordPressテーマ。本ブログも使用中のカスタマイズ性が抜群のテーマです！

AFFINGER6の購入はこちら

「AFFINGER」のプロフィールカードの完成形の紹介

それでは、今回のゴールとなるAFFINGERで作成するプロフィールカードの完成図は以下のようなデザインになります。

SNSのプロフィールのようなデザインで、オシャレな感じです。このようなデザインを「AFFINGER」であれば、簡単に作成できますので、早速作っていきましょう。

AFFINGER5でプロフィールカードを作成する方法

「AFFINGER」を使用した上でのプロフィールカードを作成する方法を解説していきます。以下の手順に沿っていくだけで作成可能です。

プロフィール画像・ヘッダー画像の設定
プロフィールカードのボタン設定
SNSボタン設定
自己紹介文の設定
プロフィールカードに影を付ける方法

プロフィール画像・ヘッダー画像の選択

手順1. WordPress管理画面から「外観」→「カスタマイズ」に移動します。

手順2. カスタマイズ管理画面より、「オプション（その他）」を選択する。

手順3. 次に「プロフィールカード」を選択する。

そうすると、以下のような設定画面が表示されます。初期設定では、プロフィールはデフォルトの設定になっています。

まずは初めに「プロフィールカードに変更」にチェックを入れましょう。

せなお

以上の設定で「デフォルトのプロフィール」から「オシャレなプロフィールカード」に変更されます。

設定が完了したら「公開」ボタンを押して設定を保存しましょう。画像の設定は以下のような形で反映されます。自分の好みに画像を選択してみてください。

プロフィールカードのボタン設定

次に、「プロフィールカード下に位置するボタン」をカスタマイズしていきます。

先程同様の「プロフィールカード」設定の下のあたりに「ボタンURL」という項目があります。ボタンが表示されていない方もここに位置する自分のプロフィールへのURLを記述することでボタンが表示されます。

各項目の概要は以下のようになります。

設定項目	概要
ボタンURL	ボタンを押した時の移動先のURL
ボタンテキスト	ボタンに表示する文字
ボタンテキスト色（プロフィールカード）	ボタンに表示されている文字の色
ボタン上部背景色（プロフィールカード）	ボタンの上部分の色（グラーデーションボタンにしたい時は上部と下部で色を分けます）
ボタン下部背景色（プロフィールカード）	ボタンの上部分の色（グラデーションボタンにしたい時は上部と下部で色を分けます）
ボタン影色（プロフィールカード）	ボタンの影の色

ボタンの移動先はどこでも結構です。基本的には、自分のプロフィールページを記述するのが一般的でしょう。

設定が完了したら席ほど同様に「公開」にて設定を保存しましょう。

SNSボタン設定

続いて、プロフィールカードのSNSボタンを設定をしていきます。SNSボタンは以下の下枠のような、SNSとの連携を図れるボタンのことを指し、最大7個まで設置することができます。

手順1. WordPress管理画面より「ユーザー」→「あなたのプロフィール」に移動します。

手順2. ページの中央あたりの「連絡先情報」の項目に各SNSのURLを入力できる場所があります。こちらに自分が使用しているSNSの情報を入力してください。

枠に入力したメディアだけプロフィールカードに表示されます。アカウントがなかったり、表示させたくない場合は記入しておく必要はありません。また、ボタンのデザインやレイアウトは「AFFINGER」が自動で設定してくれます。

自己紹介文の設定

最後はユーザー名と自己紹介文の設定を行います。

先程と同様に、WordPress管理画面の「ユーザー」→「あなたのプロフィール」に移動します。ニックネームの項目は「名前」という段落にあり、ここにプロフィールカードに表示させてい名前を入力しておきましょう。

同じ項目に「プロフィール情報」という項目があります。ここに簡単な自己紹介文を入力しておきましょう。

注意ポイント

「プロフィール情報」の項目は、改行を使っても実際には改行されずに繋がった文章になります。

せなお

自己紹介文はあなたを理解してもらうための重要な部分なので、簡潔に分かりやすく記述しておきましょう！

プロフィールカードに影を付ける

当ブログでは、プロフィールカードには影がついています。影がつくことでより一層カードの感じやデザインがオシャレになるので、設定方法は知っておきましょう。

WordPress管理画面から「外観」→「カスタマイズ」→「オプション（その他）」→「プロフィールカード」に移動して、プロフィールカードの編集画面を開きます。下の項目に「影をつける（プロフィールカード）」の項目にチェックを付けるだけでOKです。

せなお

簡単に影をつけることができましたね！

AFFINGER5（アフィンガー5）のプロフィールカードを設置

プロフィールカードの作成は完了ので、最後は設置作業を行います。設置場所としては、読者の方の目に止まりやすいサイドバーやスマホスライドメニューがおすすめです。

WordPress管理画面の「外観」→「ウィジェット」から設定を行います。ウィジェットページの構成としては画面左側が設置する「ウィジェット」と画面右側が「設置する場所」がそれぞれ一覧になっています。

ウィジェットが書かれた枠を設置したい場所にドラッグすることで設定可能です。。プロフィールカードは「11_STINGERサイト管理者紹介」というウィジェットですにで、お好みの場所にドラッグして設置しましょう。

これでプロフィールカードの設置は完了です。サイトを確認して、しっかりプロフィールカードが反映されているか確認してみましょう！

プロフィールカードの設置が反映されないときの対処法

「プロフィールカードを設置したのに表示されない」なという問題がおこった場合の対処法も紹介しておきます。プロフィールカードの設置が反映されていない場合、以下の原因が考えられます。

確認ポイント

- 設定を保存し忘れている：設定が保存されているか確認してみる
- キャッシュが有効になっている：ブラウザで「ハード再読み込み」をしてみる

プラグイン設定などがブラウザのキャッシュが有効になっている場合、通常の再読み込みでは結果が反映されませので、Chromeを使用している方は「Shift」+「command」+「R」でハード再読み込みをすれば新しい画面が表示されるはずです。

また、WordPressの管理画面からログインのし直しを試してみるのもいいかと思います。

まとめ

今回は、「AFFINGER」のプロフィールカードの作り方や設置方法についての解説しでした。プロフィールカードを作成することで、読者の方に親近感が覚えていただき、滞在時間が長くなる可能性が高くなります。

「AFFINGER」なら簡単操作でプロフィールカードを作成できるので、ぜひ試してみましょう！

参考トップページのカスタマイズに関する記事かこちら

参考アップデートやインストール・プラグインに関する記事はこちら

参考投稿記事のカスタマイズも関する記事はこちら

参考Gogleアドセンス×AFFINGERのカスタマイズについての記事はこちら