読者アイコンの大きさを変えるCSS

ブログのデザインをカスタマイズする時は、変更前のＣＳＳのバックアップを取っておきましょう！ - 日なたと木陰

なんかプロフィールページとかいうのがあって、そこで読者一覧みたいなのを見れるらしい。

そもそも僕が自分で自分のプロフィールページを見ることがあるのかどうかはともかく、読者アイコンとフォントサイズは大きいほうが好きだというのはどちらかというと完全に賛成なので調べた。

img.profile-icon {
  width: 64px !important;
  height: 64px !important;
}

これで大きくなる。なお64pxを指定しているのは読者一覧用アイコンの元のサイズが64pxだったから。はてながユーザページのアイコンサイズを特別にサイズ指定しているので、img.profile-iconに一括で!important指定して他のアイコンもデカくするべみたいな雑な思惑がある。

ちなみにborder-radius: 50%;を追加すると各アイコンが丸くてカワイイな感じになるのでオススメな感じです。

そんなわけで、img.profile-iconのセレクタオンリー指定するともれなく他の場所の同クラスなエレメントのスタイル（サイドバーのアイコンとか）も変わるので、それはちょっとな場合ははてな標準の読者アイコン一覧用のセレクタを上書きして

.page-about .entry-content img.profile-icon  {
  width: 64px;
  height: 64px;
}

みたいにするとプロフィールページのアイコンだけそういう感じになる。 今度はimportantいらない。

ついでにサイドバーの自アイコンをいじくりたい場合は

#box2 img.profile-icon {
  border-radius: 50%;
}

みたいに指定するといいっぽい。

ブログのデザインはいじりだすとだいぶ時間使うので怖いとおもった。

でも確かに16pxの豆粒みたいなアイコンよりもそれなりのサイズのほうが見栄えが良いので満足した。

以上。