記事一覧部分に続いてサイドバー部分を作っていきます。 このサイドバーはブログインテックス・ブログ記事ページ共通で使用します。
１.SEARCH部分を作る
早速、サイドバーの一番上にあるSEARCHのボックスを作りましょう。
まず、白い背景色+余白を持たせるためにbg-whiteクラスを指定したdivを作ります。
その中に「SEARCH」という見出しを追加。 bootstrapのフォームやボタンを参考に検索バーを作っていきましょう。
フォームとボタンを横並べにするには「input-group」クラスを使います。
確認用コード
<form class="input-group py-3">
<input type="text" class="form-control" placeholder="Search for..." aria-label="Search for...">
<button type="button" class="btn btn-primary">
<i class="fas fa-search"></i>
</button>
</form>
ブラウザで確認してみましょう。
ここから以下の調整を行います。
- ボタンを角丸ではなく四角にする
- 見出しの左横にアイコンを入れる
そのために「bg-white」クラスを持っているdivに、css設定用に「search」クラスを追加してください。
cssの調整を行っていきましょう。 まずは、ボタンの角の丸みをゼロにします。
見出し横にアイコンを入れるのは、擬似要素（::before）を使用しましょう。
疑似要素とは
疑似要素はセレクターに付加するキーワードで、選択された要素の特定の部分にスタイル付けできるようにするものです。
「::before」であれば、選択した要素の最初の子要素として擬似要素を作成します。 今回のケースであれば「（HTMLファイル上にはないけれど）h3タグの直後に一つ要素が入っていると見做す」という設定であると考えて頂くと分かりやすいかもしれません。
見出し横にアイコンを入れる
実際に疑似要素を設定してみましょう。
「search」クラスのdiv内にあるh3の前にアイコンを表示させたいので、セレクタは .search h3::before と書きます。
一つだけならば、下図のように分けて書く必要はありません。 が、今回はSEARCHのボックス以外でもサイドバーのh3部分にアイコンフォントを入れたいので共通の設定・それぞれの見出し前に表示するアイコンを分けて記述しています。
content: " ";の中に入っている数字は、fontawsomeのサイトで確認できます。
style.cssに上記のコードを書いてみましょう。 うまく行かない方は下記コードを張り付けて試してみて下さい。
確認用コード
.search h3::before{
font-family: "Font Awesome 5 Free" ;
font-weight: 600;
padding-right: 7px;
}
.search h3::before {
content: "\f002";
}
ブラウザで確認して、テキストの左側にアンコンが表示されれば成功です。
２.POPULAR POST部分を作る
サイトバーの二番目、POPULAR POSTを作っていきましょう。
シンプルにbootstrapのクラス（グリッド）を使って組んでいきます。 こちらはsectionの扱いにして、「popularposts」という独自クラスを追加します。
SEARCHと同じように見出し横にアイコンを入れましょう。 cssファイルに線で囲った部分を追加してください。
ブラウザで確認して、アイコンが表示されていればOKです。
あとは、グリッドで組んだサムネイル+タイトル部分をコピー&ペーストし、３枚分作れば完了です。imgとタイトルはそれぞれ変更してください。
３.RECENT POST以下の部分
POPULAR POSTの下にある項目を一気に作ります。
- RECENT POST
- TAGS
- ARCHIVES
RECENT POST以下の部分にも全体を囲うdivに、それぞれ独自クラスを振ります。 cssファイルで表示するアイコンフォントを指定していきましょう。
また、各項目（リンク）部分はリストタグで表示しています。 リストマークの表示を無くす箇所はBootstrapの「list-unstyled」クラスを使用してください。リンク先は空で構いません。
blog-index.html
style.css
「TAGS」の項目には、それぞれ青い角丸の背景色が付いています。 こちらは、style.cssで下記のように設定してください。
style.css
これでサイドバー部分の作成が完了しました。 次は記事のページを作ります。