【stinger5】子テーマを使ってレスポンシブデザインを楽々カスタマイズしよう!

stingerシリーズで念願のレスポンシブデザインが採用された「Stinger5」
閲覧するデバイスごとにデザインを変えることが可能になりました。
今回は「子テーマ」を使ったカスタマイズ方法を紹介します。

レスポンシブデザインのカスタマイズには「子テーマ」を使おう!

wordpressphoto by mkhmarketing

スポンサーリンク

Stinger5のレスポンシブ構造

stinger5に限らず、レスポンシブデザインではサイト閲覧時のデバイスのスクリーンサイズで適用するCSSを振り分けています。

振り分けにはMedia Queriesが使われます。詳しくは【stinger5】レスポンシブデザインの仕組みとカスタマイズしやすくするためのひと工夫を参照してください。

stinger5では次の3つのMedia Queriesが使われています。

@media only screen and (max-width: 780px)
@media only screen and (min-width: 380px)
@media only screen and (min-width: 780px)

CSSはより後ろに書かれたものが優先されるというルールとあわせて考えると、以下のようになります。

レスポンシブ2

これにしたがって、カスタマイズしたいデバイスのデザインを該当する領域に書いていきます。(例:スマートホンなら②の領域にコードを書く)

しかしここで問題となるのが・・・

・毎回該当する領域を探すのが大変。
・間違えて別の領域をカスタマイズしてしまいデザインがおかしくなった
・カスタマイズしすぎて、ぐちゃぐちゃなコードになってしまった。
・元に戻したいけど、どこをカスタマイズしたのか分からず、戻せない・・・
・Stingerがバージョンアップしたら、同じデザインをつくるのが大変そう・・

などです。この問題はスタイルシートに直書きしているかぎり解消できません。

子テーマを使おう

この問題をきれいさっぱり解消してくれるのが「子テーマ」です。簡単に使えてとても便利ですのでぜひ活用してください。

子テーマの仕組み

子テーマは、単独のCSSファイルです。※style.cssだけでなく、footer.phpやFunction.phpなどいろいろ作れます。

子テーマ用のCSSファイルに最低限必要なのは
・子テーマの名前
・読み込む親テーマの名前
・親テーマの場所(URL)
です。
(例)

/*
Theme Name: stinger-child
Template: stinger5ver20141011
*/
@import url('../stinger5ver20141011/style.css');

子テーマのCSSの冒頭にあるのが、親テーマを読みこむコードです。その後に子テーマのスタイルコードがあります。

子テーマ

最初に親テーマを読み込むことで、親テーマ→子テーマの順になります。CSSにはより後ろのコードが優先されるという決まりがあるので、親テーマと子テーマで重複したものがあるときは子テーマが優先されます。子テーマに記載されていないコードは親テーマのスタイルコードが使われます

・子テーマをカスタマイズしても親テーマには影響もありません。
・子テーマにはカスタマイズした部分だけしかないので修正が楽です。
・stingerがバージョンアップしても親テーマ名とURLを指定しなおすだけで、子テーマはそのまま使えます。

子テーマの作り方

まずはテキストエディタを使って、子テーマファイルを作りましょう。サクラエディタあたりがおすすめです。

新規作成して、下のコードをコピー&ペーストします。

/*
Theme Name: stinger-child
Template: stinger5ver20141011
*/
@import url('../stinger5ver20141011/style.css');

このようになります。「stinger5ver20141011」の部分はお使いのstinger5のバージョンにあわせて変更してください。

次にstyle.cssという名前をつけて保存します。保存する時は文字コードセット:UTF-8、改行はLF(unix)、BOMのチェックは外します。

その他にstinger5-childという名前の空のフォルダとimageという空のフォルダを作ります(※名前は任意でつけてください)

作成したこれらのファイルをサーバーにアップします

まずwp-contentの中のthemesフォルダの中にstinger5-childフォルダをアップロードします。

子テーマフォルダ

次にstinger5-childの中に空のimageフォルダと先ほど作った子テーマstyle.cssをアップロードします。

子テーマフォルダ2

アップロードが終わったら、wordpressにログインしてダッシュボード→外観→テーマを開きます。

子テーマ用のstyle.cssが正しく設定されていれば、テーマの中に子テーマが出てきます。有効化すれば子テーマが適用されます。

wordpressテーマ

子テーマを使うには親テーマもThemsのフォルダになければなりません。また子テーマの設定が間違っていると壊れたテーマとして表示されます。

壊れたテーマ

上記のようになっているときは、
・親テーマがthemsフォルダにあるか?
・子テーマ内の親テーマ名の指定とURLが間違っていないか?
を確認してください。ほとんどの場合親テーマ名とURLの間違いが原因です。

テーマ記載法2

stinger5用の子テーマを作る

ここまでは、一般的な子テーマの作り方です。少し工夫してレスポンシブデザインのカスタマイズ用に変えます。

親テーマを指定した後、その下にstinger5で使われている3つのMedia Queriesを設定します。

この3つです。

@media only screen and (max-width: 780px)
@media only screen and (min-width: 380px)
@media only screen and (min-width: 780px)
/*
Theme Name: stinger-child
Template: stinger5ver20141011
*/

@import url('../stinger5ver20141011/style.css');

/*--------↓↓スマートホンだけののスタイル設定------------*/

@media only screen and (max-width: 780px){

}
}

/*--------↓↓タブレットだけのスタイル設定-----------------*/

@media only screen and (min-width: 380px){

}
}
/*--------↓↓PCだけのスタイル設定------------------------*/

@media only screen and (min-width: 780px){

}
}

このようになります。

stinger5用子テーマ

子テーマでデバイスごとにデザインを変えた例

試しに子テーマに、スマートホン、タブレット、PCで異なるスタイルコードを書いて、実際に反映しているか確認してみます。

記事のエントリータイトルの色をスマートホン、タブレット、PCそれぞれで変えてみます。

子テーマテスト

<スマートホン>
スマホ

<タブレット>
タブレットエントリータイトル

<PC>
PCエントリータイトルテスト

閲覧するデバイスごとにエントリータイトルの色を変えることができました。子テーマにはカスタマイズした所だけしかないので、修正や追加、削除も簡単です。

まとめ

いかがでしたでしょうか?stinger5で使える便利な子テーマの作り方を紹介しました。

子テーマは使い始めると、やめられない便利さと安心があります。他のテーマでも使える手法ですのでぜひ使ってみてください。

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク

コメント