1. HOME
  2. »
  3. プログラミング・Web
  4. »
  5. WordPress
  6. »
  7. WordPress テーマ自作 | サイト全体のレイアウトを整える。

WordPress テーマ自作 | サイト全体のレイアウトを整える。

水を飲む時、口に入れすぎてしまう@It_is_Rです。

WordPressテーマ自作シリーズ第11回目です。
今回は、サイト全体のレイアウトを整えてみましょう。

このシリーズの前回の記事はこちらです。
WordPress テーマ自作 | functions.php から CSS を読み込む方法。

サイトのレイアウトについて

今回はブログで一番多い(と思われる)、下の様なレイアウトを作ってみようと思います。
サイトレイアウト

Normalize.cssを読み込む

リセットCSSを読み込みます。自分の好きなものを使えばいいと思います。
こちらの記事を参考にしてください。
リセットCSS は何を使う? 2018年ランキング5選紹介。

とりあえず私はNormalize.cssを使っていきます。
読み込み方についてはこちらの記事を参考にしてください。
【 gulp 】 超便利! Sass で Normalize.css などをインポートする方法。

sassファイルを作る

SMACSSやFLOCSSといったコーディングルールがありますが、今回はその考え方を取り入れたいと思います。
今回はレイアウトを作っていきたいので、layoutフォルダを作成し、その中にsassファイルを作っていきます。

今回はheader, main, sidebar, footerといったふうに分けたいので、

_header.sass
_main.sass
_sidebar.sass
_footer.sass

などといったファイルを作成します。
SASSかSCSSかなどは、好きなものを選べばいいと思います。

それぞれのレイアウト

ではそれぞれのレイアウトを作っていきましょう。

ヘッダー部分

header.pug ファイルの一部分です。

header#header
	.p-header
		h1.p-header__ttl
			a(href!="" rel="home")
				:php
					the_custom_logo();
					if (!has_custom_logo()) {
						bloginfo('name');
					}
//省略

レイアウトに関しては、idを使うかclassを使うかは自由です。
classを使う場合は、l-headerなどのように、一目でレイアウトだと分かるクラス名がいいでしょう。

一応headerというidををつけましたが、今の時点では特にスタイルを当てる必要はなさそうです。

メイン部分

index.pug ファイルの一部です。

:php get_header();
main#main
	:php
		if (is_single() || is_page()) :
		while(have_posts()) :
		the_post();
	article.p-article
		header.p-article__header
			h1.p-article__ttl
				:php the_title();
//省略

layout/_main.sass

#main
  width: 740px
  display: inline-block

メイン部分とサイドバーは、横並びにしたいので、幅とdisplay: inline-blockを使います。

サイドバー部分

sidebar.pug ファイルです。

:php
	if (is_active_sidebar('sidebar')) :
aside#sidebar(role="complementary")
	.p-sidebar
		:php
			dynamic_sidebar('sidebar');
			endif;

layout/_sidebar.sass

#sidebar
  width: 300px
  display: inline-block
  vertical-align: top

サイドバーも同様に、メイン部分と横並びにしたいので、display: inline-blockを使います。
また上に揃えたいので、vertical-align: topも使います。

フッター部分

sidebar.pug ファイルです。

footer#footer
	.p-footer
		div.p-footer__copyright
			small Copyright ©  All Rights Reserved
| </div>
:php wp_footer();
| </body>
| </html>

フッター部分も、今の所スタイルをあてる必要はなさそうです。

今の時点で、サイトはこのようになります。
分かりやすいように、色をつけてあります。
wordpress

メイン部分とサイドバーを中央寄せ

メイン部分とサイドバーを中央寄せしていきます。

メイン部分とサイドバーをdivで囲って、idを#contentとしました。

index.pug

:php get_header();
#content
	main#main
		:php
			if (is_single() || is_page()) :
			while(have_posts()) :
			the_post();
		article.p-article
		//〜〜〜〜〜省略〜〜〜〜〜〜〜〜〜〜〜〜
	:php get_sidebar();
:php get_footer();

layout/_content.sass

#content
  text-align: center

また、この方法では#content内の要素が全て中央寄せされてしまいます。
なので、#mainや#sidebarには、text-align: leftを使う必要があります。
wordpress

まとめ

今回はサイト全体のレイアウトを整える方法を紹介しました。
ここまで完成すれば、あとは自分の好きな様にスタイルをあてて、好きなようにサイトを作っていけばいいと思います。

このシリーズの記事が、WordPressサイトを作るお役に立てることができればと思います。

この企画の一覧はこちら

  1. WordPress テーマ自作 | 本格的に作りたい人が揃えるべきツールや知識。
  2. WordPress のテーマ開発に絶対必須な gulp プラグイン9選!
  3. これから作る WordPress のテーマをローカルサイトに適用させる。
  4. WordPress テーマの基本構成と読み込まれるファイルの優先順位。
  5. WordPress テーマ自作 | Pug ( Jade ) で記事一覧ページを作る方法!
  6. WordPress にウィジェット(サイドバー)を追加する方法。
  7. WordPress テーマ自作!投稿ページ、固定ページの作り方。
  8. 【 WordPress 】functions.php で色んな機能を使ってみよう!【基本】
  9. カスタムロゴの使い方。 WordPress サイトのタイトルを画像に変更!
  10. WordPress テーマ自作 | functions.php から CSS を読み込む方法。
  11. WordPress テーマ自作 | サイト全体のレイアウトを整える。

スポンサードリンク

関連コンテンツ

オススメ記事

【Gitの使い方 – その5】リモートリポジトリ(GitHub)へPushしてみよう!

現在、新曲熱意制作中の@It_is_Rです。 さて、Gitの使い方5回目の今回は、GitHubのリモートリポジトリを作成し、そこにローカルリポジトリをPushする方法を紹介します。 [se

enchant.js

enchant.js でクラスを作る、激分かりやすい方法!

こんばんわ、ちょっと海外へ行っておりました@It_is_Rです。 前回までの enchant.js の記事で、画像の表示やキャラの移動など、ゲーム制作には欠かせない基礎知識が身についたのではない

FC2 blog customize

FC2ブログ ”最強” カスタマイズ入門講座。文字の大きさを設定する。

こんにちわ。美しいものほど濁って見える@It_is_Rです。 今回もFC2ブログの"最強"カスタマイズを始めていこうと思います。 今回は文字の大きさや色など、ブログ内の文字の設定をしていきます

scratch

小学生から始めるScratch入門。シューティングゲームを作ろう!

小学生から始めるScratch入門です。 前回、ゲーム開発に必要な知識を学びました。 第3回目の今回は、これまでに学んだ知識を活用し、実際にシューティングゲームを作ってみようと思います。

【CSS設計】ボタンを作って覚える。機能ごとに分けて作る重要性。

手が回らない、頭が回らない、口が回らない。@It_is_Rです。 CSSはある程度大雑把に書いても動かすことができます。しかし、CSSを覚える上で一番難しい部分と言えばCSS設計でしょう。 パ

enchant.js

ゲームに背景画像を表示する方法!( enchant.js )

こんばんわ、@It_is_Rです。 ゴールデンウィークいかがお過ごしでしょうか。 今回は、 enchant.js を使った横スクロールアクションゲームの背景を表示してみようと思います。 空と

小学生からのJavaScript入門。画像の表示と移動をしてみよう!

小学生からのJavaScript入門、第3弾です。 今回はゲーム開発(かいはつ)へもう一歩踏み込んでみましょう! [serif icon="aru-s.jpg" name="アル"]うーん……

enchant.jsのロード画面を、好きな画像に変更する方法。

今日は爆睡していました。@It_is_Rです。 enchant.jsのロード画面はカッコわるいなとずっと思っていました。「あ、これenchant.jsで作ったんだな」って思われてしまうじゃないで

HTML5とCanvasを使うべ!

小学生からのJavaScript。HTML5とCanvasを使ってみよう!

小学生からのプログラミング講座(こうざ)、第9弾です。 これまでの講座(こうざ)では、JavScriptの基本(きほん)について学び、キャラクターの操作(そうさ)ができるようになりました。 こ

java

Eclipseによる、Javaでじゃんけんゲームプログラムの作り方

※追記(2018/8/29) より分かりやすい記事になるよう修正しました。 今回はJavaを使って、じゃんけんゲームを作る方法を紹介します。 eclipseがインストールされ

コメントをどうぞ!

メールアドレスが公開されることはありません。