はぴらき合理化幻想

海外3年/西成ドヤ2年/沖縄2年/事故物件で寝袋3年目、ミニマリスト10年目でダンボール2箱の持ち物と保存食で大阪に定住中。

はてなブログのサイドバーにある最新記事にサムネイルを表示するならCSSで横幅調整しよう

最近、サイドバーの「最新記事」欄にサムネイルを表示できるようになった。そのまま表示させると記事タイトルが読みにくい。

なぜ横幅を調整するのか?

記事タイトルが狭くなるので。下図左側がデフォルトで、右側がカスタム後。スカイブルーの破線は筆者による補助線。

サイドバーの「最新記事」欄にサムネイルを表示する方法

次の公式ページが参考になる。

CSS編集へのアクセス方法

次の記事で管理画面からCSS編集できる場所へのアクセス方法を図解している。

追加するCSSコードのサンプル

この記事公開時に当ブログで利用させていただいているデザインテーマ名は「Epic」。

このデザインテーマ以外ではカスタム方法に相違があるかもしれない。

以下のサンプルコードは当ブログで現在適用しているもの。本文表示エリアの横幅も80px拡張している。

/*
はてなブログのサイドバーにある最新記事にサムネイルを表示するならCSSで横幅調整しよう
http://hapilaki.hateblo.jp/entry/design-theme-width
*/
#container{width:1100px;}/*デフォ960pxに+140*/
#wrapper{width:800px;}/*デフォ720pxに+80*/
#main{width:640px;}/*デフォ560pxに+80*/
#box2{width:240px;}/*デフォ180pxに+60*/

CSSコードの簡易説明

上記コードがデザインテーマのどの部分を指しているのかを解説する。各画像で青いエリアがその範囲。

#containerに記事エリア・日付エリア・サイドバーの合計の横幅が定義されている。

#wrapperに記事エリアと日付エリアの合計の横幅が定義されている。デザインテーマによっては、日付エリアがないのもある。

#mainに記事エリアの横幅が定義されている。

#box2にサイドバーの横幅が定義されている。

追記:2014年3月22日に次のリンクを追加。

てすとてすと