AFFINGER5

【AFFINGER5】サイドバーにプロフィールカードを設置する方法

AFFINGER5でプロフィールを設置

スポンサーリンク

webサイトのサイドバーでよく見かけるプロフィールカード(自己紹介)ですが、多くのブロガーが設置しているのには理由があります。
それは自己紹介によっておおよその人物像が分かることで訪れたユーザーに親近感や安心感を与えることができるからです。

顔出しをするかは自由ですが、プロフィールカードはサイト上に設置しておいた方が良い機能の一つと言われています。

今回は私が使用しているAFFINGER5のテーマでサイドバーにプロフィールカードを設置する方法を画像を使って詳しく解説していきます。

プロフィールカードの設置方法

プロフィールカードをサイドバーに設置する方法ですが手順はそう難しくなく、5分ほどで設置ができます。

  • プロフィールを編集
  • ウィジェットを追加でサイドバーにプロフィールを設置
  • プロフィールカードに変更
  • ヘッダー画像・アバター画像の設定

ここでは大きく4つのステップに分けて順を追って解説していきます。

1.プロフィールを編集

プロフィールを編集ではプロフィール欄に表示される自己紹介の文を編集していきます。
あまり長文になり過ぎないように注意し、簡潔に自分を表現できるようにした方が訪れるユーザーにも分かりやすいです。

まずはWordPressのメニューにあるユーザーからプロフィールを選択します。

ここでは表示させたいニックネームを入力します。

また、「連絡先情報」ではtwitterやfacebookなどのURLを入力することで各SNSのアイコンを表示させることも可能です。

下にスクロールし、プロフィール情報の欄に自己紹介を入力します。プロフィール写真はこの時点では編集不要なので入力を終えたら「プロフィールを更新」をクリックします。

2.ウィジェットを追加でサイドバーにプロフィールを設置

プロフィールの編集を終えたら次はサイドバーにウィジェットを追加し、プロフィールを設置していきますがウィジェットが分からない方の為にウィジェットについて少し説明をします。

WordPressを使用していてよく耳にするこの「ウィジェット」ですが、主にサイドバーを簡単に編集できる機能で、ウィジェットを使うことで検索窓を設置したり、カテゴリーを表示したりすることができるとても便利な機能です。

ここではAFFINGER5を使用しているので「STINGERサイト管理者紹介」というウィジェットを追加し、プロフィールを設置していきます。

プロフィールの入力を終えたらWordPressのメニュー上にある外観からカスタマイズを選択します。

カスタマイズから「ウィジェット」を選択します。

ウィジェットを選択したら次に「サイドバートップ」を選択します。

サイドバートップでは「ウィジェットの追加」をクリックします。

「STINGERサイト管理者紹介」をクリックし、ウィジェットに追加します。

3.プロフィールカードに変更

ここでは先ほど追加した「STINGERサイト管理者紹介」のウィジェットを編集し、表示されたプロフィールをプロフィールカード形式に変更していきます。

まずはWordPressのメニュー上にある外観からカスタマイズを選択します。

カスタマイズの中にある「オプションカラー」を選択します。

オプションカラー内にある「サイト管理者紹介(プロフィールカード)」を選択します。

上の画像の黄枠で囲んだ「プロフィールカードに変更」にチェックを入れます。

4.ヘッダー画像・アバター画像の設定

プロフィールカードの変更を終えたら最後にヘッダー画像とアバター画像の設定です。

ヘッダー画像には好きな画像を設定します。アバター画像は自分の顔写真などを設定することができますが、自分の顔を公開するとことに抵抗がある人も多いと思います。そういった方は下の画像のようなアニメ風のアイコンキャラや似顔絵のアイコンを使用するのがオススメです。

私のようなイラストの技術がない人がこういったアイコンを自作するのはとても大変なのでイラストが得意な誰かに作成を依頼するのが確実です。

これはココナラというサービスで、個人のスキルを気軽に売り買いできる日本最大級のスキルマーケットです。アイコン作成だけに限らずweb作成やお悩み相談など様々なジャンルのスキルが取引されているので覗いてみるだけでもおもしろいです。
私も別のサイトではよく利用しているサービスで、今なら新規会員登録するだけで300円割引クーポンが手に入るのでまだ会員でない方は手続きも簡単なので是非使ってみてください。

ココナラ公式サイトはこちら

まとめ

今回はAFFINGER5のテーマを使用してサイドバーにプロフィールカードを設置する方法を解説しました。

プロフィールカードはサイトの入り口と言っても過言ではないのでユーザーの目に止まるようにしっかりしたものを作りたいですね。

スポンサーリンク

-AFFINGER5
-

© 2022 ふっくんブログ