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

スポンサードリンク

関連コンテンツ

オススメ記事

enchant.js

HTML5 と javascript ( enchant.js )を使ったアクションゲーム開発。

以前、Flashを使って、横スクロールアクションゲームを作ろうとしていたのですが、実はAndroid4.xではFlashPlayerがサポートされておらず、最近のAndroidではFlashPlaye

bootstrap3

Bootstrap3でサイトのレイアウト。グリッドシステムの使い方と裏技。

開発中のゲームはサイト制作に入っております。@It_is_Rです。 前回に引き続き、Bootstrap3の記事です。 サイトを作るとき、CSSなどを使ってサイトのレイアウトを調節したりしますが

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

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

これから作る WordPress のテーマをローカルサイトに適用させる。

WordPress と AliExpress って混乱しますよね。@It_is_Rです。せーへんわ。 WordPress テーマ自作シリーズ、第三回目です。 前回までで、ローカルで Wor

FC2 blog customize

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

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

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

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

wordpress

WordPress管理画面のテーマカスタマイザーに独自の項目を追加。

WordPressみたいに私自身の人生もカスタムできたらいいのに。@It_is_Rです。 WordPressのカスタマイズは、公開しているサイトだけではありません。 管理画面をカスタマイズする

WordPress|特定カテゴリーに属する記事を一覧表示させる方法!!

今まで、何度かに分けて書いた記事でも、その一覧がなかったので見にくいなーと思っていた@It_is_Rです。 昨日、記事の一覧表示をするショートコードを作って、記事の一覧が欲しい記事にだけ貼り付けてみ

zplug を使ってプラグインをインストール、管理する。

二つのことを同時にできない、@It_is_Rです。 今回はターミナルをかっこよくするシリーズ、第三回目です。 zplug を使って、プラグインをインストールする方法を紹介します。

WordPress|ショートコードの作り方&使い方。確実に使いこなす為のガイド。

前回、WordPressで、特定のカテゴリ一覧を表示する方法について書きました。 改めまして、@It_is_Rです。 特定のカテゴリ一覧を表示したとき、ショートコードというものを使いましたが、

コメントをどうぞ!

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