はてなブログの公式テーマ Wideboard を2カラムにする CSS
はてなブログの公式テーマである Wideboard が好みだったのですが,1カラムでサイドバーがページ下部に表示されてしまう部分が不満でした.
はてなブログは,デザイン設定の「デザインCSS」で CSS を記述することが出来るため,Wideboard を2カラムに変更することにしました.
Wideboard を2カラムにする CSS
サイドバーを 220px で固定幅とし,メインカラムは可変幅となるようにしました.
なお,calc()
を用いているため非対応のブラウザで表示すると,レイアウトが崩れてしまいます.
/* 2カラム用 */ #container-inner { max-width: 1200px; margin: 0 auto; } #content-inner { margin: 80px 20px 0; } #content-inner:after { content: " "; display: block; clear: both; } #wrapper { width: calc(100% - 220px); float: left; padding-right: 30px; box-sizing: border-box; } #box2 { float: left; width: 220px; border-top: none; margin-top: 0; } #box2-inner { border-top: none; padding-top: 0; } #footer { margin-left: 0; margin-right: 0; padding-right: 10px; } /* 装飾 */ .comment { max-width: none; } .entry-see-more { display: inline-block; margin-top: 30px; }
スクリーンショット
上記の CSS を適用した場合のスクリーンショットを載せます.
ブログ記事は,はてなブログさんのカスタムテーマ作成用のサンプルエントリーを用いています.