当サイトではアフィリエイトプログラムを利用してサービスを紹介しています。

AFFINGER6

【AFFINGER6】超簡単なプロフィールカードの作り方解説

AFFINGER6
悩んでいる人
AFFINGER6でプロフィールカードを作っていきたいけど、機能の多さを活かせるおしゃれなデザインにしていきたい。

 

こんな悩みを解決します。

 

記事の内容

  • プロフィールカードとは
  • プロフィールカードの作り方
  • プロフィールカードのデザイン

 

プロフィール

プロフィール

よっしー(@yosshiblog

この記事を書いている僕はブログ歴1年3か月の高卒ブロガーです。1つ目の超特化ブログで月間1万PVを継続しています。

 

プロフィールカードは自分の画像さえ準備をすれば、すぐに設置することが出来ます。

当サイトのプロフィールカードは以下の通り。

 

当サイトのプロフィールカード

当サイトのプロフィールカード

 

シンプルかつ経歴や実績が分かるように記載されていると思います。

 

読者は記事を見ている時にプロフィールカードを確認することが多く「どんな人が書いているんだろう」と興味を持ちます。

そこで短い文章で経歴や実績があると分かれば、記事の説得力も増すので必ず設置するべきなんですね。

 

今回は、記事の前半部分でプロフィールカードの設置方法を、記事の後半部分でプロフィールカードのデザインについて解説していきます。

まだAFFINGER6を導入していない方は、3ステップで分かりやすく解説をしているのでこちらの「最強テーマAFFINGER6のレビュー【一番おすすめの有料テーマ】」からご覧ください。

超簡単に設置できるので、ぜひ最後までご覧ください!
yosshi

プロフィールカードとは:簡単な自己紹介

プロフィールカードとは:簡単な自己紹介

プロフィールカードとは、その人の簡単な経歴や実績を紹介する簡単なカードのことで、ブログを運営する上で必ず設置をした方がいいです。

というのも、冒頭でも解説した通り、読者どんな人が解説をしているんだろうと気になった時に簡単に確認することが出来るからです。

 

わざわざプロフィールに行く人は少ないですし、プロフィールに飛んでしまうとブログの滞在率が悪くなってしまうことがあります。

なので、プロフィールカードは必ず設置するわけです。

 

当サイトのプロフィールカードは、以下のように設置をします。

プロフィールカード

プロフィールカード

  1. アバター画像
  2. 経歴・実績
  3. SNSボタン

 

AFFINGER6は色々な機能やデザインがあるため、自分の好み通りのデザインにすることが可能です。

次のステップでプロフィールカードの作り方を解説していきます。

プロフィールカードの作り方4ステップ

プロフィールカードの作り方4ステップ

 

プロフィールカードの作り方は、以下の通り。

  1. プロフィールカードをサイドバーへ
  2. アバター画像
  3. プロフィール情報
  4. SNSボタン

順に解説をします。

ステップ①:プロフィールカードをサイドバーへ

 

まずは、プロフィールカードをサイドバーに設置しましょう。

「外観」→「ウィジェット」をクリックして、左側の利用できるウィジェットから「11_STINGERプロフィールカード」を探してください。

 

11_STINGERプロフィールカード

11_STINGERプロフィールカード

 

見つけたらクリックをして、「サイドバートップ」を選択したら「ウィジェットを追加」をクリック。

これでプロフィールカードが追加されました。

サイドバー設置に関しては、こちらの【AFFINGER6】サイドバーの設定方法とオシャレなデザイン【10分で完了】で詳しく解説をしているのでぜひ参考にしてください。

 

次のステップから、情報等を入力していきます。

ステップ②:アバター画像

アイコン

アイコン

まずは、アバター画像を用意しましょう。

とはいっても、「似顔絵の画像は必要なの?」と思うかもしれません。

 

結論、自分のアイコンは必ず用意したほうがいいです。

理由は以下の通り。

  • 信頼性が上がる
  • ファンを作ることが出来る
  • 読者に覚えてもらえる
  • 他のブログと差別化できる

このようにメリットがたくさんあるため、自分のアイコンは無料ではなく出来れば専門の人に頼んで有料のアイコンを用意したほうがいいです。

自分のアイコンについては、今後記事にするのでお待ちください。

 

※自分のアイコンがない時は、無料の画像素材で代用しましょう。

自分のアイコンを用意することが出来たら、「外観」→「カスタマイズ」→「オプション(その他)」→「プロフィールカード」をクリック。

プロフィールカード挿入

プロフィールカード挿入

 

下の「アバター画像(プロフィールカード)※150px以上の正方形の画像推奨」というほうに、用意した画像を挿入してください。

※150px以上の正方形の画像推奨ではないと画像が反映してくれなかったらり、顔がズレたりするので、トリミングとかして調整してください。

 

画像を挿入したら、すぐに反映されるので確認してみてください。

カスタマイズ画像確認

カスタマイズ画像確認

 

しっかりと反映されていますね。

次はプロフィール情報を入力していきます。

ステップ③:プロフィール情報

アカウント情報

アカウント情報

 

プロフィール情報は、簡単な経歴と自己紹介を書いていきます。

「ユーザー」から自分のアカウントを選択して、設定画面を表示してください。

 

プロフィール

ユーザー

 

設定画面の下の方に「プロフィール情報」を入力する欄があるので、入力をしてください。

 

プロフィール情報

プロフィール情報

 

入力が完了したら、「プロフィールを更新」をクリック。

更新が完了したら、実際に反映されているか確認してみましょう。

 

反映確認

反映確認

 

しっかりと反映されていて形になってきましたね
yosshi

質問:何を書けばいいのか分からない

経歴や実績が無い方は、単純な自己紹介で大丈夫です。

内容は以下の通り。

  1. 出身
  2. 年齢
  3. 最終学歴
  4. 好きなこと
  5. どんな内容を発信しているか

 

例文を用意したので参考にしてください。

ブログが大好きな東京生まれの22歳!

大学4年生の就活中にブログ運営を開始して毎日更新をしています。

「就活活動」や「アルバイト」を中心に発信をしていきます。

 

「改行が出来ないよ~」と言う方はこの後のカスタマイズ編で解説をします
yosshi

ステップ④:SNSボタン

 

最後にSNSボタンを設置していきます。

SNSボタンの設置はとても簡単で、いま運営しているSNSのURLを先ほどのユーザー設定画面に入力するだけです。

 

まずは、自分のSNSのURLをコピーします。

 

TwitterのURLをコピー

TwitterのURLをコピー

 

先ほどと同じように、「ユーザー」から自分のアカウントを選択して設定画面が表示されたら、「Twitter」の欄に先ほどのURLをペーストしてください。

 

TwitterのURLをペースト

TwitterのURLをペースト

 

同じように「Instagram」「お問い合わせ」のURLも入力していきましょう。

※Instagramが無い場合はTwitterとお問い合わせだけで十分です。

 

SNSボタン設定

SNSボタン設定

 

お問い合わせのURLは「form(URL)」に入力してください。

入力が完了したら「プロフィールを更新」をクリック。

SNSボタンが反映されているか確認してみましょう。

 

SNSボタンの反映確認

SNSボタンの反映確認

 

しっかりと反映されていたので、プロフィールカードの基本的な設置に関しては完了です。

次のステップでカスタマイズを紹介していくよ!
yosshi

プロフィールカードのカスタマイズ

プロフィールカードのカスタマイズ

 

プロフィールカードのカスタマイズについては、以下の通り。

  1. SNSボタンの色を変える
  2. プロフィール情報を改行させる
  3. テキストリンクを表示する

順に解説をします。

カスタマイズ①:SNSボタンの色を変える

SNSボタン

SNSボタン

 

SNSのボタンの色はお好みの色に変えることが出来ます。

「外観」→「カスタマイズ」→「オプション(その他)」→「SNSボタン」を選択して、色を変えてみてください。

 

SNSボタンの色を変える

SNSボタンの色を変える

 

当サイトのように黒色のデザインにするなら「ボタン背景色」を黒にしてください。

初心者ブロガー
このシンプルさもいいね

 

またこちらの「カラーコード一覧表」を参考にするとデザインを決まりやすいです。

沢山の色とカラーコードが記載されているので、自分の好みの色が見つけやすいです。

 

カスタマイズ②:プロフィール情報を改行させる

改行

改行

 

プロフィール情報は、普通に入力するだけでは改行することが出来ません。

上記のようにそのまま入力してしまうと途切れたり、自分の思うような配置にならないので設定する必要があります。

 

「AFFINGER管理」→「投稿・固定記事」からこの記事を書いた人という所に「プロフィール情報にhtmlタグを許可する」という欄があるのでチェックをして「save」をクリック。

 

htmlコードを許可する

htmlコードを許可する

 

これで改行が可能になったので、プロフィール情報入力に戻りましょう。

改行させてい部分に「<br>」というコードを入力してください。

 

改行させてい部分に<br>というコードを入力

改行させてい部分にコードを入力

 

入力が完了したら、「プロフィールを更新」をクリック。

 

改行の反映確認

改行の反映確認

 

しっかりと反映されていますね。

これで改行の設定は完了です。

カスタマイズ③:テキストリンクを表示する

テキストリンク

テキストリンク

 

テキストリンクも表示させることが出来ます。

こちらも先ほどと同じように、「AFFINGER管理」→「投稿・固定記事」からこの記事を書いた人という所に「プロフィール情報にhtmlタグを許可する」という欄があるのでチェックをして「save」をクリック。

 

以下のコードをプロフィール情報に入力していってください。

<a href="リンク先のURL">アンカーテキスト</a>

  • リンク先のURL・・・ジャンプさせたいURL
  • アンカーテキスト・・・テキストの名前

以下のように入力していきます。

 

テキストリンク

テキストリンク

 

「プロフィールを更新」をクリックして、反映されているかの確認をしましょう。

※当サイトでは表示していません

 

これでプロフィールカードのカスタマイズ設定が完了です。

お疲れさまでした
yosshi

まとめ:おしゃれなプロフィールカードに

まとめ:おしゃれなプロフィールカードに

今回は、「AFFNGER6でのプロフィールカード設定方法」について解説をしました。

プロフィールカードは、運営の情報を他のリンクに飛ばずに確認できるところなのでシンプルかつ実績等が分かると読者にとっては安心します。

 

また、カスタマイズをすることで統一感が生まれるので、この記事を見ながら設置してみてください。

関連記事【テンプレあり】ブログのプロフィールの書き方

  • この記事を書いた人

yosshi

ブラックなサイト運営を解説しています。
【経歴】高卒で大手企業に就職▶︎2サイト運営▶︎今のSEOで正攻法では戦えないと気づく▶︎中古ドメインとInstagram運用
インフルエンサーを信じるなっ
とにかく被リンク獲得せいっ
ブロガー界隈は闇が深いでっ

-AFFINGER6