Twenty Fourteenのレスポンシブ設計を理解する

WordPress3.8のデフォルトテーマであるTwenty Fourteenはブラウザに合わせて表示を最適化しており、標準でもスマートフォンの画面サイズにぴったりのスタイルとなります。

このiPhone画面のキャプチャは、iPhone 4SでのTwenty Fourteenノーカスタマイズ状態のトップページです。
赤っぽい横長の画像がアイキャッチ画像です。

このように、Twenty Fourteenノーカスタマイズ状態でのトップページには、投稿記事のアイキャッチとタイトル、投稿日時などが一覧で表示されます。

対してPCでのブラウザで表示をすると、Twenty Fourteenノーカスタマイズ状態のトップページにはアイキャッチ画像、記事タイトル、本文、投稿日時などが表示されます。
特にプラグインなども使用していないのに、デバイスによってここまで表示が変わるのはなぜなのでしょうか？
Twenty Fourteenをカスタマイズするためにはこの仕組みを理解しないと厳しいものがあります。

逆に理解してしまえば、デバイスの種類によって細かく表示スタイルを設定できますので、とても便利になります。
難しくないので、この仕組みを理解してみましょう！

レスポンシブ設計の正体はMedia Queries

新しい仕様であるCSS3から登場したMedia Queriesを使用すれば、デバイスの種類に合わせて表示スタイルを決めることができます。
もう少し詳しくいうと、ブラウザの幅によって表示スタイルを変えることができるのです。

ブラウザの幅により表示を変えることによって、レスポンシブな動作となるのです。

Media Queriesはスタイルシートに記述をします。
一通りの基本設計の記述が終わった後で、ブラウザの幅ごとの細かな条件分岐をして、スタイルを決めていきます。
Twenty Fourteenのスタイルシートを例に説明をします。

/**
 * 11.0 Media Queries
 * -----------------------------------------------------------------------------
 */
 
/*
・
省略
・
 */
 
@media screen and (max-width: 400px) {
	.list-view .site-content .post-thumbnail {
		background: none;
		width: auto;
		z-index: 2;
	}
/*
・
省略
・
 */
@media screen and (min-width: 401px) {
	a.post-thumbnail:hover img {
		opacity: 0.85;
	}
/*
・
省略
・
 */
@media screen and (min-width: 594px) {
	.site-content .entry-header {
		padding-right: 30px;
		padding-left: 30px;
	}

style.cssのかなり下の方、2945行目辺りからこのような記述があります。
ここでは、@media screen and (max-width: 400px)@media screen and (min-width: 401px)@media screen and (min-width: 594px)これらの記述が条件の分岐となり、まず始めにmax-widthで幅が400px以下の場合の設定をしています。
その後はmin-widthで401px、594pxを指定していき、401px以上593px以下での設定、594px以上XXXpx以下での設定、という感じで様々な幅を指定していき、細かく設定を施しています。

設定を細かくすれば、その分様々な表示が可能となります。
一見大変そうな感じもしますが、慣れてしまうととても便利な設定方法です。

iPhoneとPCでの表示が大きく違うのは、こういった設定でアイキャッチ画像の表示サイズや、本文の表示/非表示を変えていたからなんですね。
素晴らしいです！

感想

このMedia Queriesを使用してしまうと、便利すぎてその後使わずにはいられなくなります。
そのくらいに役に立つ機能です。

今日では様々な大きさのPCモニタ、タブレット、スマートフォンが世の中にあふれています。
ブラウザの幅で表示を変えることが、もっとも現状に適してレスポンシブサイトと言えると思います。

ゼロから自前でMedia Queriesの記述をするのも、とても楽しいと思いますが、それにはいささか時間がかかりすぎます。
Twenty Fourteenはデフォルトでかなり詳細にわたってMedia Queriesの設定が施されていますので、子テーマを作るなりしてカスタマイズしていけば、とても良いサイトが出来上がると思います。

私なりのカスタマイズを引き続き、本ブログにて紹介していきますので、よろしくお願いします！