WordPressの個別記事ページ用のHTMLを作ろう！

SHARE

こんにちは！

takafumiです。

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

5日目の最終日となる今日は、個別記事のページをHTMLで作っていきましょう。

ここでは、<h2><h3>などの見出しタグをデザインしたり、ページ下部にあるページ送りの部分やフッターを作ります。

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

 

ページ送り部分を作ろう

個別記事のHTMLを作る前に、ページ送りの部分を作っていきましょう。

よくブログなどで見る「次へ」や「前へ」というボタンが配置されているところになります。

WordPressのページ送りを作る

 

ulタグを追加する

ページ送りの部分は<ul>と<li>タグの２つを使って作られています。

<ul>タグにはpagiantionというidを割り当てていることに注意してくださいね。

メニューを作ったときに作り方は似ています。


（省略）

	</article>

	<ul id="pagination">
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>></li>
	</ul>

</div>

（省略）

 

pagiantionのスタイルを追加する

style.cssを開いて#pagiantionを追加しましょう。

ポイントとしては<li>タグの幅と高さを42pxに固定しているところです。

42pxを2で割った21pxをborder-radius属性に指定することで、<li>タグを丸くしています。


（省略）

/*　ページネーション　*/
#pagination {
	margin-top: 70px;
	padding-left: 0px;
	text-align: center;;
}

#pagination li {
	background-color: #fff;
	border: 1px solid #D5D5D5;
	border-radius: 21px;
	color: #7D7D7D;
	display: inline-block;
	font-size: 25px;
	font-weight: bold;
	height: 42px;
	margin-left: 10px;
	text-align: center;;
	width: 42px;
}

ページをリロードしてみると、下のようにページ送り作られているのがわかります。

WordPressでページ送り部分が完成

takafumi
<ul>と<li>タグで作った要素は縦並びになってしまうので、横並びにするときはdisplay属性を変更するといいよ！

 

フッターを作ろう

これまでのレッスンで作成したフッター部分をもう少し作り込んでいきましょう。

WordPressでフッターを作ってみよう

フッター内のメニューが空っぽなので、次のように<ul>タグなどをつかって各項目を追加します。


（省略）

<div id="footer">
	<ul>
		<li>ホーム</li>
		<li>ライフ</li>
		<li>ガジェット</li>
		<li>アプリ</li>
		<li>スタートアップ</li>
	</ul>
</div>

（省略）

 

フッターのスタイルを追加しよう

フッター部分の背景色やメニューを調整するために、style.cssを修正していきましょう。

<ul>や<li>タグのスタイルも同時に修正しています。


（省略）

/*　フッター部分　*/
#footer {
	background-color: #E8E8E8;
	height: 80px;
	min-width: 1300px;
}

#footer ul {
	margin: 0px;
	height: 80px;
	margin: 0 auto;
	width: 1150px;
	padding-left: 0px;
}

#footer ul li {
	color: #6B6B6B;
	display: inline-block;
	font-size: 20px;
	margin-right: 50px;
	margin-top: 20px;
}

スタイルが追加されると、下のようにフッター部分が作られているのが確認できます。

WordPressのフッターを作成

 

個別記事用のhtmlをつくろう

これまでの作業で記事一覧が表示されるトップページの作成は完了しました！

takafumi
やったね！

これから個別記事の部分を作っていきます。

個別記事の完成予想図はこの通りです。

WordPressの記事部分を作る

takafumi
他の部分はこれまでに作ったものを再利用するだけだから、赤枠の部分だけを作れば大丈夫だよ！

 

article.htmlを新規作成する

index.htmlと同じ階層に 「article.html」ファイルを作成します。

下の画像のようなファイル構造になっていればOKです！

article.htmlを新規作成

 

index.htmlのコードを再利用する

個別記事ページで使われている、トップ、ヘッダー、サイドバーなどのパーツは全てindex.htmlのものをそのまま使うことができます。

index.htmlを開いて全てのコードをコピーしたら、article.htmlに貼り付けてください。

そして、<div id=”content_main”>要素内の全てのコードを削除してみましょう。


（省略）

<div id="wrapper">
	<!-- CONTENT -->
	<div id="content">
		<div id="content_main">

		<!--　この中のコードを全て削除　-->

		</div>

		<div id="content_sub">

（省略）

ここでページを確認すると、左側のブロックが空っぽになった状態になります。

ここの部分に個別記事のコードを追加していきます。

個別記事を作るためにコードを再利用

 

記事の大枠をつくろう

コードを記述する場所が準備できたところで、個別記事の部分をつくっていきましょう。

画像だと、下の赤枠が記事の大枠になります。

WordPressの記事部分を作る

articleタグを追加する

<div id=”content_main”>要素の中に、<article>タグを追加してください。

<article>にはentry_articleというidを割り当てます。


（省略）

<div id="content_main">
	<article id="entry_article">
	</article>
</div>

（省略）

 

entry_articleをstyle.cssに追加する

style.cssを開いて、#entry_articleを追加します。

display属性で inline-block になるようにしています。


（省略）

/* 個別記事のスタイル　*/
#entry_article {
	display: inline-block;
}

 

タイトルを追加しよう

記事のタイトルをつくっていきましょう。

赤枠の部分がタイトルになります。

個別記事のタイトルを追加する

 

h1タグを追加する

<article id=”entry_article”>の中に、<h1>タグを追加します。

この<h1>タグには entry_title というidを割り当てておきます。


（省略）

<article id="entry_article">
	<h1 id="entry_title">無料で学べるオススメ英語アプリ10選！毎日たった10分でスキルアップを目指そう。</h1>
</article>

（省略）

 

entry_titleをstyle.cssに追加する

style.cssを開いて、#entry_titleを追加しましょう。

後々のことを考えて、border-bottom属性をnoneに指定しています。

これで、要素の下側に線が追加されることはなくなります。


（省略）

#entry_title {
	border-bottom: none;
}

 

ページをリロードして、タイトルが追加されたことを確認してください。

 

カテゴリーと公開日を追加しよう

タイトルの下にあるカテゴリーと公開日を追加します。

画像では赤枠の部分になります。

個別記事にカテゴリーと公開日を追加する

 

spanとtimeタグを追加する

<h1>タグの下に新しく<div>タグを追加します。

<div>タグの中には、<span>と<time>タグを追加しましょう。

それぞれのタグにはクラスが割り当てられているのことに注意してください。


（省略）
<article id="entry_article">
        （省略）	
	<div>
		<span class="article-category">アプリ</span>
		<time class="article-date">2017年1月30日</time>
	</div>

</article>

（省略）

ページをリロードして確認してみましょう。

article-category や article-date は以前のレッスンでstyle.cssに追加されているので、ここでは何もする必要ありません。

カテゴリーと公開日を追加

 

トップの見出しとなる画像を追加しよう

個別記事のトップに目立つように画像を配置します。

下の赤枠の部分ですね。

個別記事のトップ画像を作ろう

 

figureとimgタグを追加する

<div>タグの下に、<figure>タグを追加します。

<figure>タグには entry_top_image という id を割り当てています。

<figure>タグの中に、<img>タグを入れておきましょう。


（省略）

<article id="entry_article">
       （省略）
	<div>
		<span class="article-category">アプリ</span>
		<time class="article-date">2017年1月30日</time>
	</div>

	<figure id="entry_top_image">
		<img src="">
	</figure>

</article>

（省略）

 

entry_top_imageをstyle.cssに追加する

#entry_top_imageをstyle.cssに追加します。

画像の幅と高さ、マージンなどを調整してみましょう。


（省略）

#entry_top_image {
	height: 300px;
	width: 800px;
	margin: 30px 0px 0px 0px;
}

#entry_top_image img {
	height: 300px;
	width: 800px;
}

ページをリロードして確認してみましょう。

画像のサイズや間隔が調整できたのが分かると思います。

トップ画像のスタイルを修正

 

個別記事のコンテンツ部分をつくろう

WordPressでは一般的なウェブサイトの作成方法とは違って、ワードで文章を入力するように記事を作ることができます。

記事内の改行や画像は自動的に、<br>や<img>タグに変換されるためHTMLの知識がない人でも簡単にウェブページがつくれます。

これから作っていく部分は、WordPress内で入力した記事の文章や画像が配置されるところになります。

下の画像では赤枠のところになります。

完成図内の記事要素

 

sectionタグを追加する

<section>タグを<article>タグの中に追加してみましょう。

<section>タグには entry_content という id を割り当てています。


（省略）
<article>
（省略）
	<!-- entry content -->
	<section id="entry_content">

	</section>

</article>
（省略）

ついでに、ダミーのテキストと見出しも追加しておきましょう。


（省略）

<article id="entry_article">
        （省略）
	<!-- entry content -->
	<section id="entry_content">
		<p>ここには記事のテキストが入ります。ここには記事のテキストが入ります。ここには記事のテキストが入ります。ここには記事のテキストが入ります。ここには記事のテキストが入ります。</p>

		<h2>見出し2です</h2>
		<p>ここには記事のテキストが入ります。ここには記事のテキストが入ります。ここには記事のテキストが入ります。ここには記事のテキストが入ります。ここには記事のテキストが入ります。</p>

		<h3>見出し3です</h3>
		<p>ここには記事のテキストが入ります。ここには記事のテキストが入ります。ここには記事のテキストが入ります。ここには記事のテキストが入ります。ここには記事のテキストが入ります。</p>
	</section>

</article>

（省略）

 

entry_contentのスタイルを追加する

style.cssを開いて#entry_contentを追加してみましょう。


（省略）

#entry_content {
	display: inline-block;
	margin-top: 30px;
}

 

pタグやhタグのスタイルをstyle.cssに追加する

#entry_content内の<p>タグや<h2>、<h3>タグについて何もスタイルを用意していませんよね。

style.cssを開いて、それぞれのタグのスタイルを追加していきましょう。


（省略）

#entry_content p {
	font-size: 20px;
	line-height: 1.7;
}

#entry_content h2 {
	border-bottom: 3px solid #4DBFA5;
	padding-bottom: 10px;
}

#entry_content h3 {
	border-bottom: 3px dashed #4DBFA5;
	padding-bottom: 10px;
}

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

見出し部分がhタグの種類によって、変わっていることがわかりますね。

個別記事の見出しや文章をスタイルで修正

 

最後の微調整

今の状態だと、#content要素が左よりになってしまっているので、中央に配置されるように修正していきましょう。

#wrapperと#contentにtext-align属性を追加してみましょう。


/* ラッパー部分　*/
#wrapper {
	min-width: 1300px;
	text-align: center;
}

/* コンテンツ部分　*/
#content {
	width: 1150px;
	min-height: 500px;
	display: inline-block;
	text-align: left;
}

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

ちゃんと中央に表示されましたね

中央に表示されるように修正

 

これでレッスンは終わりです

今日で、一緒にやってきた「5日で学ぶ！　HTMLで作るはじめてのWordPressテーマ」は終了です。

5日間のレッスンで、HTMLやCSSを使った実践的なレッスンでしたね。

ボリュームも多く、正直ハードな内容だったかと思います。

takafumi
よくここまで出来たね！すごい！

 

今回のレッスンを通して、目的とするデザイン通りにHTMLを組んでいく流れが少し分かってきたかと思います。

ウェブサイトの制作は、作業が進むにつれて「再利用できるパーツ」が増えるため開発スピードが早くなって来ることが、実感できたと思います。

 

それでは、また別のレッスンでお会いしましょう！

 

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

前の記事

WordPressには欠かせないサイドバー部分のHTMLを組ん…

次の記事

【思わず唸る】杉養蜂園から学ぶマーケティング戦略