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

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

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

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

WordPress 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の設定が施されていますので、子テーマを作るなりしてカスタマイズしていけば、とても良いサイトが出来上がると思います。

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


関連記事

Twenty Fourteenの検索枠の背景色を変更 Twenty Fourteenの検索枠の色変更
Twenty Fourteenの検索枠の背景色変更のカスタマイズです。
WordPressのTwenty Fourteenをフォトログにカスタマイズ Twenty Fourteenをフォトログ的に使う
Twenty Fourteenのトップページに写真をきれいに並べてフォトログテーマ風にカスタマイズしました。写真ギャラリーとして使えます。
Twenty Fourteenの背景色を変更する Twenty Fourteenの背景色を変更する
WordPressのデフォルトテーマにも採用されたTwenty Fourteenの背景色を変更するカスタマイズの紹介です。意外と手こずるカスタマイズですので、参考になれば幸いです。
WordPressのTwenty FourteenにヘッダーにSNSアイコン画像を貼る Twenty FourteenのヘッダーにSNSアイコン設置
レスポンシブで使いやすいWordPressテーマTwenty Fourteenのヘッダー部分に、SNSアイコン画像を貼り付けるカスタマイズを紹介します。
Twenty Fourteenのトップページをアイキャッチ画像と記事タイトルの一覧にするカスタマイズ Twenty Fourteenのトップをタイトル一覧にする
Twenty Fourteenのトップページをカスタマイズし、アイキャッチ画像と記事タイトルの一覧にしスッキリとレイアウトにする方法を紹介します。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>