プロフィールをシュッとしてみた

以前から気になっていたサイドバーの「プロフィール」の縦長問題を対処したお話しです。

これ↓の事です。

シルエット画像の右が空いているのに「読者になる」ボタンや「ID」の表記がシルエット画像の下に表示されてしまっています。

その為に無駄に縦長になってしまっている感じです。気に入りません。

これが縦長問題です。

やっと今回、それを改善して縦長を短くシュッとしたので参考に記録しておきます。

（つまり、はてなブログの開設者向けの記事となっております）

先のプロフィールの画像を見ていただくと分かりますように、既にこの時点でサイドバーのプロフィールの部分はいじくっています。

プロフィールモジュールを使わずにHTMLモジュールを使って、それにHTMLを書いてシルエット画像やIDなどを表示しています。

なら最初からその時にどないかしとけよ、と今の私も思うのですが、時間が無かったりしたのでしょう。理由はもう覚えておりません。

ここのところアクセス数が下がっておりましたので、いい機会だと思って、スタイルシートの書き方を調べて、トライ＆エラーでごそごそと修正しました。

キモは、シルエット画像の<a>タグに「float:left」を書く事でした。

具体的には、シルエット画像のHTMLは以下のようにしました。

<a href="【自分のブログのURL】/about" class="profile-icon-link" style="float:left; margin-right: 1em;">
<img src="【自分のプロフィール画像のURL】" alt="【自分のID】" class="profile-icon" style="vertical-align: top;">
</a>

このHTMLの後に、自分のIDや「読者になる」ボタンなどのHTMLを書くと、それらが画像の右側に回り込んで表示されます。

そうしてシュッと表示されたプロフィールがこちら。

たったこれだけの事ならやっぱり、最初からどないかしとけよ！っていう話しですね。

ついでにもう少しごそごそいじって、最終的にはこちらのようになりました。

「プロフィール」という文言の上に空きスペースがあったので、そこに検索窓を持ってゆきました。

画像の横にも少し空きがあったので日本ブログランキングのリンクを貼りました。

しばらくはこのプロフィール表示でいこうと思います。

現場からは以上になります。

---

【関連記事】