はてなブログのテーマ「Reach」の横幅をカスタマイズしてみた

はてなブログのレスポンシブ対応テーマとしてよく紹介される「Reach」をカスタマイズしてみました。

はてなブログのテーマ「Reach」
http://blog.hatena.ne.jp/-/store/theme/12921228815712830662
　　

初めてブログを作る際に見る書籍などでは、

おすすめの無料ブログは「はてなブログ」
おすすめのテーマが「Reach」

という紹介が多いです。

レスポンシブだからという理由で載っています。
　

私は適当に選んでこのテーマにしました。
シンプルなテーマでお気に入りだったのですが、ジャンル的にソースコードを貼り付けることが多いため、横幅が広い方がいいなぁと思いつつ長い間放置していました。
今回おもいきってCSSを調査、カスタマイズして横幅を広げることに成功しました。
比較的シンプルな構造だったので1時間程度でカスタマイズすることができましたよ。　

現状の構成
既存のサイトの調査方法
カスタマイズはデザイン設定で
設定変更の値とCSS

現状の構成

横幅は960pxでサイドバーが320px、メインが620pxという構造になっていました。
差分の20pxはサイドバーとメインの間隔になるかと思います。

今回は横幅1160pxでカスタマイズしようと思います。
　

CSSのIDは図のようになります。

f:id:jsaz:20171112173517p:plain:w600

contentの中にmainとbox2がある形です。
contentの上にはヘッダー（画像、タイトル）があります。
こちらも960pxの設定でした。

表でまとめると

領域	ID	px
全体	`#content`	960px
サイドバー	`#box2`	320px
メイン	`#main`	620px

全体的に960pxや956pxと記述されている箇所を変更していけばOKです。
　

既存のサイトの調査方法

現状のサイトをそのまま表示して、Chromeの開発者ツールの検証を使ってタグの調査やwidthの数値の調査を行いました。
その画面でwidthを書き替えて表示確認がリアルタイムでできるのでとても便利です。 FirefoxやSafariにも同じ機能がついています。　
　

カスタマイズはデザイン設定で

はてなブログの構造上、直接CSSを書き替えることができなかったのでデザイン設定のカスタマイズタブ、デザインCSSで追記する形でCSSを記述していきます。
ただプレビュー画面はTOPページのみだったようなので、記事ページや他のページは一度設定を保存してから確認する必要があります。
PV数（はてなブログのアクセス解析の数値）が上がってしまうので注意と割り切りが必要ですね。。。
同一IPでのPV加算除外されているのかな？　
　

設定変更の値とCSS

全体を1160pxにします。
ヘッダー部分や記事ページのパンくずリストの領域、検索結果ページのメイン/サイドは別途設定する必要がありました。
この辺の調査もChrome開発者ツールを使います。
　
実際のwidhtの数値は、box2は10px広げて330pxにmainは190増やして810pxとしました。
（デザイン設定の）プレビューで見るだけでも領域が広がり見え方が全然違います！
　
　

変更後の表

領域	ID	px
全体	`#content`	1160px
サイドバー	`#box2`	330px
メイン	`#main`	810px

できあがったCSSはこちら↓↓↓
　

/* 横幅調整 */
.header-image-enable #blog-title {
    width: 1160px;
}
#bottom-editarea, #top-editarea, .breadcrumb {
    width: 1138px;
}
.breadcrumb {
    padding: 10px!important;
}
.header-image-enable #blog-title-inner {
    width: 1158px;
}
#top-box { 
    width: 1160px;
}
#content {
    width: 1160px;
}
#main {
    width: 810px;
}
#box2 {
    width: 330px;
}
.page-archive #main {
    width: 770px;
}