【WordPressカスタマイズ相談】現役プログラマが解決策を教えます

WordPress(ワードプレス)のお悩み、うまくいかなくてお困りなこと、不具合調査、新規制作依頼まで、ウェブアプリケーションエンジニアがあなたをサポートします。

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

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

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

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

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

という紹介が多いです。

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

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

現状の構成

横幅は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を書き替えて表示確認がリアルタイムでできるのでとても便利です。 FirefoxSafariにも同じ機能がついています。  
 

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

はてなブログの構造上、直接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;
}

そのままコピペでも使えるとは思いますが、反映後は全体の確認をお忘れなく。