各ブログ記事の一覧を表示させているページ（ blog-index.html ）を作っていきます。
１.ブログ一覧を作るための下準備
最初にhtmlファイルのベースになる部分を作ります。 新規ファイルを作成し、blog-index.htmlと名前を付けて保存してください。
前回の課題で作成したポートフォリオサイトのトップページ（index.html）をエディターで開いて下さい。
一行目からヘッダーエリアの終わり</header>までをコピーし、新しく作ったblog-index.htmlに貼り付けます。
タイトルタグの中身をページに合わせて変更します。
ファイル下部、<footer>からhtmlの終わりまでを同様にコピー＆ペーストしてください。
貼り付けたらblog-index.htmlを上書き保存します。 ブラウザで確認して、下図のようにヘッダーとフッターが表示されていればOKです。
２.トップビューを作成する
背景画像を設定したボックスがあり、中央にタイトルと、基本的な作りはindex.htmlで作ったヒーローエリアとよく似ていますよね。
ヒーローエリアの作りと大きく異なるのは、タイトル(H1)の下にパンくずリストを入れたいという点です。 両方が上手く中央に配置されるように、テキスト部分全体を囲うdivを作りましょう。
まず、パンくずリスト以外の部分を作ってしまいましょう。
高さと背景画像を設定するためにオリジナルクラス blog-top を追加しています。
style.cssで.blog-topの背景画像とボックスの高さ、h1の文字色を指定します。
ブラウザで見てみると、このような形になります。
次に、Bootstrapのコンポーネントページからパンくずリストのテンプレートコード（３項目のもの）をコピーしてきて、h1の下に貼り付けます。
そのままでは左寄せになっていますので、olタグにjustify-content-centerクラスを追加してください。
ブラウザで表示を確認してみましょう。 Bootstrapで設定されているスタイルが効いて、背景色などが入っていますね。
これを打ち消すため、style.cssに下記のコードを書きます。
保存して、もう一度ブラウザで表示を確認してみましょう。
背景色が消え、文字色が設定した通り白くなりました。
３.背景画像に青色をのせる
完成見本では、トップエリアの背景は青っぽい色味でした。
現在使用している背景画像は黄色っぽいですよね。 ですが、photoshopなどを使って調整しなくても、cssを使って見本の色に変更することが出来ます。
画像の色調等を設定する方法は何パターンかあります。 今回はトップ画像部分全体を覆うdivの下に色変更用のdiv（.overlay）を設置する方法で行います。overlayクラスのdivは何も囲わず、すぐに閉じましょう。
このoverlayクラスを持つdivを、トップ画像エリア全体に重ねます。 そのためにはpositionプロパティを使用します。bootstrapでもpositionを設定させるクラスが用意されていますので、それぞれ下記クラスを追加してください。
- blog-topクラスのdiv→position-relative
- overlayクラスのdiv→position-absolute
そしてstyle.cssの方で、overlayクラスのスタイルを設定します。
ブラウザで表示を確認してみましょう。
設定通り、青くはなりました。
が、テキスト部分にもoverlayクラスのdivが重なってしまい見にくいですね。パンくずリストなどのリンクもクリックできなくなっています。
この現象はpositionプロパティの指定によってbox(divなど)の重なり順が自動的に調整されるために起こります。
テキストと部分全体を覆ったdivにもposition-absoluteクラスを追加すると、テキスト部分を前面に出すことが出来ます。
これでヘッダーからトップビュー部分までの作成は完了です。
補足：色の指定について
解説では「background-color」と「opacity」プロパティを設定して背景色を半透明にしました。 “rgba”というカラーコードを使用すると、この２つをまとめて設定することが出来ます。
今回の場合であれば「background-color:rgba(0,120,255,0.7);」です。 カッコ内の数字はそれぞれr,g,b,aに対応しており、一番最後にあるaの値が透明度を示しています。
●練習
index.htmlにも全体的に黄色がかった背景画像を使っている箇所があります。
今回使った方法で、そちらにも青いフィルターがかかったように変更してみて下さい。
変更箇所は以下２箇所です。
- カルーセルエリア
- コンタクトエリア
完成したものは当ページ「素材」にアップロードしています。 （※css等のパスを合わせてご確認ください）