私が何者かを語らぬままブログを始めて２カ月。やっとサイドバーにプロフィールを実装しました。ウィジェットでの実装であることは感づいていましたが、HTML5をマスター出来ていない私にとって、まだまだ容易なものでは無いと思っていました。例のごとく、拝見＆活用させて頂いたブログの投稿とともに、実装した方法を紹介致します。

サイドバーにプロフィールと画像を表示する方法

まずは今回出来上がったプロフィール画像です。

私なりに良く出来たもんだと思っています。このプロフィールは下記作り方で作りました。

1. 画像を用意する
2. ブログを参考にプロフィールを実装する
3. プロフィールのレイアウトを変更する
4. 元々サイドバーに貼っていたgoogle+のリンクをつなげる

1はプロフィール画像にしたい任意の画像を選定してください。いろいろなブログを拝見していますと、自身の写真であったり、似顔絵メーカーなどで自分の絵を作成したものであったりと、多種に富んでいますね。私は今回、愛犬カイの写真を使いました。見てるだけで癒される良いプロフィール画像となりました。

2は下記で紹介するブログに記載のコードをサイドバーウィジェットに記載すると、もうプロフィールとしては出来上がりです。

３．出来上がったプロフィールは、角丸に小さく表示加工された画像が左側、プロフィール文は右側に表示されます。私としてはもう少し画像は大きめ、プロフィール文は画像の下に配置したかったので、コードを書き換えました。少ないコード数なので、コードを書き換えては変化を見つつ、なんとか変更することができました。

4.あとは以前ウィジェットで実装していたgoogle+のリンクを、今回のプロフィールウィジェットに追加して一つのウィジェットとしました。

”プロフィール作成中”は、いずれ作成する予定のプロフィール詳細を記した固定ページのため、参考コードの記載を変更して残しています。（リンクはお問い合わせページへ）

これでサイドバーのプロフィールは完成です。３は自分の趣味に合わせたカスタマイズしたので、少し時間はかかりましたが、初心者である私にも簡単に実装出来ました。

拝見＆活用させて頂いたブログ

今回拝見＆活用させて頂いたブログは　DICE（ダイス）　さんの　うぇぶあしび　です。DICE（ダイス）　さんありがとうございました。