アフィンガーでプロフィールカードを作る｜サイドバーを整えよう

サイトの右側のサイドバーにある自己紹介の欄。

こちらをプロフィールカードといいますが、アフィンガーでは、プラグインなしにおしゃれで見やすいプロフィールカードを作ることができます。

今回はアフィンガーの機能をつかったプロフィールカードの作り方をご紹介していきます。

プロフィールカードの自己紹介文の装飾方法も、徹底紹介しています。ぜひご参考ください。

アフィンガーでプロフィールカードを作る　概要

手順は以下の通りです。

①プロフィール画像・ヘッダー画像の設定

WordPressダッシュボードの「外観」＞「カスタマイズ」＞「オプション(その他)」＞「プロフィールカード」にて操作します。

ヘッダー画像（プロフィールカード）と、アバター画像（プロフィールカード）に、お好きな画像を設定することで、以下のようなプロフィールカードが出来上がります。

綺麗に表示させるために、アバター画像はサイズ大きめな正方形の画像、ヘッダー画像は横長の画像を設定してください。

ちなみに、「旧プロフィールカードに変更」にチェックを入れると、以下のようなシンプルなデザインのプロフィールカードになります。

 プロフィールカードに装飾をつける

 お好みで設定で、カラー変更をしたり、プロフィールカードに影をつけたりすることができます。

色々いじってみて、変更をしてみてください。

設定が完了したら「公開」ボタンを押して設定を保存しましょう。

②プロフィールカードの詳細ボタン

自己紹介ページがある場合は、プロフィールカード下部ボタンを設置することで、読者に自身のことを分かってもらいやすくなります。

以下画像の赤い囲みの部分です。

先程の「プロフィールカード」設定の下の方に、詳細ボタンの設定スペースがありますので、そちらより操作していきます。

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

次にプロフィールカードのSNSボタンを設定していきます。以下画像の赤い囲みの部分です。

操作する場所は、ダッシュボードのの「ユーザー」＞「あなたのプロフィール」からです。

「連絡先情報」の項目から各SNSのURLを入力していきます。

こちらに入力したメディアだけプロフィールカードに表示されます。

アカウントがない場合や、表示させたくない場合は無記入にしておきましょう。

記入しましたら、ページ上部右側にある「プロフィールを更新」をクリックして保存します。

④自己紹介文の設定

次にユーザー名と自己紹介文の設定をしていきましょう。

先程と同じくダッシュボードの「ユーザー」＞「あなたのプロフィール」にて作成していきます。

「名前」の項目にある「ニックネーム (必須)」より、メインの名前を設定します。

続いて、「あなたについて」の項目にある「プロフィール情報」に、自己紹介の文章を入力します。文章入力にて改行はプロフィールカードに反映されませんので、ご留意ください。

プロフィールカード自己紹介文の改行方法

通常の改行キーでは、プロフィールカードの自己紹介文は改行させませんので、一工夫必要です。

まずは、ダッシュボードの「AFFINGER管理」＞「投稿・固定記事」＞「この記事を書いた人」をクリックしてください。

「プロフィール情報にhtmlタグを許可する」にチェックマークを入れてください。

この設定を行うことで、プロフィール内の文章を記事装飾することができるようになります。

チェックを入れた後は、下へスクロールをして「save」をお忘れなくクリックしましょう。

次に、「ユーザー」＞「プロフィール」へ戻って、「プロフィール情報」に必要なコードを改行したい箇所に入力していきます。

<br>

<br>を挿入した箇所で改行がされます。

最後は「プロフィールを更新」をクリックするのをお忘れなく。

これで任意の場所に改行が反映されます。

プロフィールカード自己紹介文を太字にする

より目立つプロフカードにするために、自己紹介文を太字にするというのもありです。

先ほどの「AFFINGER管理」＞「投稿・固定記事」＞「この記事を書いた人」＞「プロフィール情報にhtmlタグを許可する」にチェックマークが入った状態であることが条件です。

以下のコードをご使用ください。

<b>太くしたい文字</b>

<b>文字</b>というように、 タグで囲んだ部分の文字が太字になります。 

プロフィールカード自己紹介文を左寄せにする

デフォルトですと、自己紹介文は中央揃えですが、これを左寄せにしたい場合は、以下のコードを使用してください。

<p style="text-align:left">テキストを左寄せ</p>

プロフィールカード自己紹介文を簡単にHTML編集する

ここまでHTMLコードをお伝えしてきましたが、例えば文字をカラフルにするなど、奇抜な自己紹介文にする際に、便利な方法をご紹介していきます。

新規で記事作成を開き、クラシックエディターで文章作成してください。

作成しましたら、「HTMLとして編集」に切り替えて、その内容をコピーしてください。

あとは「プロフィール情報」へペーストするだけです。

プロフィールカードを設置する

以上の操作でプロフィールカードの作成は完了したので、パソコンやスマートフォンに表示させるように、サイドバーに設置していきます。

プロフィールカードの設置は、ダッシュボードの「外観」＞「ウィジェット」ページから行います。

プロフィールカードは、「STINGERサイト管理者紹介」というウィジェットです。

こちらを「サイドバーウィジェット」にドラッグ＆ドロップで置いてください。

ウィジェットを開きタイトルを「プロフィール」など任意の文字にして、右下の「保存」をクリックしてください。

これでプロフィールカードの設置は完了です。

サイトで反映されているか、確認してみましょう。

アフィンガーでプロフィールカードを作る　まとめ

プロフィールカードは、読者にどんな人が書いているのかを知ってもらう重要な場所です。

ぜひとも素敵に仕上げてください！

プロフィールカードの画像は写真でなく、アイコンでも良いですね。ココナラなどで発注するのも、オリジナリティあるプロフィールカードへの一歩になりますね。

アフィンガーでサイドバーを整える

サイドバーは、ブログの顔といっても過言ではない重要なスペースです。サイドバーを整頓することで、見た目の良さだけでなく、利便性も変わってきます。

現在管理人は、ユーザビリティ向上を第一に、以下の項目をサイドバーに置いています。

• 検索ウィジェット
• おすすめ記事
• プロフィール
• カテゴリー
• タグ
• 目次
• 最新記事

読者目線を意識しながら、ご自身の好みのサイドバーを作って、オリジナル感を出していきましょう。

アフィンガーを使ってのブログの作り方については、こちらの記事をご参照ください。