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 テーマ自作 | サイト全体のレイアウトを整える。

スポンサードリンク

関連コンテンツ

オススメ記事

WordPress テーマ自作 | 本格的に作りたい人が揃えるべきツールや知識。

時計を見るとなぜか悲しくなります。@It_is_Rです。 今回から、いくつかの記事に渡って、 WordPress のテーマ(テンプレート)を自作する方法を紹介していきたいと思います。 しかし、

WordPress

無料で広告なしのWordPressサイトを立ち上げる方法。

猫を飼っています。でも犬派です。何か文句ありますか? …まぁ、最終的に動物全般が好きなんです。爬虫類から哺乳類、鳥類まで好きです。動物を飼っている人、今すぐ写真を@It_is_Rに送り付けて下さい。

Swift

【Xcode7】Storyboardを使ってMacアプリ開発に挑戦。

何だか今日はトイレが近い。@It_is_Rでございます。 現在開発中の人魚のゲームは今ストーリーを練っている所です。まだまだ時間がかかりそうです。 さて、Rは今、Macアプリ開発を勉強中なので

WordPress テーマ自作!投稿ページ、固定ページの作り方。

サンタは何故お爺さんなんでしょうか。@It_is_Rです。 今年からサンタのギャルにしましょう。 WordPress テーマ自作シリーズ第7回目です。 今回は、投稿ページと固定ページを作って

【Gitの使い方 – その1】GitHubのアカウントを取得する方法!

Gitを使うとバージョン管理が簡単になりますが、それ以前に自分の頭の中を管理するのが大変な@It_is_Rです。 Gitの使い方をいくつかの記事に分けて紹介していきたいと思います。 まず今回は

WordPress テーマの基本構成と読み込まれるファイルの優先順位。

ドラクエとかにテンプレートっていう武器ありそうですね。@It_is_Rです。 WordPress テーマ自作シリーズ第4回目です。 今回はテーマを作成する上で、重要な知識を書いていこうと思いま

Swift

【Xcode7】Swift2でMacアプリ開発。Storyboardでボタンを作る。

喧嘩するほど仲がいいとは言いますが、喧嘩する相手がいません。友達がいないということでしょうか。@It_is_Rです。 前回、StoryboardでMacのウィンドウに文字を表示しました。しかし、

キーボードで画像を動かすよ!

小学生からのJavaScript入門。キー入力でキャラを動かしてみよう!

小学生からのプログラミング入門講座(にゅうもんこうざ)、第7弾です。 前回はHTMLでりこちゃんの画像を表示し、クリックすると前に一歩動くというのをJavaScriptで作りました。 Java

enchant.js

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

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

WordMove | 運用中の WordPress 環境をローカルと FTP で同期

道が覚えられない、@It_is_Rです。 人生さえ彷徨い続けてここにいます。 さて、運用中の WordPress サイトの環境を、ローカル開発環境と同期したい時、 WordMove を使うとと

コメントをどうぞ!

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