ブログページ課題の作成ポイント

bootstrapを利用して、仮想ポートフォリオサイトの2ページを作成します。

• ブログインデックス(blog-index.html)
• 記事ページ(blog-single.html)

【blog-index.html】

【blog-single.html】

ページ全体は見本サイトをご確認ください。

1. ブログ一覧サンプルページ
2. ブログ詳細サンプルページ

前回と同じくbootstrapで用意されているクラスを使用し、そこにオリジナルクラスを追加することでデザインを完成させてください。 独自スタイルの指定は【BOOTSTRAP課題】ポートフォリオサイト制作で使用したcssファイルに書き加える形で進めます。

各所で使用しているアイコンは全てFont Awesomeを使用しています。 別のアイコンセットを使用しても構いません。

1.ブログインデックス

ブログインデックスは大きくトップエリア、記事一覧エリア、サイドバー、フッターの4ブロックで構成します。 ナビゲーションバーとフッターは、前回の課題で作ったものと同じです。

スマホサイズでの表示の場合は、記事一覧ブロックの下にサイドバーブロックが配置されるようにしてください。

1-1.トップ画像部分

「BLOG DETAILS」というテキスト、breadcrumb(パンくずリスト)の２つをトップ画像エリアの中央に配置します。 breadcrumbはbootstrapで公開されているテンプレートを使用し、cssで背景色などを調節しています。

背景画像は課題制作用フォルダに入っている「overlay-bg.jpg」を使用し、cssを使って青っぽい色味を加えています。 背景画像の色変更はどのような方法で行って頂いても構いません。

1-2.ブログ一覧エリア

記事ページへのリンク用として、記事タイトルや抜粋文を入れたカードを4枚並べます。 最下部にはbootstrapのPaginationを入れてください。

リンク色等の確認のため、リンク先は一緒に作るシングルページにして下さい。

1-3.サイドバー

サイドバー部分は以下５ブロックを入れます。

• SEARCH
• POPULAR POST
• RECENT POST
• TAGS
• ARCHIVES

RECENT POST、TAGS、ARCHIVES内の要素はリストタグを使って並べる方法を推奨いたします。

2.ブログ記事ページ

次にブログ記事詳細ページを作成します。 ヘッダーナビ、サイドバー、フッターはブログインデックスと同じものを使用しています。

2-1.記事部分

記事ページはトップ画像がありませんので、ヘッダーナビと被らないようにメイン部分上部に少し間隔を作ってください。パンくずリストは記事ブロックの上部に入れます。

アイキャッチ画像の下に記事タイトル、作成者やカテゴリーなどを配置しています。 記事内のリンク文字は青色になるように設定してください。

記事最下部にはSNSシェアリンクを設置します。

2-2.記事下

記事の下には関連ブログのカードを配置します。 indexの「ブログ」エリアで作ったものを簡略化した形です。