イグアナガール

人ってそんなに簡単に、「シンプルゐズベスト」って言えちゃうものなの?

はてなブログのしかくい読者アイコンを、まあるくおさめまっせ☆

そうそう、待ってたんだよ!こーゆーの!!!!!

 はてなブログのこのブログについてのページ(ブログURLに about を付け加えたページだよ☆)には、ブログの読者の皆さんのアイコンが表示さてるんですが、アイコンサイズすっごく小さいんですよね。はてなではおなじみのサイズなのでなかなか言えなかったんですが、やっぱり小さいよ!ずっとそう思ってたよ!
 こかげんさん(id:hinatakokage)、本当にありがとうございます…!!


 で、とくにビビっときたのが本多さん(id:hvh)のこの記事です。

 ふむふむ……正方形のアイコンのサイズを変更するだけじゃなくて、角を丸く表示することが出来るんですね……知らなかったので、勉強になりました!ありがとうございます ><

 このブログを読むと、角を丸くする度合いを自分で調節できるとのことだったので、ん…?それって角を丸くし続ければ円になる?

 そこで、はてなブログのデザイン設定で、デザインCSSにこんな風に書いてみたメモメモ。

自分の『ユーザー名』のアイコンと読者のアイコンを同じサイズの円にする場合

.page-about .entry-content img.profile-icon {
width: 48px;
height: 48px;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
}

  • 赤文字をお好みの数字に変えれば、円のサイズを変更することができます。

自分の『ユーザー名』のアイコンと読者のアイコンを異なるサイズの円にする場合

 上記の様式で自分の『ユーザー名』のアイコンの大きさを指定した後(サイズを初期設定から変更しない場合は上記の様式は記入しなくてOK!)、その下に改めて下記の様式を書くことで、読者のアイコンのみをサイズの異なる円で表示することができます。

.page-about .entry-content .info img.profile-icon{
height: 32px;
width: 32px;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
}

  • 上の様式と下の様式で赤字部分に異なる数字を入れることで、『ユーザー名』と『読者』のアイコンのサイズを違うものに変更できます。

出来上がりはこんな感じ

 『ユーザー名』のアイコンサイズを48px、『読者』のアイコンサイズを32pxにすると、こんな感じになりました。


f:id:Temaribana:20141028171313p:plain


 アイコンをまあるくすると、ちょっとトレンド感(笑)ありますね。他にも方法はあるかもですし、他でも書かれている方がいらっしゃるかもしれませんが、個人用メモということでご容赦を…!!