Twenty Elevenのカスタマイズがちょっと面倒なワケ

WordPressの新しいデフォルトのテーマTwenty Elevenは、管理画面で設定できることが多くなっていたり、そのままでもスマートフォンでみられるよう調節してくれたり、とても高機能です。でも、実際に少し変えてみようかな〜と、思ったときに難しくなってしまっていることも事実です。

今日はTwenty Elevenの、便利なところと、それがどのようにカスタマイズを難しくしているのかを、書いてみたいと思います。

スマートフォンに対応（1）〜レイアウトが相対的

Twenty Elevenの一番の特徴は、そのままでスマートフォンやタブレット表示に対応してくれていることかもしれません。

Twenty Elevenを有効にした状態で、ブラウザのウインドウのサイズを変えてみてください。ウインドウのサイズに合わせて、コンテンツやサイドバーの幅、ヘッダー画像の大きさなどが変わりますね。どんどん小さくしていくと、あるところでサイドバーが下に落っこちて1カラムになります。また、ウインドウのサイズがある大きさより小さくなると、フォントのサイズも変わります。

すごいですね！

こういうのを、「レスポンシブwebデザイン」と呼んでいて、いろんな環境からサイトを見ることが多くなってきていることに対応するひとつの方法です。同じHTMLを使ってウインドウのサイズに合わせてレイアウトやデザインなどをCSSによって変えていくものです。スマートフォンサイトなどを別に用意しなくていいのでとても便利です。

「いいじゃない！どんどん使おうよ！」

と言いたいところなのですが。。。これがとってもややこしいんです。

試しに、Twenty ElevenのCSSファイルの68行目当たりから始まる「Structure」という部分を見てみましょう。

/* =Structure
----------------------------------------------- */

body {
     padding: 0 2em;
}
#page {
     margin: 2em auto;
     max-width: 1000px;
}
#branding hgroup {
     margin: 0 7.6%;
}
#access div {
     margin: 0 7.6%;
}
#primary {
     float: left;
     margin: 0 -26.4% 0 0;
     width: 100%;
}
#content {
     margin: 0 34% 0 7.6%;
     width: 58.4%;
}
#secondary {
     float: right;
     margin-right: 7.6%;
     width: 18.8%;
}

これは基本のレイアウトの部分なのですが、すごく微妙な感じの%で設定されていますね。これをざっくり説明すると、「page」（外枠の大きさ）は最大1000pxに決めて、そのなかの「primary 」「content」「secondary」などはそれに対するパーセントで大きさを決めています。微妙な数字になってしまうのは、もともとのレイアウトをピクセルで考えておいて、それをパーセントに直すからなんですが、ちょっと見ただけでは、どういう意味の数字なのか分かりにくくなってしまっています。

コンテンツの幅などを変えたい、と思ったときに、今まではピクセルで簡単に指定できました。でも、この相対的な設定の仕方のために、どことどこが影響しあっているのかとか、この数字はどこから出てきているのか、ということを見つけ出すのも難しくなっていると思います。そして、うっかりすると、カラム落ち..なんてことにもなりかねないので、しっかり計算しないといけませんね。

スマートフォンに対応（1）〜MediaQuery（メディアクエリ）

はい、また耳慣れない言葉が出てきました。聞いたことがある方、使っている方もいらっしゃると思いますが、ちょっと説明します。MediaQuery（メディアクエリ）というのは、すごく簡単に言うと、デバイス（ウインドウのサイズ）に合わせて、それぞれの設定ができるCSSの事です。

Twenty ElevenのCSSの2237行目当たりを見てみましょう。「=Responsive Structure」というコメントがある部分です。

@media (max-width: 800px) 、@media (max-width: 650px)、@media (max-width: 450px) 、@media only screen and (min-device-width: 320px) and (max-device-width: 480px) と設定が続いています。見つけられましたか？

最大幅800px、650px、450px、これはふつうのブラウザからタブレットくらいまでですね。最後のは、デバイスの最小幅が320px、最大幅が480px、とスマートフォン向けになっている感じです。

この部分のおかげで、スマートフォンやタブレット、大きなディスプレイや小さなディスプレイ、色々なものに対応できるのですが、レイアウトを変えたくなったときには、この部分にも変更を加えないといけません。

つまり、レイアウトやフォントサイズなどを変更するためには、パーセントの計算をした上で、MediaQuery（メディアクエリ）で指定されている部分も変えてあげないといけない、という何重かの手間がかかるわけです。

管理画面でレイアウト選択

管理画面で、外観＞テーマ設定のところを見ると、「デフォルトのレイアウト」とあって、3種類のレイアウトを選択できるようになっています。

「おお！！！これば便利！」

と思った人も多いのでは？でも、これもカスタマイズするとき、意外にクセモノです。

左コンテンツを選択したとき→two-column right-sidebar
右コンテンツを選択したとき→two-column left-sidebar
1カラムを選択したとき→ one-column content

というスタイルがbodyに書きこまれます。ですので、微調整したい時には、該当剃る部分をしっかり探して変えてあげないと、「CSSが効かないよ〜〜」って、何時間も悩むことになったりしかねません。

管理画面でカラー選択

同じく管理画面の、外観＞テーマ設定に「色の設定」という部分があります。デフォルトでは「ライトカラー」の白っぽい色ですが、「ダークカラー」を選ぶと黒っぽい感じになります。

これもなかなかいいですね！

さて、これをベースにちょっと色合いなど変えてみようかな…とTwenty ElevenのCSSを探してみても…..それらしい記述がありません。このカラー設定に関するCSSは、テーマフォルダの中にある、colorsというフォルダの中、drak.cssというファイルで設定しています。管理画面で色の設定を変えると、このスタイルシートへのリンクが、headに自動で追加される仕組みです。ですから、どちらの設定にしたのか、しっかり把握してないと、やっぱり「CSSが効かないよ〜〜」って悩むことになるかもしれません。

その他いっぱい

その他にも、たくさんのページのフォーマットが選べるようになっている分、それ専用のスタイルの設定がされています。これもうまく該当箇所を見つけて変えていかないと、うまく変わらなかったり、一カ所だけ変になったりと、つまずくことが多くなるかもしれません。

また、高機能な分、CSSだけではどうにもならなくて、functions.phpなど、テーマ本体のほうをいじらないと、ということも増えてくると思います。

でも楽しいよ

だいぶ脅かしてしまったでしょうか。でも、Twenty Elevenには、WordPressで出来ることの見本がいっぱい詰まっています。今までTwenty Tenのカスタマイズについて考える時にやってきたように、出てくるHTMLとテーマファイルをじっくり見比べれば、分かってくることも多いです。テーマを作っていきたい人にも、こんな機能を持たせるにはこんなことをすればいいんだ、という見本がいっぱいです。

ぜひ色々いじって楽しんでみてください。（はまったらまず、この記事にあるようなことを確認してみてくださいね）

そして、難しいな、と、ここまでの機能はいらないな、と思う人はTwenty Tenや、その他のシンプルなテーマを使ってみるのも良いと思います。たくさんの選択肢があることもWordPressの魅力のひとつですよね！

それでは、楽しいカスタマイズを！