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

スポンサードリンク

関連コンテンツ

オススメ記事

【Android Studio】じゃんけんゲームの作り方(アプリ開発の基本)

限りなくじゃんけんが弱い@It_is_Rです。 Androidアプリ開発、11回目となりました。 そろそろ何かアプリを作ってみたいですよね。基本は大事ですが、一番つまらないですね。 そこ

【Gitの使い方 – その4】ブランチを使って履歴を分岐させる方法

エビの殻や、ポテチ、煮干しなどを食べると、必ずと言っていいほど口が血だらけになります。@It_is_Rです。 さて、Gitの使い方4回目の今回は、ブランチについてです。 ブランチは作業を枝分か

java

【激分かりやすく!!】javaでじゃんけんゲームプログラム!!

お久しぶりです。 ゲーム制作ページのブログなのに、なんか全然ゲーム制作できてないですね。 今作ってるゲームもちょっと放置プレイ状態だし……。 ちょっと待ったー!誰が放置プレイ状態だとっ!! 

java

【Java】スーパクラス、サブクラスとは?継承について。

猿も木から落ちますが、Rは木から落ちません。だって登らないから。 @It_is_R です。いや、登ろうと思っても登れません。 Javaを使っていると継承という言葉をよく耳にしますよね。どういうも

enchant.js

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

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

WordPressカスタムヘッダーを完璧に使いこなしたい人へ告ぐ!

森の中に昔から住んでる@It_is_Rです。 WordPressのカスタマイズをする上で、カスタムヘッダーを使うと、色やヘッダー画像をWordPressの管理画面から操作できるようになり便利です

【 Bootstrap 4 】全体的な機能の解説と、Alert の使い方。

頭がお花畑の@It_is_Rです。 今回からは Bootstrap 4 の使い方について、詳しく書いていこうと思います。 このシリーズの、前回の記事はこちらです。 Bootstrap 4 を

【webpack 4】npm-scriptsでオリジナルのコマンドを設定する方法

※追記(2018/5/15) 殆ど意味のない例を使っての説明にのちのち後悔し、余分な部分を大幅に削除しました。 畳んだ布団が飼い猫のお気に入りの場所になってます。@It_is_Rです。

WordPress テーマ自作 | functions.php から CSS を読み込む方法。

ふぁ……ふぁ……、ファンクションッ!! あ、どうも@It_is_Rです。 なに笑ってるんですか? WordPress テーマ自作シリーズ第10回目です。 今回は、 functions.php

CSS Button

サイト制作に!!CSSでマウスオーバーボタンの作り方。

新年初の記事です。とりあえず、あけましておめでとうございます。@It_is_Rです。 お正月……おそーがつ……おそまつ……おそ松さん。新年早々くだらないこと言ってないで早く記事を書けって話ですね。

コメントをどうぞ!

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