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.js100行未満!!本格シューティングゲーム作り方。

昨日歩き回ったせいで、足がかなり痛い@It_is_Rです。 さて、今回はenchant.jsのネタです。enchant.jsを使うと、javascriptのプログラムがものすごく簡単に書けてしま

wordpress

【WordPress】パンくずリストをプラグイン無しで自作する方法

※追記(2018/2/12) もっと高機能になるように、改良修正しました。 人生で3回ほど死にそうになったことがある@It_is_Rです。 WordPressのパンくずリストを作

【Gitの使い方 – その2】GitをMacにインストールする方法!

いらないファイルは残っているのに、欲しいファイルに限って見つからない@It_is_Rです。 Gitの使い方、第2回目の今回はGitをMacにインストールする方法を紹介します。

カスタムロゴの使い方。 WordPress サイトのタイトルを画像に変更!

笑いたい時に笑えず、笑っちゃいけない時に笑えてくる@It_is_Rです。 WordPress テーマ自作シリーズ第9回目となります。 今回はカスタムロゴの使い方を紹介したいと思います。

WordPress

WordPressカスタマイズ。テンプレートのファイル構成をチェック。

二兎を追う者は一兎をも得ず。でも、三兎を追えばそのうちの一兎ぐらい得られるんじゃ無いかと思い、その努力の割に何も得られないのが@It_is_Rです。やかましいわ。 今回の記事は初のWordPre

JavaScriptマンガ講座。初心者でも痛いほど理解できる変数の使い方。(実践編)

押入れが部屋になっている@It_is_Rです。 今回の記事はJavaScriptマンガ講座、2回目となりました。 この企画はJavaScriptをフザケまくって覚えようというものです。

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

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

bootstrap3

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

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

wordpress

WordPress にウィジェット(サイドバー)を追加する方法。

サイドバーというより、頭がパーな@It_is_Rです。やかましいわ。 WordPress テーマ自作シリーズ、早くも第6回目です。 今回はウィジェット(サイドバー)を追加する方法を紹介します。

ショートコード

BEMによるCSS設計の方法を解説。命名規則から使い方まで。

完璧を求めすぎて、平均以下な@It_is_Rです。 CSSは比較的簡単なものですが、CSS設計をしっかりしておかなければ、余分なコードが多くなったり、後から修正が大変になったりしてこまることにな

コメントをどうぞ!

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