💁♂️ 【お知らせ】塾専用HP作成サービス
こんにちは!
takafumiです。
『5日で学ぶ! HTMLで作るはじめてのWordPressテーマ』の5日目になりました。
5日目の最終日となる今日は、個別記事のページをHTMLで作っていきましょう。
ここでは、<h2><h3>などの見出しタグをデザインしたり、ページ下部にあるページ送りの部分やフッターを作ります。
それでは、レッスンスタートです。
目次
ページ送り部分を作ろう
個別記事のHTMLを作る前に、ページ送りの部分を作っていきましょう。
よくブログなどで見る「次へ」や「前へ」というボタンが配置されているところになります。
ulタグを追加する
ページ送りの部分は<ul>と<li>タグの2つを使って作られています。
<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;
}
ページをリロードしてみると、下のようにページ送り作られているのがわかります。
フッターを作ろう
これまでのレッスンで作成したフッター部分をもう少し作り込んでいきましょう。
フッター内のメニューが空っぽなので、次のように<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;
}
スタイルが追加されると、下のようにフッター部分が作られているのが確認できます。
個別記事用のhtmlをつくろう
これまでの作業で記事一覧が表示されるトップページの作成は完了しました!
これから個別記事の部分を作っていきます。
個別記事の完成予想図はこの通りです。
article.htmlを新規作成する
index.htmlと同じ階層に 「article.html」ファイルを作成します。
下の画像のようなファイル構造になっていればOKです!
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">
(省略)
ここでページを確認すると、左側のブロックが空っぽになった状態になります。
ここの部分に個別記事のコードを追加していきます。
記事の大枠をつくろう
コードを記述する場所が準備できたところで、個別記事の部分をつくっていきましょう。
画像だと、下の赤枠が記事の大枠になります。
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を使った実践的なレッスンでしたね。
ボリュームも多く、正直ハードな内容だったかと思います。
今回のレッスンを通して、目的とするデザイン通りにHTMLを組んでいく流れが少し分かってきたかと思います。
ウェブサイトの制作は、作業が進むにつれて「再利用できるパーツ」が増えるため開発スピードが早くなって来ることが、実感できたと思います。
それでは、また別のレッスンでお会いしましょう!