【CSS】プロフィール画像を円形に切り抜き、たくない

はてなブログを始めて3日目。

とりあえず手始めにテーマストアから良さげなテーマを拾ってきたんですが、

platismさんのデザインがどれもシンプルかつオシャレで良いですねー。

気に入りました。

というわけで、当ブログではそんなオシャレなテーマ集の中から、こちらを使わせていただいております。

やっぱり時代はシングルカラム（知らんけど）。

読者を増やしたいとかプロフィールを見て欲しいのであれば2カラム以上が良いのでしょうが、

純粋に記事の読みやすさから言えばシングルカラムがベストだと思います。はい。

ただ、利用にあたって1点困ったことがありまして、

それは自分のプロフィール画像が円形にトリミングされてしまうこと。

普通のプロフィール画像なら円形にすることでオシャレ感が出るのですが、

僕のはストライプ背景に漢字が書いてあるだけという、もはや画像なのかすら危うい画像なので、

完全な円形よりは角がちょっと丸くなってる、くらいがちょうど良いんですよね。

あとはこのテーマと同様にフッタ位置にサイドバーを表示しているようなデザインで、

かつプロフィールの隣にTwitterウィジェットを置くような場合もアイコンは丸くない方が良いかと。

まぁそんなわけで、丸くなっちゃってる画像を四角くするためにCSSを追記しました。

.hatena-module-profile img.profile-icon {
    border-radius: 12%;
}

本家で指定されているのよりも優先度が高くなるようにピンポイントで範囲を指定して、

border-radiusを上書きする。

割と力技ではありますが、まぁ良いかと。

いずれにせよ見やすい、かつちょっとした遊び心があってこのデザインは気に入っております。

FC2から移行してよかった。