完成画面の紹介

このカテゴリでは、1カラムレイアウト、2カラムレイアウト、3カラムレイアウトのカテゴリで説明したレイアウト方法を元に、より実践的な2カラムサイトの作成を行います。まず、完成型を紹介します。

【メインページ】
海色をベースにした2カラムレイアウトです。色はスタイルシートの編集だけで変更できます。ヘッダ部分にはサイトタイトル、コンテンツ部分の先頭に、サイト概要を表示しています。サイト概要の下に、新規エントリーの本文を5つ表示させています。
右サイドバーには、検索ボックス、メニュー一覧、新着情報リンク一覧を設置しています。
フッタには、コピーライトを表示しています。

メイン

【カテゴリページ】
ヘッダの下部分に、ユーザビリティの向上のためのパンくずリストを表示させています。
コンテンツ部分には、メインページで選択したカテゴリのタイトル、そのカテゴリに属するエントリの内容を、概要形式で一覧表示します。サイドバーはメインページと同じ構成ですが、新着情報欄には、そのカテゴリに属しているエントリの新着のみが表示されるようになっています。
カテゴリ

【エントリーページ】
ヘッダの下部分に、ユーザビリティの向上のためのパンくずリストを表示させています。サイトトップ > カテゴリ > エントリ名 の順に表示しています。コンテンツ部分にはエントリーの本文を表示しています。サイドバーの検索とメニュー部分はメインページと同じですが、その下のカテゴリー一覧には、現在表示しているエントリーと同一カテゴリに属しているエントリーを表示しています。
エントリ

【検索結果ページ】
検索結果一覧をコンテンツ部分に表示しています。検索したキーワードを、検索ボックスに表示するようにしています。サイドバーには、検索ボックス、メニューの設置のみとなっています。
検索結果

次のページ >> グループ分けとスタイルシート記述

▲ページトップへ