WordPress関係

[AFFINGER] 2022年版 プロフィールカードへのアバター画像、ヘッダー画像、ボーダー色の設定を画像付きで解説

何度もプロフィールカードへの画像(アバター画像)挿入を行っているのですが、やる度に忘れてしまいます。

ですので、今回やり方を覚えることも兼ねて画像付きで解説しようと思います。WordPressのテーマとしてはAFFINGER6を使用しています。

そもそもプロフィールカードとは

以下の画像のように本ブログの右上に表示されているものがプロフィールカードです。

ブログを開設するにあたって、WordPressのテーマにAffingerを使用しているサイトを数多く見て、参考にさせて頂きましたが、全ての方がこのプロフィールカードを使用していました。

プロフィールの設定(確認)

本記事はプロフィールカードへの画像挿入が目的ですが、そもそものプロフィール入力に関しても解説しておきます。

既にプロフィールを書いている方はこの工程は飛ばしてください。

以下の画像のように「ダッシュボード」から「プロフィール」を選択。

その後、少し下にスクロールすると「ニックネーム(必須)」入力欄があるので、お好きなニックネームを入力して下さい。

その後、さらに下にスクロールし、「プロフィール情報」にもお好きな文言を入力して下さい。

なお、今回の目的の画像挿入方法は下画像の青線で囲っているところは使いませんので、今回は無視してください。

以上入力が終了したら、今回のプロフィール入力に関しては終了です。

以下の赤枠で囲った「プロフィールを更新」を押して上書きを忘れずにしてください。

プロフィール画像(アバター画像)の挿入

以下の画像のようにダッシュボードから「外観」→「カスタマイズ」を選択します。

その後、カスタマイズ画面が開いたら、「オプション(その他)」→「プロフィールカード」を選択します。

以下の画像のようにデフォルトの状態ではアバター画像に何も挿入されていないので、トップページ等のプロフィールカードには「ニックネーム」及び「プロフィール情報」のみ反映されているかと思います。

そこで、アバター画像にお好きな画像を挿入してみてください。

すると、以下のようにプロフィールカード(画像右側)に挿入した画像が表示されます。

以上で、プロフィールカードへの画像の挿入は終了になります。

もう少し装飾してみる

以下の画像のようにこのカスタマイズ画面から、プロフィールカードの「ヘッダー画像」、「アバター画像に影をつける」をチェック、ボーダー色(プロフィールカードの枠線)を行った後の様子が以下になります。

「アバター画像に影をつける」が少し画像だと分かりにくいですが、アバター画像が少し浮き出る様に表現されています。

また、ボーダー色にお好きなカラーを設定すると、そのカラーでプロフィールカードに枠線ができます。

以上になります。少し長くなりましたが参考にして頂けたら幸いです。