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

|
作成中の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の背景色を別々に変更できるように設置しておいた方がカスタマイズするときに楽なので、前回の『1.WordPressテーマの骨組みとなるテンプレートファイルを作成する』のテンプレート作成時に記述しておいたinner要素に幅を指定します。

それを踏まえて簡単なサイズを入れ込んだフレームを書くと下記のようになります。

WordPressテーマサイズ

ここまで決めたら、サイトの詳細をさらに細かく作成していきましょう。

サイトのワイヤーフレームとデザインを作成する

レイアウトがきまったら、実際に出力するコンテンツを決めるワイヤーフレームを作成し、それをベースにサイトのデザインを画像編集ソフトで作成していきます。

自分自身のサイトを作成する際は、ワイヤーフレームやデザインを起こさずに、コーディングしながらレイアウトやデザインを作成してもOKです。

しかし、事前にワイヤーフレームやデザインを作成しておくことで、サイトの完成図がイメージしやすくなります。コンテンツの配置忘れを防止し効率よくコーディングをすることができるので、手書きの簡単なワイヤーフレームだけでも良いので作成することをオススメします。

ワイヤーフレームを作成する

まずは、ワイヤーフレームを作成しましょう。ワイヤーフレームは、レイアウトやコンテンツの配置を決める設計図です。自分のサイトに出力したいコンテンツの配置を決めていきます。

今回作成するWordPressテーマのPC版のワイヤーフレームは下記のようになります。(画像クリックで大きい画像を表示できます。)

PC版ワイヤーフレーム

長くなってしまうため、今回はスマホ版のワイヤーフレームのご紹介は割愛させていただきますが、スマートフォン版 → パソコン版の順で作成したり、どちらか片方だけ作成しても大丈夫です。あまり神経質にならずに自由に作成しましょう。

デザインを作成する

ワイヤーフレームが完成したら、それを元にサイトのデザインをデザイン作成ソフトで作成しましょう。

デザインを起こす前に、トンマナ(デザインに一貫性を持たせるためのカラーや雰囲気などの決めごと)を設定しておくとデザインがやりやすくなりますよ。

コーディングが得意な場合は、デザインを作成せずにコーディングと一緒にデザインを整えても良いかもしれません。コーディングと一緒にデザインを行う場合は、各ページのバランスが崩れないように注意してください。

今回は、TOPページ・アーカイブページ・記事ページのデザインを下記のように作成しました。(画像クリックで大きい画像を表示できます。)

PC版ワイヤーフレーム

デザイン(またはワイヤーフレーム)が完成したら、それをベースにWordPressテーマを作成していきましょう。

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

現在の状態で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を挿入すると下記のように、各ボックスに高さとカラーが設定され各要素が把握しやすくなります。

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

一時的なCSSを入れただけの今の状態では、各要素がブラウザの幅いっぱいに表示されている状態です。

まずは、『header-inner』『footer-inner』『container』に最大幅を設定して、実際のサイト幅に合わせブラウザの中央に表示されるようにCSSを調整しましょう。

style.cssに記述 
/*コンテンツのサイズ指定*/
.header-inner,
.container,
.footer-inner {
  box-sizing: border-box;
  max-width: 1200px;
  margin-right: auto;
  margin-left: auto;
  padding: 1.25rem;
}

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

また、最大幅を設定するのと一緒に『padding』も指定しています。この『padding』は、ブラウザの表示サイズが最大幅以下になったときに、要素がブラウザにくっついてしまうのを防止するために設定しています。

上記CSSの『box-sizing: border-box』は、『padding』を最大幅に含めるために設定しています。最大幅に含めない場合は、削除してください。

上記の画像のように、指定した最大幅で『header-inner』『footer-inner』『container』が止まっているかを確認してください。正しく表示されたら、スマートフォンでのレイアウトを調整します。

marginとpadding

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

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

marginにしかない機能として、隣接する要素のmargin同士は、相殺され数字が大きい方だけが適応されるので注意してください。

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

  • margin： ◯px; 上下左右
  • margin： ◯px ◯px;　(上下),(左右)
  • margin： ◯px ◯px ◯px;　上,(左右),下
  • margin： ◯px ◯px ◯px ◯px;　上,右,下,左

『box-sizing:border-box』について

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

.sample {
  box-sizing: border-box ; /*通常の記述*/
}

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

PC表示では、コンテンツとサイドバーが横並びになるようにレイアウトします。

style.cssに記述 
.container {
  padding: 2rem 1.25rem;
}

.container:after {
  display: block;
  clear: both;
  content: '';
}

.contents {
  float: left;
  width: 70%;
  margin-right: 3%;
}

.sidebar {
  float: left;
  width: 27%;
}

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

<contents>と<sidebar>を『float: left;』で浮かせてボックスを横に並べます。2つのボックスの横幅と余白は、ブラウザの幅に合わせて自動でサイズが調整されるように『%』で指定しましょう。

『contents』『sidebar』『contentsとsidebarの余白』の合計が100%になるように調整してください。

また、横並びにする記述とあわせて『container』の縦の『padding』をデザインに合わせて広げています。

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

floatとは？

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

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

/*float時のcss*/
親要素:after {
  content: "";
  display: block;
  clear: both;
}

BOX-A {float: left;}

BOX-B {float: left;}

floatを使ったら必ずclearfixを適応させることを忘れないようにしてください。

タブレット用のレイアウトを調整する

今回、タブレット用のデザインは作成していませんが、レスポンシブデザインのサイトでは、タブレットで表示されたときの表示も忘れずに考えなければいけません。

タブレットのレイアウトは、PC表示とスマホ表示の中間を意識して調整しましょう。レイアウトの調整では、PCの横並びのレイアウトを解除して本来の縦並びに戻るようにCSSを記述します。

※タブレットの表示は、各ブラウザーのデベロッパーツールを使用することで確認することができます。デベロッパーツールは基本的には『F12』キーで表示できます。

style.cssに記述 
@media(max-width: 800px) {
  .contents,
  .sidebar {
    float: none;
    width: 100%;
    margin-right: 0;
  }

  .contents {
    margin-bottom: 1.5rem;
  }
}

特定の画面サイズ以下または以上にCSSを指定したい場合はCSSのメディアクエリ『@media』を使用して記述します。(下で詳しく説明)

floatを解除するときは、『float: none;』で解除してください。また同時に、各自指定した幅も打ち消します。

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

レスポンシブデザインのサイトでは、headタグに『viewport』のmetaデータを入れることで、ブラウザの幅を判別しブレイクポイントで表示を切り替えることができるようになります。

headタグ内に記述 
<meta name="viewport"
content="width=device-width, initial-scale=1.0">

メディアクエリを使うためには、『@media』を使ってブレイクポイントを指定し、その中に通常と同じようにCSSを記述していきます。

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

上記のように『@media（適応させる上限または下限）{}』という形で記述します。（）の中の上限・下限は任意ですが記述により全く意味が変わりますので注意してください。

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

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

各メディアの横幅の実際の表示サイズについて
  • 375px → iPhoneX,iPhone8,iPhone7,6S
  • 414px → iPhone8Plus,7Plus,6sPlus
  • 320px → iPhone5,5S
  • 768px → ipadやipad mini
  • 1024px → ipad Pro
  • 360px → GALAXYやXperiaなど

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

スマートフォンのレイアウトはタブレットのレイアウトと同じなため、全体のサイズ感のみ調整します。

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

style.cssに記述 
@media(max-width: 600px) {
  html {
    font-size: 15px;
  }

  .header-inner,
  .container,
  .footer-inner {
    padding: .8rem;
  }

  .contents {
    margin-bottom: 1rem;
  }
}

今回デモで作成するWordPressテーマでは、『rem』で数値を指定していきます。『rem』は、全体の基準となるサイズに対してどのくらいのサイズになるかという指定方法です。

例えば、基準を『16px』にして『0.75rem』と指定したら、『16*0.75=12px』になります。

全体の基準となるサイズは、『html {font-size: 〇〇px;}』で指定します。上記のCSSでは、PCの指定サイズ『16px』からスマートフォン表示になったとき『15px』に基準サイズを小さくしています。

数値を『rem』で指定しておくことで、全体の基準サイズの指定を変えるだけで簡単に全体のサイズ(font-sizeやmargin・padding)を一括で調整することができますので、ぜひ使用してみてください。

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

もちろん、あとから調整を加えても問題ありませんのであまり神経質になる必要はありません。

次回は、サイトの共通部分であるheader.phpを編集し、WordPressテーマで共通で表示されるヘッダー部分を作成していきます。

下記より記事で作成したところまでのテーマファイルを下記よりダウンロードできます。

2.までで作成したテーマ ダウンロード
WordPressテーマ作成3へ