WordPressのヘッダーやメニューをHTMLで書いてみよう

5日で学ぶ HTMLで作るはじめてのWordPressテーマ- メニューをHTMLで書こう

こんにちは!

takafumiです。

5日で学ぶ! HTMLで作るはじめてのWordPressテーマ』の2日目になりました。

これまで、divとCSSを使ってheadercontentfooterといったページの骨組みを一緒に作ってきました。

 

2日目の今日は、ヘッダー部分のタイトルメニューを作り込んでいきましょう。

ウェブサイトではよく見られるデザインです。

ここで、基礎をしっかりと学んで自分だけのメニューが作れるようになりましょう!

それでは、レッスンスタートです。

 

ヘッダー内の構造について

これから実際にヘッダーを作る前に、その中の構造を少しみてみましょう。

update.comのヘッダー部分

 

実はこのヘッダー部分ですが、header_top、header_title、header_copy、<nav>タグの4つのパーツが合わさってできているんです。

update.comでヘッダー内のメニューを作成

 

今日のレッスンでは、それぞれのパーツを作成してヘッダー部分を完成させましょう!

takafumi
大変そうにみえるかもしれないけど、Step by Stepで一緒にやれば思ったより簡単にできるはずだよ!

 

header_topをつくろう

最初に作るのはheader_topの部分になります。

ここには、サイトのタイトルとコピーを収めるheader_titleheader_copyが後ほど入ります。

update.comのheader_topをつくる

 

header_topはheaderブロックの子要素なので、HTMLで記述するときもidがheaderのdiv要素内に書いていきます。


<div id="header">
	<div id="header_top">
		
	</div>
</div>

style.cssを開いて、#header_topを定義しましょう。

属性を追加することで、高さと背景色が黄色になるようにしました。

text-align:center;とすることで、要素内の文字がすべて中央揃えになるようにしています。


/* ヘッダートップ */
#header_top {
	background-color: #F8E81C;
	height: 130px;
	text-align: center;
}

ファイルを保存して、ページをリロードしてみましょう!

黄色いボックスが画面上にできましたね。

update.comで画面上部にメニュー用のボックスを作成

 

header_titleをつくろう

次はheader_titleの部分をつくります。

update.comのheader_title

 

header_titleにはupdate.comというブログのタイトル名がはいります。

idにheader_titleをもつ<span>タグをheader_topの中に追加します。


<div id="header">
	<div id="header_top">
		<span id="header_title">update.com</span>
	</div>
</div>

ファイルを保存して、ページをリロードしてみましょう。

header_titleになにもスタイルを追加していないので、タイトル感がありませんよね?

update.comでタイトルを改善する

 

そこで、style.cssheader_titleのidを定義します。

文字の色や大きさを指定する属性を追加しましょう。


/* ヘッダータイトル */
#header_title {
	color: #000;
	display: inline-block;
	font-size: 40px;
	margin-top:20px;
}

保存してページをリロードしてみましょう!

『update.com』というテキストが目立って、タイトルらしくなりましたね。

update.comのタイトルをCSSで変更

 

header_copyをつくろう

ブログタイトル下にあるコピーを表示するための、<span>タグを追加します。

WordPressサイトのタイトルの下にコピーを追加

この<span>タグにはheader_copyというidを割り振っておきましょう。

<span>タグには改行が入らないので、<br>タグで改行をしています。


<div id="header_top">
	<span id="header_title">update.com</span><br>
	<span id="header_copy">変化の早い時代に必要な知識をあなたへ
	</span>
</div>

 

style.cssheader_copyのidを定義しちゃいましょう。

コピーの下に点線を入れるために、border-bottomを追加しています。


/* ヘッダーコピー */
#header_copy {
	border-bottom: 1px dashed #000000;
	font-size: 15px;
	padding-bottom: 5px;
}

ファイルを保存して、リロードしてください。

タイトルのしたにコピーが追加されたことで、よりブログのコンセプトが伝わりやすくなりましたね!

WordPressでコピーのスタイルを追加

 

takafumi
小さな要素を作って、それに必要なCSSを書いていけばいいんだね!

 

navでメニューを作ろう

ヘッダーのタイトルやコピーが完成したので、つぎはメニューの<nav>部分をつくります。

WordPressのメニューをnavタグで作る

ウェブサイトやブログのメニューを作るときには、<nav>というタグを使います。

メニュー部分をちゃんと、<nav>タグで囲うことでSEO的にも適したページ構成になります。

header_topがidとして割り当てられた<div>の下に、<nav>タグを追加します。

<nav>の中には、<ul>と<li>タグを使って、各メニューを作ります。


<div id="header_top">
	<span id="header_title">update.com</span><br>
	<span id="header_copy">変化の早い時代に必要な知識をあなたへ
	</span>
</div>
<nav>
	<ul>
		<li>ホーム</li>
		<li>ライフ</li>
		<li>ガジェット</li>
		<li>アプリ</li>
		<li>スタートアップ</li>
	</ul>
</nav>

一度、保存してリロードしてみましょう。

ホーム」や「ライフ」などが縦に並んでしまっていますね。

これは、<li>タグdisplay属性がデフォルトではblockになっているからです。

blockだと、<li>タグの前後に自動的に改行が入ってしまうため、縦に要素が並んでしまっているんです。。

WordPressのメニューを作成

 

navのスタイルを追加しよう

<nav>タグにたいして、スタイルを追加しましょう。

style.css#header nav { } という形で定義してみましょう。

takafumi
こう定義することで、#headerブロックの中の<nav>タグのスタイルを変えることができるよ!

/* ヘッダー内のメニュー */
#header nav {
	height: 60px;
	margin: 0 auto;
	width: 1150px;
}

スタイルでは幅と高さを指定しています。

margin: 0 auto;を追加することで、<nav>要素がページの中央に配置されるようになります!

 

ulタグにスタイルを追加しよう

デフォルトの<ul> タグにはmarginやpaddingが設定されています。

これがレイアウト時には厄介なことになってしまうので、一部をリセットしましょう。

また、高さも指定します。


#header nav ul {
	height: 40px;
	margin: 10px 0px 0px 0px;
	padding-left: 0px;
}

 

liタグを横並びにしよう

いよいよ、各メニューを表示する<li>タグの部分をつくっていきます。

以前にも話したように、メニューが縦に並んでしまうのは<li>タグのdisplay属性によるものでしたね。

ということは、display属性の値を「block」以外のものにすればいいのです。

style.cssに<li>タグのスタイルを変更するために、次のように記述してみましょう。


#header nav ul li {
	border-right: 1px solid #8D8D8D;
	color: #fff;
	display: inline-block;
	font-size: 25px;
	font-weight: bold;
	line-height: 40px;
}

displayにinline-blockを指定することで、<li>タグの前後に挿入される改行を消すことができます。

また、border-rightを追加することで<li>タグで生成される要素の右辺に灰色の線を描くことができます。

#headerブロックの背景色を黒に指定するのを忘れないようにしておいてください。


/* ヘッダー部分 */
#header {
	height: 190px;
	min-width: 1300px;
	background-color: #000;
}

ページをリロードして、確認してみてください。

navのメニューを横並びにする

 

各メニューの間隔を調整しよう

メニューをよーーく見てみると、各メニュー同士の間隔が近すぎて窮屈な印象ですよね。

これは、padding属性を使って<li>タグにの右側と左側に余白をつくることで解決することができます。

style.cssにpadding属性を追加してみましょう!


#header nav ul li {
	border-right: 1px solid #8D8D8D;
	color: #fff;
	display: inline-block;
	font-size: 25px;
	font-weight: bold;
	line-height: 40px;
	padding-left: 1.5rem;
	padding-right: 1.5rem;
}

ページをリロードすると、各メニューの間隔がいい感じになっているのがわかるとおもいます。

WordPressのnavメニューの間隔を調整

 

一番最初の要素に区切り線を追加しよう

メニューをみると問題がないように見えるのですが、『ホーム』の左側に区切り線がありません。

一番最初の要素に区切り線がない

 

メニュー周りをスッキリさせるために、一番最初の要素にだけ線を追加してみましょう。

<li>タグの中でも、一番最初の<li>タグを指定する場合には li:first-child と記述します。


#header nav ul li:first-child {
	border-left: 1px solid #8D8D8D;
}

最初の要素だけ左辺に線を追加するので、border-left属性を追加します。

ページをリロードしてみましょう!

最初の要素だけに、ちゃんと区切り線が追加されました!

最初の要素だけに区切り線を追加する

 

今日のレッスンはここまで!

おつかれ様でした!

今日のレッスンはここで終了です。

今日はheaderブロックの中に要素を追加して、タイトルやコピー、メニューなどを作りました。

ヘッダー部分ができたことで、ウェブサイト感がとても高まってきたと思います。

次のレッスンでは記事一覧を表示する部分をHTMLで書いていきましょう!

 

続きが気になる場合は『WordPressに投稿された記事一覧を表示するHTMLを作ってみよう』へお進みください。

 

『5日で学ぶ HTMLで作る初めてのWordPressテーマ』の目次はこちら

この記事をシェアしませんか?Share on Facebook0Tweet about this on TwitterShare on Google+0