ブログ記事のページ（blog-single.html）を作りましょう。
１.部分を活用しよう
ブログ記事ページは、ほとんど前回までに作ったblog-index.htmlと同じです。
違うのは<main>タグの中身、２カラムの左側部分くらいですね。
イチから作るのは大変なので、blog-index.htmlの中身丸ごとコピーしてしまいましょう。
コピーの方法はなんでも構いません。 コピーしたファイルは名前を「blog-single.html」にして下さい。
blog-single.htmlを開いてください。
タイトルタグ部分を「ブログ記事ページ」に変更します。
そして、以下のコードを全て削除してください。
- トップ画像部分
<main>タグから</main>タグの間の部分
ここまでのHTMLは下図のようになります。
ブラウザで見てみましょう。 トップ画像の高さが無くなったので、サイトバー上とナビゲーションが重なってしまっていますね。
これを回避するため「container」クラスのdivに、margin-topを足します。
ブラウザで確認すると、ナビゲーションとの間に少し隙間が出来ました。
２.記事表示部分を作る
<main>から</main>の間に記事部分を書いていきましょう。
最初に、記事全体を囲う「bg-white」クラスを適用したarticleタグを設置します。 適度に余白のクラスも加えてみましょう。
blog-index.htmlでトップ画像エリア内に入れていたパンくずリストを設置します。コピー＆ペーストして構いません。 左寄せに配置したいので「justify-content-center」クラスを削除しておいてください。
ブラウザで見てみましょう。
完成図と比べると、現在地「Data」の文字色が違いますね。
スタイルを設定してもblog-index.htmlの方には影響しないよう、articleに「post」という独自クラスを追加します。
そして、cssファイルでpostクラスのの中にあるbreadcrumbクラス、と限定してスタイルを設定してください。
.post .breadcrumb-item.active {
color: #cde1f8;
}
パンくずリストが出来ました。
記事トップ画像～投稿情報部分
オレンジの線で囲った部分を作っていきます。 まず、記事トップ画像とタイトルを入れてしまいましょう。
問題はタイトル下の、投稿情報が書かれている部分です。
こちらはリスト形式にして、リストマーク無し・横並びにするために「d-flex flex-wrap list-unstyled」クラスを加えます。タイトルとの間に間隔を作るための「mt-4」、左側に青いボーダーを表示出来るように独自クラス「post-meta」も追加しました。
下記スタイルをstyle.cssに追記し、青い線とリンクテキストの色を設定します。
これで投稿情報部分が完成しました。
記事本文・SNSリンク
記事本文はシンプルにpタグで囲って記述して下さい。
引用箇所のみblockquoteタグを使います。
記事（テキスト）部分が終わったら、その下にSNSアイコンを横並びに配置していきます。 使用するアイコンは画像でも、Fonrawsomeを使っても構いません。
こちらも<ul>タグにlist-unstyled と d-flexクラスを指定しています。
更に、アイコンのサイズを調整するために「snsicon」という独自クラスを加えました。
ブラウザで確認しながら、style.cssの方で画像サイズを設定してください。
これで記事部分( <article>タグ内 )の設定は完了です。
３.関連記事を入れる
最後に、記事の下に関連記事欄を作ります。
この見出しとカードは、index.htmlで作ったブログカードをシンプルにしたものです。
BLOGセクションからのコピー
テンプレートとなる部分のコードを、index.htmlからコピーしてきましょう。
まずはsectionタグから、２枚目のカードを閉じる</div>タグまでをコピーして貼り付けます（※下図のコードは途中までしか載せていません）。
index.html
blog-single.htmlでの、張り付け場所は</article>タグの下です。
blog-single.html
張り付けたコードを閉じるタグを書く、 もしくは、index.htmlからコピーしてきて貼り付けます。 解説通りに組まれている場合は、下図の点線部分です。
インデントを直して上書き保存してください。 ブラウザで表示を確認してみましょう。
このように崩れなく2枚のカードが表示されていればOKです。
カスタマイズする
コピーしてきたコードを、blog-top.htmlの完成図と同じになるようにアレンジします。 見出しの文字を打ち換えて、カードのサイズを「col-md-6」に変更してください。
- カテゴリーラベル(.card-category-box)
- カードフッター(.card-footer)
の２か所を削除します。
削除前のコード
↓
削除後のコード
ブラウザで確認して、上図のようになっていれば完了です。
これでblog-single.htmlの作成は完了です。 お疲れ様でした。