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

この記事では、ブログのサイドバーに画像つきのプロフィールを設置する方法を解説します。

面白い記事やためになる記事が書いてあるブログを見つけると「いったいどんな人が書いているんだろう」と気になりませんか？

自分の探している疑問を解決してくれたり面白い記事を見つけると、ブログの中の人が気になることはよくあります。
プロファイルを読んで共通点を見つけたりするとファンになって、定期的に購読してくれるようになるかもしれません。

そこでプロファイルを設置していないと、せっかく興味を持ってくれたのにもかかわらず離脱されてしまいます。

サイドバーに画像と紹介文を設置して親近感を持ってもらえるよう、プロファイルを設置する方法を紹介します。

サイドバーのプロフィールに入れる項目

サイドバーに設置するプロフィールに入れたい項目は、次の3つです。

サイドバープロフィールに入れたい項目

画像

紹介文

SNSなどのリンク

画像

アイコンとなる画像を載のせることで、読者が「このブログを作っている人」を意識しやすくなり、どんな人が書いているのかと興味を持たれやすくなります。ブログ自体の個性（ブランディング）にも繋がります。

アフィリエイトなどの商用サイトの場合、顔写真を使うと胡散臭うさんくささが緩和かんわされ信用を得やすくなります。

自分の顔を公開したくない場合は、もちろん似顔絵やフリーのイラストなどでも構いません。

taks

最近では似顔絵イラストや動物をモチーフにした画像なんかも人気ですね。

ブログの中の人をイメージしやすくすると、共感してくれるファンが増えます。

雑誌や漫画でも、「この人が書いたコラムなら読みたい」とか「この作者の漫画は絶対に読む」など、ブログの内容だけでなく個人のファンも獲得できるようになります。

似顔絵ジェネレーター : 似顔絵メーカー

紹介文

サイドバープロフィールに載せる紹介文は、簡潔に要点だけを書いておく程度で十分です。サイドバーに長々書いても読まれません。

入れるべき項目しては、以下の通り。

年齢・・・正確な年齢でなくアラサーや20代前半など、ざっくりでOK。
職業・・・サラリーマンや学生、フリーランサーなど普段何をしている人かを書く。
目的・・・このブログは何について書いているのか、何をしたいのかを書く。

同年代の人が書いたブログは、興味を持たれやすいです。年の離れた人・年齢不詳な人より自分と近い年代の人が書く記事のほうが、読者も自分に置き換えやすいため読まれやすくなります。

職業も同じ理由で共感を得やすくなります。自分と立場や境遇きょうぐうが近いと興味が湧わいてきます。ブログの内容にもよりますが、より細かく書けば書くほど興味を持たれます。

taks

投資や節約術の記事を探すとき、自分が中小企業の課長・夫婦で子供2人という立場なら、当然サラリーマンで家族構成の似ている人の節約術を参考にしたくなりますよね。

ブログの目的も入れておきましょう。このブログは何について書いているのか、何を伝えたいのか。最終的にそうなりたいのかの目標を入れておいても良いです。

「ガシェットの紹介をして使い方や良し悪しを伝えて、最終的にはレビュー依頼の仕事を受けたい」や「ロードバイクの乗り方や走行記録を紹介して、最終的には仲間を増やしサークルを作りたい」など、簡単に内容と目標を書いておくと信用度が上がります。

SNSなどのリンク

TwitterやInstagramなど自分が利用しているSNSのリンクを載せておくと、興味を持ってくれた読者にブログの更新情報などを届けることができます。

SNSで情報を発信していると、検索だけでなくSNSからブログを見に来てくれることもあるので、ぜひ登録して載せておきましょう。

最近は、ブログだけではなくSNSやYoutubeなどを併用へいようして、アクセスアップを狙うのが主流です。度重なるGoogleのアップデートなどでSEOを使った検索対策だけでは、発見されにくくなってきています。

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

STEP.1

画像をアップロード

用意した画像をアップロードします。

画像サイズは、サイドバーへの設置ですので 300px☓300px 程度で十分です。実際の表示ではhtmlやcssでサイズ変更できます。

Wardpressのメニューからメディア新規追加でアップロードしてください。

STEP.2

ウィジェットを設置

サイドバーに新しくウィジェットを設置します。

外観ウィジェットを開きます。

「カスタムHTML」をクリックして「サイドバーウィジェット」を選択しウィジェットと追加を押して設置します。

STEP.3

ウィジェットにHTMLコードを入力

設置したウィジェットにプロファイルのコードを入力します。

基本的には、アップロードした画像を中央揃えで配置し、その下に紹介文を書くだけです。

こちらのコードで画像を挿入します。

<center><img alt="プロフィール"  src="ここに画像URLを挿入" align="center" width="150" height="150"></center>

src=”” の部分にアップロードした画像のURLを入力してください。

画像挿入コードの下に、紹介文を書き込めば完了です。

ブログに合わせて好みのデザインにしたい場合は、各種セレクタを使ってCSSで記述することもできます。

taks

私のサイトでは、div要素などを使って各項目を区切って、それぞれに装飾しています。

<div id="sb-profile">
        <div>
            <center><img alt="プロフィール"  style="border-radius:50%;" src="ここに画像URLを挿入" width="180" height="180"></center>
            <p class="prof-name"><ruby>taks<rt>たくす</rt></ruby></p>
        </div>
        <div>
            <p class="prof-content">福岡在住のアラフィフサラリーマンです。好奇心旺盛でいろいろな趣味に手を出してしまいます。</p>
            <p class="prof-content">一人でも楽しめる趣味の情報を中心に、使っているガジェットの紹介やブログ運営の情報など、多岐にわたって紹介していく雑記ブログです。</p>
        </div>
    </div>

CSSはこちら

/*******************
プロフィールサイドバー
********************/
#sb-profile {
    margin: 1px;
    padding: 5px 10px;
    border:1px solid #ddd;
    border-radius: 5px;
}

.prof-name {
    padding: 0 10px;
    font-size: 1.3em;
    font-weight: 700;
    text-align: center;
}

.prof-content {
    font-size: 0.95em;
}

WordPressメニューの外観テーマの編集スタイルシート（style.css）へ記述します。

外枠に選を表示したり、文字の大きさを調整したりしています。

STEP.4

SNSボタンの設置

プロファイル画像と紹介文でせっかく興味を持ってもらえたのならば、更新情報などを発信するSNSに登録してもらうため登録ボタンを設置しましょう。

ここではTwitterの公式サイトでフォローボタンを作成する手順を紹介します。

Twitterパブリッシュ

フォローボタンは簡単に作成できます。手順は以下の通り。

「Twitter Buttons」をクリック
「Follow Button」をクリック
TwitterIDを入力して「Preview」ボタンをクリック
「Copy Code」ボタンを押して生成されたコードをコピー

作成されるフォローボタンはこちら

Follow @Weblog_taks

Twitter公式サイトで作成する様子を動画にしました。

コピーしたコードをウィジェットの最後に貼り付けて、忘れずに保存したら完了です。

以上でサイドバーにプロファイルを設置することができました。

完成したプロファイルは、この様になります。

まとめ

ブログをどんな人が書いているかわかると記事自体の信憑性しんぴょうせいも上がります。逆に何も情報がないと胡散臭さが出てしまいます。

プロフィールは、言ってしまえば個人情報の開示かいじですから抵抗があるのもわかりますが、親しみを覚えたり信用を得るには、相手がどんな人なのかを知る必要があります。

性別も年齢も顔も知らない全くの他人より、性別や世代・どんな仕事をしているのか知っている人のほうが信用できますよね。

はじめましての自己紹介から少し親しくなれる程度の情報を書いておくと、親近感を得やすく記事の信頼性も上がります。