公開日:2017年8月22日Plusers作成中のWordPressテーマのデモサイトはこちらWordPressに骨組みテーマをアップロードしたら、全体のレイアウトをCSSで整えていきます。全体のデザインを決める大事な部分なので、サイトの形をしっかりと決めてCSSで配置やデザインをレイアウトしていきましょう。今回は、テーマの骨組みテンプレートを可視化し、サイト全体の構成をレスポンシブデザインにレイアウトする方法をご紹介します。CONTENTSサイトの構成をイメージするサイトのワイヤーフレームとデザインを作成するワイヤーフレームを作成するデザインを作成する現在の表示をブラウザで確認できるようにするテーマの各要素をレイアウトするパソコン用のレイアウトを調整するタブレット用のレイアウトを調整するスマートフォン用のレイアウトを調整するサイトの構成をイメージする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』でその他のテンプレートはその中で呼び出して使用します。?>←footer.phpを呼び出し各構成についてしっかりと把握できたら、サイトのレイアウトを考えてみましょう。今回は、下記のようなスタンダードな形のサイトを作成していきたいと思います。作成するサイトの構成を決めたら、もう少し掘り下げてサイトの構成を考えていきます。ブログのテーマを作成する場合、画面幅いっぱいにサイト幅を広げてしまうと、横に伸びて読みづらくなってしまうので最大幅を1000px~1200pxぐらいにしておきましょう。sidebarの背景色を別々に変更できるように設置しておいた方がカスタマイズするときに楽なので、前回の『1.WordPressテーマの骨組みとなるテンプレートファイルを作成する』のテンプレート作成時に記述しておいたinner要素に幅を指定します。それを踏まえて簡単なサイズを入れ込んだフレームを書くと下記のようになります。ここまで決めたら、サイトの詳細をさらに細かく作成していきましょう。サイトのワイヤーフレームとデザインを作成するレイアウトがきまったら、実際に出力するコンテンツを決めるワイヤーフレームを作成し、それをベースにサイトのデザインを画像編集ソフトで作成していきます。自分自身のサイトを作成する際は、ワイヤーフレームやデザインを起こさずに、コーディングしながらレイアウトやデザインを作成してもOKです。事前にワイヤーフレームやデザインを作成しておくことで、サイトの完成図がイメージしやすくなります。コンテンツの配置忘れを防止し効率よくコーディングをすることができるので、手書きの簡単なワイヤーフレームだけでも良いので作成することをオススメします。ワイヤーフレームを作成するまずは、ワイヤーフレームを作成しましょう。ワイヤーフレームは、レイアウトやコンテンツの配置を決める設計図です。自分のサイトに出力したいコンテンツの配置を決めていきます。今回作成するWordPressテーマのPC版のワイヤーフレームは下記のようになります。(画像クリックで大きい画像を表示できます。パソコン版の順で作成したり、どちらか片方だけ作成しても大丈夫です。神経質にならずに自由に作成しましょう。デザインを作成するワイヤーフレームが完成したら、それを元にサイトのデザインをデザイン作成ソフトで作成しましょう。デザインを起こす前に、トンマナ(デザインに一貫性を持たせるためのカラーや雰囲気などの決めごと)を設定しておくとデザインがやりやすくなりますよ。コーディングが得意な場合は、デザインを作成せずにコーディングと一緒にデザインを整えても良いかもしれません。コーディングと一緒にデザインを行う場合は、各ページのバランスが崩れないように注意してください。今回は、TOPページ・アーカイブページ・記事ページのデザインを下記のように作成しました。(画像クリックで大きい画像を表示できます。)デザイン(またはワイヤーフレーム)が完成したら、それをベースにWordPressテーマを作成していきましょう。現在の表示をブラウザで確認できるようにする現在の状態でCSSを編集しても、要素が何も入っていない状態なのでブラウザで目視することができません。CSSで全体の構成を調整する前に仮のCSSを設定し、ブラウザで目視できるようにするとイメージしやすく作業が楽になります。仮のCSSを挿入するときは、一時的に各コンテンツに高さと背景色を指定して各要素をブラウザで確認できるようにします。}/*------------------------*/※一時的に適応させるCSSなのでカラーは適当で大丈夫です。自分のわかりやすいように設定してください。上記のCSSを挿入すると下記のように、各ボックスに高さとカラーが設定され各要素が把握しやすくなります。テーマの各要素をレイアウトする一時的なCSSを入れただけの今の状態では、各要素がブラウザの幅いっぱいに表示されている状態です。『header-inner』『footer-inner』『container』に最大幅を設定して、実際のサイト幅に合わせブラウザの中央に表示されるようにCSSを調整しましょう。1.25rem;}最大幅を指定することで、親要素である『body』・『header』・『footer』の要素のみブラウザ幅いっぱいに広がり、中身のコンテンツは指定している最大幅を最大値として表示されるようになります。最大幅を設定するのと一緒に『padding』も指定しています。この『padding』は、ブラウザの表示サイズが最大幅以下になったときに、要素がブラウザにくっついてしまうのを防止するために設定しています。border-box』は、『padding』を最大幅に含めるために設定しています。最大幅に含めない場合は、削除してください。上記の画像のように、指定した最大幅で『header-inner』『footer-inner』『container』が止まっているかを確認してください。表示されたら、スマートフォンでのレイアウトを調整します。marginとpaddingborderを境界としてmarginは外に幅をとるのに対し、paddingは中に幅をとります。marginやpaddingは幅を増やしたら増やした分だけ領域が大きくなっていきますので注意しましょう。paddingは境界線の内側にかかるので、backgroundなどの要素にかかる効果が適応されるのに対し、marginは外側になるので効果はかかりません。marginにしかない機能として、隣接する要素のmargin同士は、相殺され数字が大きい方だけが適応されるので注意してください。marginとpaddingはtop,bottom,right,leftなどの位置を指定する他にも、省略して記述することができます。『box-sizing:border-box』についてborder-boxを使用することで、paddingを要素の元のサイズの中に入れ込むことができますが、paddingが入り込んだぶん元の要素は小さくなります。/*通常の記述*/}パソコン用のレイアウトを調整するPC表示では、コンテンツとサイドバーが横並びになるようにレイアウトします。27%;}上記のcssでボックスを横に並べることができます。left;』で浮かせてボックスを横に並べます。2つのボックスの横幅と余白は、ブラウザの幅に合わせて自動でサイズが調整されるように『%』で指定しましょう。『contents』『sidebar』『contentsとsidebarの余白』の合計が100%になるように調整してください。横並びにする記述とあわせて『container』の縦の『padding』をデザインに合わせて広げています。テーマをブラウザで表示させてみて上記の画像のように横並びになっていれば、パソコン用のレイアウトは完了です。floatとは?floatで要素を浮かせることによって2つのBOXを横並びにすることができます。flotは親要素に影響を与えるため、きちんと記述しないとデザインが崩れてしまう可能性がありますので注意してください。親要素の高さがなくなってしまったときにclearfixを使用することで高さを取り戻すことができます。left;}floatを使ったら必ずclearfixを適応させることを忘れないようにしてください。タブレット用のレイアウトを調整する今回、タブレット用のデザインは作成していませんが、レスポンシブデザインのサイトでは、タブレットで表示されたときの表示も忘れずに考えなければいけません。タブレットのレイアウトは、PC表示とスマホ表示の中間を意識して調整しましょう。レイアウトの調整では、PCの横並びのレイアウトを解除して本来の縦並びに戻るようにCSSを記述します。※タブレットの表示は、各ブラウザーのデベロッパーツールを使用することで確認することができます。デベロッパーツールは基本的には『F12』キーで表示できます。}}特定の画面サイズ以下または以上にCSSを指定したい場合はCSSのメディアクエリ『@media』を使用して記述します。none;』で解除してください。同時に、各自指定した幅も打ち消します。CSSのメディアクエリについてレスポンシブデザインのサイトでは、headタグに『viewport』のmetaデータを入れることで、ブラウザの幅を判別しブレイクポイントで表示を切り替えることができるようになります。initial-scale=1.0">メディアクエリを使うためには、『@media』を使ってブレイクポイントを指定し、その中に通常と同じようにCSSを記述していきます。800px){/*適応させたいcssを記述*/}上記のように『@media(適応させる上限または下限){}』という形で記述します。()の中の上限・下限は任意ですが記述により全く意味が変わりますので注意してください。各メディアの横幅のサイズ例です。表示を切り替えたいメディアに合わせて調整してください。GALAXYやXperiaなどスマートフォン用のレイアウトを調整するスマートフォンのレイアウトはタブレットのレイアウトと同じなため、全体のサイズ感のみ調整します。※スマートフォンの表示は、各ブラウザーのデベロッパーツールを使用することで確認することができます。デベロッパーツールは基本的には『F12』キーで表示できます。}}今回デモで作成するWordPressテーマでは、『rem』で数値を指定していきます。『rem』は、全体の基準となるサイズに対してどのくらいのサイズになるかという指定方法です。基準を『16px』にして『0.75rem』と指定したら、『16*0.75=12px』になります。〇〇px;}』で指定します。上記のCSSでは、PCの指定サイズ『16px』からスマートフォン表示になったとき『15px』に基準サイズを小さくしています。数値を『rem』で指定しておくことで、全体の基準サイズの指定を変えるだけで簡単に全体のサイズ(font-sizeやmargin・padding)を一括で調整することができますので、ぜひ使用してみてください。サイトのレイアウトは、WordPressテーマの全体のイメージを決める大切な部分です。全体の構成はテーマ全体に影響を及ぼしますので、デザインを起こさずに作成する場合も、ある程度イメージしてレイアウトを考えてください。あとから調整を加えても問題ありませんのであまり神経質になる必要はありません。次回は、サイトの共通部分であるheader.phpを編集し、WordPressテーマで共通で表示されるヘッダー部分を作成していきます。下記より記事で作成したところまでのテーマファイルを下記よりダウンロードできます。『7.SEOやSNS用にWordPressのheadタグを編集し内部的に最適化する』内のディスクリプションの出力方法を変更しました。『7.SEOやSNS用にWordPressのheadタグを編集し内部的に最適化する』内のコードを修正しました。2019年9月21日WordPressテーマ作成の記事の内容をリニューアルしました。