Themeid RESPONSIVE のグリッドを 978pxに変えてみる

Themeid Responsive テーマのグリッドは、940グリッドでレイアウトされているのですが、もう少し画面を広く使える978グリッドにしてみました

カスタマイズの目的は、記事エリアを広げ、記事の上のエリアにアドセンスのビックバナー(728×90) を表示出来るようにすることです

ちなみに、Themeid Responsive というテーマは、CyberChimps という会社に移管されたようです。お気に入りのテーマなので、開発が終了にならなければ良いのですが、引き続き無料で使用出来、バージョンアップも行われているようです
http://themeid.com/responsive-theme/

カスタマイズは、いつもの様に子テーマに行いますが、使用している親テーマのバージョンも少し古くなっていたので、ついでに最新バージョン 1.9.3.2 にしてから978 グリッドへのカスタマイズを行なってみました

子テーマに関しては、RESPONSIVE 子テーマ導入 を参照して下さい

カスタマイズ手順

  1. 940グリッドシステム調査
  2. 978グリッドでレイアウト検討
  3. 978グリッド用CSSファイル作成
  4. 新レイアウト用テンプレートファイル作成
  5. CSSファイル微調整

940グリッドシステム

60pxのカラムを 20px 間隔に12個並べると横幅が 940px になるので、これをベースにコンテンツエリアのレイアウトをカラム単位でデザインするシステムです

http://themeid.com/responsive-grid/ に様々なレイアウトパターンが示されていますが、私が使用しているレイアウトは、下記3パターンです

  • 940
  • 300 + 300 + 300
  • 620 + 300

実際は、各エリアに表示するときにパディングやマージンが関係してくるので、こんなにシンプルではありませんので、Chrome や firefox の開発ツールでCSSデータを確認しながら調整することとなります (^_^;)

グリッドに関しては、こちらのサイトで分かりやすく解説してくれています
レイアウト作りを簡単にしてくれるCSSグリッドシステム

ちなみに、Responsive テーマでは、CSSで次のように定義されています
各カラムは、 940px に対する比率(%)での定義です

例えば col-60 ならば 60 ÷ 940 x 100 = 6.3829…% となっています

Style.css ファイルの該当部分を抜粋します

/* =Responsive 12 Column Grid
    Topic: responsive grid  |  CyberChimps
-------------------------------------------------------------- */
.grid {
    float: left;
    margin-bottom: 2.127659574468%;
    padding-top: 0;
}

.grid-right {
    float: right;
    margin-bottom: 2.127659574468%;
    padding-top: 0;
}

.col-60, 
.col-140, 
.col-220, 
.col-300, 
.col-380, 
.col-460, 
.col-540, 
.col-620, 
.col-700, 
.col-780, 
.col-860 {
    display: inline;
    margin-right: 2.127659574468%;
}

.col-60 {
    width: 6.382978723404%;
}

.col-140 {
    width: 14.893617021277%;
}

.col-220 {
    width: 23.404255319149%;
}

.col-300 {
    width: 31.914893617021%;
}

.col-380 {
    width: 40.425531914894%;
}

.col-460 {
    width: 48.936170212766%;
}

.col-540 {
    width: 57.446808510638%;
}

.col-620 {
    width: 65.957446808511%;
}

.col-700 {
    width: 74.468085106383%;
}

.col-780 {
    width: 82.978723404255%;
}

.col-860 {
    width: 91.489361702128%;
}

.col-940 {
    width: 100%;
}

/* =Globals
-------------------------------------------------------------- */
#container {
    margin: 0 auto;
    max-width: 960px;
    padding: 0px 25px;
}

#header {
    margin: 0;
}

#footer {
    clear: both;
    margin: 0 auto;
    max-width: 960px;
    padding: 0 25px 0 25px;
}

978グリッドでレイアウト検討

54pxのカラムを 30px 間隔に12個並べると横幅が 978px になるので、これをベースにコンテンツエリアのレイアウトをカラム単位でデザインするシステムです

940グリッドと同じカラム数でカラム単位のサイズが少し異なっているだけなので、940から978への変更は、比較的簡単に出来ると思われます

clip_image001

アドセンスのビックバナー(728x90px) を設置するには、今までと同じに8カラム+4カラム構成とすると幅が足りません。

9カラムにすれば幅が 726px となりますが、ビックバナーは 728px という微妙に大きいサイズなので、9カラム目(col-700)のみを 4px調整して、幅 730px 、間隔26px とします

また、container の幅を 998px に設定して、左右に10px のマージンを設けます

パディングも少し設けたいのですが、全体の幅は、1024px より小さくしたかったので container のパディングは0として、他の要素で若干マージンを設けました

これでなんとか表示できるはずです

また、ビッグバナー以外でもレクタングル(336x280px)を2個並べることも可能となりますが、代わりに、サイドバーが 222px 幅となるので、サイドバーに貼り付ける広告は、200px や 160px サイズに変更する必要があります

978グリッド用CSSファイル作成

それでは、子テーマの style.css を変更して、978グリッドに対応させます

グリッド定義変更

残念ながら CSS上で使われているクラス名が grid-1 のような名前でなく、col-60 と言うような名前なので、ちょっとわかりづらいかもしれませんが、この名前をそのまま使って 978グリッドとなるようにカスタマイズしていきます

CSSのクラス名を置き換えると、該当する箇所が多すぎますのでしかたありません

頭の中で次のように対応していると認識すれば済むことです (^_^;)

.col-60 -> 54

.col-140 -> 138

.col-220 -> 222

.col-300 -> 306

.col-380 -> 390

.col-460 -> 474

.col-540 -> 558

.col-620 -> 642

.col-700 -> 726 (730)

.col-780 -> 810

.col-860 -> 894

.col-940 -> 978

ちなみに col-60 に指定する値は、54 ÷ 978 x 100 = 5.52147…% となります

メディアクエリー変更

CSSでは、グリッドを定義だけでなく、ブラウザの横幅に応じてレイアウトや縮小することも必要となります

このテーマでは、レスポンシブというデザインが使われているので、タブレットやスマートフォン等でも閲覧できるようにブラウザの横サイズに応じて自動的に表示エリアを縮小したり、レイアウトを変更することを行なってくれます

とは、言っても、サイズがいくつになったらレイアウトを変更して、どのように縮小表示されるかをある程度想定する必要があります

デバイスにより様々な解像度がありますが、代表的な所で今回は、次のパターンを想定して考えて見たいと思います

  1. パソコン(画面幅 1024px 以上)
  2. タブレット(画面幅 768px 以上)
  3. スマートフォン(画面幅 480px 以上)
  4. その他デバイス

画面切り替え幅の指定

CSSで @media screen and (max-width: 480px) というようないくつかのポイントを定義してあります

オリジナルで定義されていたのは、980px, 650px, 480px, 320px, 240px です

順にパソコン、タブレット、スマートフォン、その他デバイスを想定していると思われます

細かい処理はわからない部分も多いのですが、この中で 980px がレイアウトの切り替えポイントとなっていて、980px より大きければ、メイン部とサイドバーを横に並べた基本となるレイアウトで縮小表示はおこなわれません

次に980 – 650px ならば、float の設定を変えて、メイン部の下にサイドバー部を縦に並べたレイアウトに変更します。

更にブラウザー幅が小さくなれば切り替えポイントに合わせて、フォントサイズを変えたり、マージンやレイアウトを調整したりして表示します

今回は、メインの表示部を9カラムに変更しているので、980px でのレイアウト変更ポイントを 1018px に変更して、他はそのまま使用します

新レイアウト用テンプレートファイル作成

次に、今までの8カラム+4カラムのレイアウトから9カラム+3カラムのレイアウトへ変更するために使用しているテンプレートファイルを修正します

現在使用している全てのテンプレートファイルが該当します

今回は、未使用のテンプレートファイルは修正しないので、下記9ファイルを修正しました

サイドバーを左に置いている場合等は、対象となるファイルが異なるので注意して下さい

  1. Home.php
  2. Index.php
  3. Page.php
  4. Single.php
  5. Archive.php
  6. Blog-excerpt.php
  7. Content-sidebar-page.php
  8. Sidebar.php
  9. Sidebar-right.php

変更は、各ファイルを子テーマ用にコピーして、ヘッダー部へ子テーマの宣言を記述します

Theme Name: Responsive Child Theme

Template: responsive

次にレイアウト変更に伴い指定しているカラム定義を書き換えます

メイン部のテンプレートファイルでは、<div class> タグで指定されている "grid col-620" を "grid col-700" にします

サイドバー部のテンプレートファイルでは、同様に "grid col-300 fit" を "grid col-220 fit" にします

基本的には、これだけですがファイルが多いので大変です

CSSファイル微調整

変更したファイルを子テーマにアップロードして、ブラウザで確認します

後は、ブラウザ幅を変更しながら、実際にどのように表示されるか確認して、微調整を行います

参考までに、このようなCSSファイルとなりました

/* 
Theme Name: Responsive Child Theme 
Theme URI: http://themeid.com/responsive-theme/ 
Description: Responsive Theme is a flexible foundation with fluid grid system that adapts your website to mobile devices and the desktop or any other viewing environment. Theme features 9 Page Templates, 11 Widget Areas, 6 Template Layouts, 4 Menu Positions and more. Powerful but simple Theme Options for full CMS control with easy Logo Upload, Social Networking and Webmaster Tools etc. Responsive is WooCommerce Compatible, Multilingual Ready (WPML), RTL-Language Support, Retina-Ready, W3C Markup Validated and currently translated into 34 languages. Cross-Browser compatible and yes even the IE7. No paid memberships or clubs to get a FREE/Responsive Support you need. http://themeid.com/support

Template: responsive
Version: 1.0.0
Author: ThemeID 
Author URI: http://themeid.com
Tags: white, black, gray, light, custom-menu, custom-header, custom-background, one-column, two-columns, left-sidebar, right-sidebar, flexible-width, theme-options, threaded-comments, full-width-template, sticky-post, translation-ready, flexible-width, rtl-language-support

License: GNU General Public License
License URI: license.txt 

Responsive WordPress Theme, Copyright (C) 2003-2012 Emil Uzelac 

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with this program.  If not, see <http://www.gnu.org/licenses/>.
*/

/* =Import Styles
-------------------------------------------------------------- */
@import url('../responsive/style.css');



/* =Start From Here
-------------------------------------------------------------- */



/* =My Custumize CSS
-------------------------------------------------------------- */
/* =My Base
-------------------------------------------------------------- */
body {
    -moz-font-smoothing: antialiased;
    -webkit-font-smoothing: antialiased;
    background: #efefef;
    color: #404040;
    font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
    font-size: 15px;
    font-smoothing: antialiased;
    line-height: 1.6em;
    text-rendering: optimizeLegibility;
    margin: 0px 8px;
}




/* =Responsive 12 Column Grid
    Topic: responsive grid  |  CyberChimps
  オリジナルは 940 Grid(60+20) だが、978 Grid(54+30) へ変更
 但し、クラス名はいろいろな所で使用されているのでそのまま使用して比率を変更する
   .col-60  -> 54 
   .col-140 -> 138 
   .col-220 -> 222 
   .col-300 -> 306 
   .col-380 -> 390 
   .col-460 -> 474 
   .col-540 -> 558 
   .col-620 -> 642 
   .col-700 -> 726 
   .col-780 -> 810 
   .col-860 -> 894
-------------------------------------------------------------- */
.grid {
    float: left;
    margin-bottom: 1.660531697%;
    padding-top: 0;
}

.grid-right {
    float: right;
    margin-bottom: 1.660531697%;
    padding-top: 0;
}

.col-60, 
.col-140, 
.col-220, 
.col-300, 
.col-380, 
.col-460, 
.col-540, 
.col-620, 
.col-700, 
.col-780, 
.col-860 {
    display: inline;
    margin-right: 3.067484622%;
}

.col-60 {
    width: 5.521472392%;
}

.col-140 {
    width: 14.110429447%;
}

.col-220 {
    width: 22.699386503%;
}

.col-300 {
    width: 31.288343558%;
}

.col-380 {
    width: 39.877300613%;
}

.col-460 {
    width: 48.466257668%;
}

.col-540 {
    width: 57.055214723%;
}

.col-620 {
    width: 65.644171779%;
}

/* AdSense 728 banner 用に 730 に調整 */
.col-700 {
    width: 74.642126789%;
    margin-right: 2.658486707%;
}

.col-780 {
    width: 82.822085889%;
}

.col-860 {
    width: 91.411042944%;
}

.col-940 {
    width: 100%;
}



(途中略)



/* =Globals
-------------------------------------------------------------- */
#container {
    margin: 0 auto;
    max-width: 998px;
    padding: 0px 0px;
}


#header {
    margin: 0;
}

#footer {
    clear: both;
    margin: 0 auto;
    max-width: 998px;
    padding: 0 12px 0 12px;
}



(途中略)




/* サイドバー再レイアウトポイントを 980px -> 1018px に変更 */
@media screen and (max-width: 1018px) {

    body {}

    .grid, 
    .grid-right {
        float: none;
    }

    .copyright,
    .scroll-top,
    .powered {
        float: left;
    }

    #featured-image .fluid-width-video-wrapper {
        margin: 20px 0 0 0;
    }

    .front-page  #widgets {
        margin-top: 40px;
    }

    .top-widget,
    .front-page  .top-widget {
        margin-top: 0 !important;
    }

    .hide-980 {
        display: none;
    }

    .show-980 {
        display: block;
    }

}


(以下、略)

 

以上、978グリッドでレイアウトを変更してみました

親テーマには、変更を加えていないので、なにか問題があればすぐ元へ戻せます

CSSをさわりだすと切りがないですが、少しは見やすいサイトになったような気もします

後は、ブラウザーの幅に応じて広告のサイズを切り替えられれば良いのですが (^^)

関連コンテンツ


まとめ記事紹介

search star user home refresh tag chevron-left chevron-right exclamation-triangle calendar comment folder thumb-tack navicon angle-double-up angle-double-down angle-up angle-down quote-left googleplus facebook instagram twitter rss