1. TOP
  2. wordpressテーマ作成
  3. 2.WordPressテーマの骨組みをレスポンシブレイアウトに構築する
wordpressテーマ作成

2.WordPressテーマの骨組みをレスポンシブレイアウトに構築する

WordPressに骨組みテーマをアップロードしたら、全体のレイアウトをCSSで整えていきます。

全体のデザインを決める大事な部分なので、サイトの形をしっかりと決めてCSSで配置やデザインをレイアウトしていきましょう。

今回は、テーマの骨組みテンプレートを可視化し、サイト全体の構成をレスポンシブデザインにレイアウトする方法をご紹介します。

サイトの構成をイメージする

WordPressのページは、各テンプレートを呼び出して一つのページを呼び出しています。骨組みテンプレートに現在記述している構成では、トップページやカテゴリページなどでは、『index.php』『header.php』『footer.php』『sidebar.php』の4つのテンプレートでページを構成し、投稿ページや固定ページでは、『single.php』『header.php』『footer.php』『sidebar.php』の4つのテンプレートでページを構成します。
※あくまでも基本です。応用となる『home.php』や『page.php』などのページについては、後の記事でご説明します。

ページの表示を決めているのは、『inedex.php』と『single.php』でその他のテンプレートはその中で呼び出して使用します。

<?php get_header(); ?>←header.phpを呼び出し
<div class="container">
<div class="contents">
ここに表示させたいメインコンテンツを記述
</div>
<?php get_sidebar(); ?>←sidebar.phpを呼び出し
</div>
<?php get_footer(); ?>←footer.phpを呼び出し

各構成を確認したらサイトのレイアウトを考えてみましょう。今回は、下記のようなスタンダードな形のサイトを作成していきたいと思います。

作成するサイトの大まかな構成をきめたら、もう少し掘り下げてサイトの構成を考えていきます。

ブログのテーマを作成した場合、画面幅いっぱいにサイト幅を広げてしまうと、横に伸びて読みづらくなってしまいますので最大幅を1000px~1200pxぐらいにしておきましょう。

また、headerやfooter content sidebarの背景色を別々に変更できるように設置しておいた方がカスタマイズするときに楽なので、前回の作成時に記述しておいたinner要素に幅を指定するようにします。

それを踏まえて簡単なワイヤーフレームを書くと下記のようになります。

上記のワイヤーフレームを元にブログ全体の構成を調整してきます。まだいくらでも修正が効くので、サイズは適当でも問題ありません。

現在の表示をブラウザで確認できるようにする

現在の状態でCSSを編集しても、要素が何も入っていない状態なのでブラウザで目視することができません。CSSで全体の構成を調整する前に仮のCSSを設定し、ブラウザで目視できるようにするとイメージしやすく作業が楽になりますよ。

仮のCSSを挿入するときは、一時的に各コンテンツに高さとバックグラウンドカラーを指定して各要素をブラウザで確認できるようにします。

style.cssに記述

/*確認用に一時記述----------*/
.contents, #sidebar {height: 800px; }
header{background-color: #888;}
.header-inner{ background-color: #ccc; height: 200px;}
.container {background-color: #9db2ea; }
.contents {background-color: #a5e2ff; }
#sidebar{background-color: #aefffc; }
footer{background-color: #777; }
.footer-inner{background-color: #ddd; height: 250px; }
/*------------------------*/

※一時的に適応させるCSSなのでカラーは適当です。自分のわかりやすいように設定してください。

上記のCSSを挿入すると下記のように、各ボックスに高さとカラーが設定され各要素が把握しやすくなります。

テーマの各要素をレイアウトする

今の状態では、各要素がブラウザ幅いっぱいに表示されている状態なので、『header-inner』『footer-inner』『container』に最大幅を設定しましょう。

また、同時にサイトのコンテンツがブラウザの中央に配置される指定も一緒に行います。

style.cssに記述

/*コンテンツのサイズ指定*/
.header-inner, .container, .footer-inner {
max-width: 1200px;
margin-right: auto;
margin-left: auto;
}

最大幅を指定することで、親要素であるbody・header・footerの要素のみブラウザー幅いっぱいに広がり、中身のコンテンツは指定している最大幅で固定されます。

これで、header・body・footerそれぞれに背景色を指定すると、背景のみブラウザいっぱいに広げることができるようになりました。

スマートフォンでのレイアウトを調整する

現在の各要素の並びは、スマホ表示のレイアウトと同じなので、先にスマートフォン表示の場合のレイアウトから調整していきます。

※スマートフォン版の表示は、各ブラウザーのデベロッパーツールから確認することができます。デベロッパーツールは基本的には『F12』キーで表示できます。

レイアウトはそのままで、各要素の余白を調整していきましょう。

style.cssに記述

/*コンテンツのサイズ指定*/
.header-inner, .container, .footer-inner {
max-width: 1200px;
margin-right: auto;
margin-left: auto;
padding: 10px;/*←記述を追加*/
}
.contents, #sidebar {
margin: 20px 0;
}

スマートフォン版のレイアウトは、余白を整えたら終了です。

marginとpadding
borderを境界としてmarginは外に幅をとるのに対し、paddingは中に幅をとります。ただし、marginもpaddingも幅を増やしたら増やした分だけboxのサイズが大きくなっていきますので注意しましょう。

paddingは境界線の内側にかかるので、backgroundなどの要素にかかる効果が適応されるのに対し、marginは外側になるので効果はかかりません。

marginにしかない機能として、margin同士が重なったときは相殺され数字が大きい方だけが適応されるので注意して入れるようにしましょう。

また、marginとpaddingはtop,bottom,right,leftなどの位置を指定する他にも、省略して記述することができます。

margin: ◯px; 上下左右
margin: ◯px ◯px; (上下),(左右)
margin: ◯px ◯px; 上,(左右),下
margin: ◯px ◯px; 上,右,下,左

パソコンでのレイアウトを調整する

スマートフォン用のレイアウトデザインが終わったらパソコン用のデザインを調整していきましょう。

パソコン用とスマホ用の表示が一緒になってしまうのを防ぐために、メディアクエリでの表示切り替えについて先に少しご説明します。

CSSのメディアクエリについて

レスポンシブデザインのサイトでは、メディアクエリによってブレイクポイントを設定することで表示を切り替えることができます。

headタグに『viewport』のmetaデータを入れることで、ブラウザの幅を判別しブレイクポイントで表示を切り替わります。

メディアクエリを使うためには、下記のように記述しましょう。

/*css*/
@media (min-width: 768px){
/*適応させたいcssを記述*/
}

上記のように『@media(適応させる上限・下限){}』という形で記述します。()の中の上限・下限は任意ですが記述により全く意味が変わりますので注意してください。
今回のテンプレート作成で使用するのは2種類です。

min-width: ◯px →◯px以上のスタイルに適応
max-width: ◯px →◯px以下のスタイルに適応

また、今回デモ作成しているテーマではブレイクポイントとして下記の4つを使用していきます。
min-width: 768px(768px以上のスタイルに適応)
min-width: 600px(600px以上のスタイルに適応)
max-width: 767px(767px以下のスタイルに適応)
max-width: 599px(599px以下のスタイルに適応)

各メディアの横幅のサイズは下記の通りですので表示を切り替えたいメディアに合わせて調整してください。

各メディアの横幅サイズについて
375px → iPhone7,6S,6
414px → iPhone7+,6s+,6s
320px → iPhone5,5S
768px → iPad,mini,Air,Nexus9
360px → GALAXY S5,S4 Xperia Z5,Z4
600px → Nexus7

boxを横に並べる

今回作成する、WordPressテーマのスマートフォン用とパソコン用の骨組みのレイアウトの大きな違いは、コンテンツとサイドバーが一列になるか横に並ぶかです。

PC版のレイアウトを調整するときは、@mediaの中にボックスを横に並べるcssを記述していきましょう。

style.cssに記述

@media (min-width: 768px) {
/*コンテンツとサイドバーを横に並べる*/
.container:after {
display: block;
clear: both;
content: '';
}
.contents {
float: left;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 70%;
}
#sidebar {
float: left;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 30%;
padding-left: 30px;
}
}

上記のcssでボックスを横に並べることができます。

<contents>と<sidebar>をfloat: leftで浮かせてボックスを横に並べます。2つのボックスの横幅は、ブラウザの幅に合わせて動くように%で指定しましょう。

二つのBOXの余白は、必ずpadding指定してください。marginで開けようとすると%の微調整が必要になるのでborder-boxでpaddingの幅も要素に含めるようにすると簡単に調整することができますよ。

テーマを表示させてみて上記の画像のように横並びになっていれば、パソコン用の骨組みのレイアウトの作成は完了です。

floatとは?
floatで要素を浮かせることによって2つのBOXを横並びにすることができます。ただし、flotは親要素に影響を与えるためきちんと記述しないとデザインが崩れてしまう可能性がありますので注意してください。

親要素の高さがなくなってしまったときにclearfixを使用することで高さを取り戻すことができます。

/*float時のcss*/
親要素:after	{contents: "" ;
display: block ;
clear: both ;}
BOX-A {float: left ;}
BOX-B {float: left ;}

floatを使ったら必ずclearfixを適応させることを忘れずに覚えておきましょう。

box-sizing:border-box ;について
border-boxを使用することで、paddingを要素の元のサイズの中に入れ込むことができますが、paddingが入り込んだぶん元の要素は小さくなります。

box-sizingは新しいプロパティなので、使用変更や廃止の可能性があり、ベンダープレフィックスを付けることが推奨されています。

box-sizing: border-box ; /*通常の記述*/
-webkit-box-sizing: border-box ; → /*Google ChromeやSafariの機能を利用*/
-moz-box-sizing: border-box ; → /*Firefoxの機能を利用*/

サイトのレイアウトは、WordPressテーマの全体のイメージを決める大切な部分です。全体の構成は、テーマ全体に影響を及ぼしますので、ある程度イメージしてレイアウトを考えてください。

もちろん、最初から全てイメージできるわけでは無いので、細かい調整は要素を入れてからでも問題ありません。

次回は、サイトの共通部分であるheader.phpを編集し、headerを作成していきます。