ワードプレスのサイドバーにプロフィールを簡単に入れる方法【stinger5】

今回は、ワードプレスのサイドバーにプロフィールを入れる方法についてまとめます。

個人メディアを作るのであれば、どんな人が発信しているのかはイメージしてもらいたいですからね。

ワードプレスなのでプラグインを使うという選択肢もあるのですが、今回はhtmlの手打ちで簡単に設定する手順です。

プラグインが多くなるとブログ動作も重くなったりするので、これくらいのhtmlは手で打ってしまいましょう！^^

1.まずはアイコンやイラストを探す

プロフィールと一緒に、自分をイメージしてもらいやすいアイコンやイラストを入れると効果的です。

ガンガンに情報発信をする場合は、自分の顔写真や似顔絵を使うと信頼度も上がって良いですね。
私は副業サラリーマンなので顔出しは出来ませんが…。

アイコンやイラストは無料でもたくさんの種類があります。
「無料　アイコン」とか「無料　イラスト」とか調べると、ほんとに、無限に出てきますよ。(汗)

ちなみに私のイメージイラストも、さくっと無料で探して来ました。
「会社終わってからコツコツやってますよー」のイメージです。(可愛いのはご愛嬌で。。)

2.サイドバー用プロフィールのデザインを検討する

次に、どのようなプロフィールにするかデザインを検討します。

そんなにパターンがあるわけではないので、ここはもうモデリングで良いでしょう。

お気に入りのブロガーさんとか、何人かのプロフィールを眺めて、いいなーと思うものを探して下さい。

3.サイドバーにプロフィールを追加する

それではいよいよワードプレスに追加します。

編集の前に。
1.で入手した画像はライブラリに追加しておくことを忘れずに。

さて、一般的には、外観＞ウィジェットでテキストボックスを配置して、そこを編集するのが簡単です。

ただ、私が利用させてもらっているstinger5では、サイドバーの最上段はNEW POSTだったりが表示されるようになっているので、ウィジェットの追加だとその下にしか入りません。

なので、外観＞テーマの編集＞sidebar.phpを選択し、ここを直接編集します。

具体的には、1行目の< aside>の次の行から、以下のhtmlを追加します。

[html]
<!– プロフィール –>
<div id="profilebox">
<h4 class="menu_underh2">プロフィール</h4>
<a href="★プロフ固定ページURL"><img src="画像URL" width="125"></a>
<p><b>★ここに名前</b></p>
<p><font size="3">
★ここにプロフィール詳細<br>
<a href="★プロフ固定ページURL">→詳しいプロフィールはこちら</a>
</p>
<div class="clear"></div>
[/html]

これだけですね。

細かい微調整はありますが、これで大体の形になります。

画像をもっと小さくして画像を囲むように文字が表示されるのも好きな方が多いですね。
その場合は、imageタグにalign属性を指定すれば良いです。

画像を大きくしてみたり、画像を小さくして文字を大きくしたり。
しっくりくるデザインを探してみて下さい！^^