こんな悩みを解決します。
記事の内容
- プロフィールカードとは
- プロフィールカードの作り方
- プロフィールカードのデザイン
プロフィール
よっしー（@yosshiblog）
この記事を書いている僕はブログ歴１年３か月の高卒ブロガーです。1つ目の超特化ブログで月間1万ＰＶを継続しています。
プロフィールカードは自分の画像さえ準備をすれば、すぐに設置することが出来ます。
当サイトのプロフィールカードは以下の通り。
当サイトのプロフィールカード
シンプルかつ経歴や実績が分かるように記載されていると思います。
読者は記事を見ている時にプロフィールカードを確認することが多く「どんな人が書いているんだろう」と興味を持ちます。
そこで短い文章で経歴や実績があると分かれば、記事の説得力も増すので必ず設置するべきなんですね。
今回は、記事の前半部分でプロフィールカードの設置方法を、記事の後半部分でプロフィールカードのデザインについて解説していきます。
まだAFFINGER6を導入していない方は、３ステップで分かりやすく解説をしているのでこちらの「最強テーマAFFINGER6のレビュー【一番おすすめの有料テーマ】」からご覧ください。
プロフィールカードとは：簡単な自己紹介
プロフィールカードとは、その人の簡単な経歴や実績を紹介する簡単なカードのことで、ブログを運営する上で必ず設置をした方がいいです。
というのも、冒頭でも解説した通り、読者どんな人が解説をしているんだろうと気になった時に簡単に確認することが出来るからです。
わざわざプロフィールに行く人は少ないですし、プロフィールに飛んでしまうとブログの滞在率が悪くなってしまうことがあります。
なので、プロフィールカードは必ず設置するわけです。
当サイトのプロフィールカードは、以下のように設置をします。
プロフィールカード
- アバター画像
- 経歴・実績
- SNSボタン
AFFINGER6は色々な機能やデザインがあるため、自分の好み通りのデザインにすることが可能です。
次のステップでプロフィールカードの作り方を解説していきます。
プロフィールカードの作り方４ステップ
プロフィールカードの作り方は、以下の通り。
- プロフィールカードをサイドバーへ
- アバター画像
- プロフィール情報
- SNSボタン
順に解説をします。
ステップ①：プロフィールカードをサイドバーへ
まずは、プロフィールカードをサイドバーに設置しましょう。
「外観」→「ウィジェット」をクリックして、左側の利用できるウィジェットから「11_STINGERプロフィールカード」を探してください。
11_STINGERプロフィールカード
見つけたらクリックをして、「サイドバートップ」を選択したら「ウィジェットを追加」をクリック。
これでプロフィールカードが追加されました。
サイドバー設置に関しては、こちらの【AFFINGER6】サイドバーの設定方法とオシャレなデザイン【１０分で完了】で詳しく解説をしているのでぜひ参考にしてください。
次のステップから、情報等を入力していきます。
ステップ②：アバター画像
アイコン
まずは、アバター画像を用意しましょう。
とはいっても、「似顔絵の画像は必要なの？」と思うかもしれません。
結論、自分のアイコンは必ず用意したほうがいいです。
理由は以下の通り。
- 信頼性が上がる
- ファンを作ることが出来る
- 読者に覚えてもらえる
- 他のブログと差別化できる
このようにメリットがたくさんあるため、自分のアイコンは無料ではなく出来れば専門の人に頼んで有料のアイコンを用意したほうがいいです。
自分のアイコンについては、今後記事にするのでお待ちください。
※自分のアイコンがない時は、無料の画像素材で代用しましょう。
自分のアイコンを用意することが出来たら、「外観」→「カスタマイズ」→「オプション（その他）」→「プロフィールカード」をクリック。
プロフィールカード挿入
下の「アバター画像（プロフィールカード）※150px以上の正方形の画像推奨」というほうに、用意した画像を挿入してください。
※150px以上の正方形の画像推奨ではないと画像が反映してくれなかったらり、顔がズレたりするので、トリミングとかして調整してください。
画像を挿入したら、すぐに反映されるので確認してみてください。
カスタマイズ画像確認
しっかりと反映されていますね。
次はプロフィール情報を入力していきます。
ステップ③：プロフィール情報
アカウント情報
プロフィール情報は、簡単な経歴と自己紹介を書いていきます。
「ユーザー」から自分のアカウントを選択して、設定画面を表示してください。
ユーザー
設定画面の下の方に「プロフィール情報」を入力する欄があるので、入力をしてください。
プロフィール情報
入力が完了したら、「プロフィールを更新」をクリック。
更新が完了したら、実際に反映されているか確認してみましょう。
反映確認
質問：何を書けばいいのか分からない
経歴や実績が無い方は、単純な自己紹介で大丈夫です。
内容は以下の通り。
- 出身
- 年齢
- 最終学歴
- 好きなこと
- どんな内容を発信しているか
例文を用意したので参考にしてください。
ブログが大好きな東京生まれの２２歳！
大学４年生の就活中にブログ運営を開始して毎日更新をしています。
「就活活動」や「アルバイト」を中心に発信をしていきます。
ステップ④：SNSボタン
最後にSNSボタンを設置していきます。
SNSボタンの設置はとても簡単で、いま運営しているSNSのURLを先ほどのユーザー設定画面に入力するだけです。
まずは、自分のSNSのURLをコピーします。
TwitterのURLをコピー
先ほどと同じように、「ユーザー」から自分のアカウントを選択して設定画面が表示されたら、「Twitter」の欄に先ほどのURLをペーストしてください。
TwitterのURLをペースト
同じように「Instagram」と「お問い合わせ」のURLも入力していきましょう。
※Instagramが無い場合はTwitterとお問い合わせだけで十分です。
SNSボタン設定
お問い合わせのURLは「form（URL）」に入力してください。
入力が完了したら「プロフィールを更新」をクリック。
SNSボタンが反映されているか確認してみましょう。
SNSボタンの反映確認
しっかりと反映されていたので、プロフィールカードの基本的な設置に関しては完了です。
プロフィールカードのカスタマイズ
プロフィールカードのカスタマイズについては、以下の通り。
- SNSボタンの色を変える
- プロフィール情報を改行させる
- テキストリンクを表示する
順に解説をします。
カスタマイズ①：SNSボタンの色を変える
SNSボタン
SNSのボタンの色はお好みの色に変えることが出来ます。
「外観」→「カスタマイズ」→「オプション（その他）」→「SNSボタン」を選択して、色を変えてみてください。
SNSボタンの色を変える
当サイトのように黒色のデザインにするなら「ボタン背景色」を黒にしてください。
またこちらの「カラーコード一覧表」を参考にするとデザインを決まりやすいです。
沢山の色とカラーコードが記載されているので、自分の好みの色が見つけやすいです。
カスタマイズ②：プロフィール情報を改行させる
改行
プロフィール情報は、普通に入力するだけでは改行することが出来ません。
上記のようにそのまま入力してしまうと途切れたり、自分の思うような配置にならないので設定する必要があります。
「AFFINGER管理」→「投稿・固定記事」からこの記事を書いた人という所に「プロフィール情報にhtmlタグを許可する」という欄があるのでチェックをして「save」をクリック。
htmlコードを許可する
これで改行が可能になったので、プロフィール情報入力に戻りましょう。
改行させてい部分に「<br>」というコードを入力してください。
改行させてい部分にコードを入力
入力が完了したら、「プロフィールを更新」をクリック。
改行の反映確認
しっかりと反映されていますね。
これで改行の設定は完了です。
カスタマイズ③：テキストリンクを表示する
テキストリンク
テキストリンクも表示させることが出来ます。
こちらも先ほどと同じように、「AFFINGER管理」→「投稿・固定記事」からこの記事を書いた人という所に「プロフィール情報にhtmlタグを許可する」という欄があるのでチェックをして「save」をクリック。
以下のコードをプロフィール情報に入力していってください。
<a href="リンク先のURL">アンカーテキスト</a>
- リンク先のURL・・・ジャンプさせたいURL
- アンカーテキスト・・・テキストの名前
以下のように入力していきます。
テキストリンク
「プロフィールを更新」をクリックして、反映されているかの確認をしましょう。
※当サイトでは表示していません
これでプロフィールカードのカスタマイズ設定が完了です。
まとめ：おしゃれなプロフィールカードに
今回は、「AFFNGER６でのプロフィールカード設定方法」について解説をしました。
プロフィールカードは、運営の情報を他のリンクに飛ばずに確認できるところなのでシンプルかつ実績等が分かると読者にとっては安心します。
また、カスタマイズをすることで統一感が生まれるので、この記事を見ながら設置してみてください。
