blog-index.htmlのメインとなる、ブログ記事へとリンクするカード。 その下にあるページネーションを作成します。
１.２カラム部分の大枠を作る
トップ画像の下からは２カラムに分かれていますね。 それぞれを分けるための大きな枠だけ先に作っておきましょう。
２記事一覧部分を作る
大きい方のカラム(col-md-8)の中に、以下のアイテムを入れていきます。
- 記事それぞれのカード（リンク）
- 次のページへ切り替えるためのページネーション
2-1.記事カード
カード状にデザインされた枠の中に、それぞれのブログ記事のサムネイル画像やタイトル等を入れていきます。
まず、bootstrapからカード「Horizontal」のテンプレートコードをコピーしてください。
blog-index.htmlの、mainタグの下に貼り付けます。
このままだとBootstrapサイトにある見本そのままなので、見た目を完成図に合わせて変えていきましょう。
「card」クラスを持つdivはsectionタグに変更しておきます。 また、index.htmlで作成したクラスが使えるように「blog-card」クラスを追加しておきます。
カードの中身を入れ替えていきます。 まずは画像と、タイトル・Pタグのテキストを差し替えます。
ここまでで、保存してブラウザで確認してみましょう。 下図のようなカードが表示されれば上手く行っています。
最後に、点線で囲った記事投稿者と投稿時刻部分を追加します。
ここはindex.htmlのブログカードで使ったコードをコピーしてしまいましょう。
blog-top.htmlの記事紹介 <p>タグの下に貼り付けます。
index.html
↓
blog-index.html
コピーした箇所全体を囲っているdivのクラス「card-footer」はグレーの背景色が付きます。 ここでは要りませんので「card-footer」クラスは削除して下さい。
インデントや改行などコード部分を整えて保存します。 ブラウザで出来上がりを見てみましょう。
どうでしょうか？
少しサムネイル写真の幅が狭いので、カード内のカラム分けを「col-md-5」「col-md-7」に変更します。 ついでに、記事タイトルにもリンクを張りましょう。
これで記事リンクとなるカード部分が出来ました。
作成したカード部分、<section>～</section>コピー＆ペーストしてカードを４枚作ってください。
タイトルとサムネイルはそれぞれ変更しましょう。
2-2.ページネーション
メインカラムの一番下にあるページネーションを作ります。
こちらはbootstrapのテンプレートをそのまま張り付けます。 現在地が分かるように「Disabled and active states」のコードを使ってください。
blog-top.html
aria-labelに何のナビゲートをしているのか分かるように、値を入れます。
ページネーションが真ん中に表示されるよう、<ul>タグには「 justify-content-center」クラスを追加しました。
保存して、ブラウザで確認してみましょう。
フッターとの間隔が少し狭いですね。 navタグに「mb-5」クラスあたりを追加して、余白を調整してみて下さい。
これでblog-index.htmlのメインカラム部分が完成しました。