Twenty Thirteenの画面レイアウトを設計

WordPressの公式テーマ「Twenty Thirteen」をカスタマイズして、カテゴリ別記事中心のサイトを構築します。「Twenty Thirteen」の特徴を活かして、画面レイアウトを設計します。

はじめに

WordPressの公式テーマ「Twenty Thirteen」の特徴を活かして、カテゴリ別記事中心のサイトの画面レイアウトを設計します。

使用環境

WordPress 4.2.3
Twenty Thirteen 1.5

基本の画面レイアウト

「Twenty Thirteen」の画面レイアウトは、2カラム右サイドバーのスタイルです。2カラム右サイドバーのスタイルは、読者が記事の内容に集中しやすいレイアウトで、ブログに適したスタイルとされています。
page_design_column

全体の画面レイアウト

全体の画面レイアウトは、以下のエリアで構成されます。
・ヘッダーエリア
・コンテントエリア
・フッターエリア
page_design_site

<固定ページ>
固定ページのレイアウトは、以下の構成にします。Twenty Thirteenでは、サイドバー(右)がサイドバー(下)とフッターにかぶりますが、ICT実験室では、かぶらないようにカスタマイズします。
page_design_page
ページ幅が狭い場合は、サイドバー(右)がコンテントの下に回り込みます。
page_design_page_narrow

<投稿ページ>
投稿ページのレイアウトは、以下の構成にします。Twenty Thirteenでは、サイドバー(右)がサイドバー(下)とフッターにかぶりますが、ICT実験室では、かぶらないようにカスタマイズします。
page_design_single
ページ幅が狭い場合は、サイドバー(右)がコメントの下に回り込みます。
page_design_single_narrow

ヘッダーエリアのレイアウト

ヘッダーエリアは、以下のパートで構成されます。
・ヘッダー
・メニュー

コンテントエリア(固定ページ)のレイアウト

固定ページのレイアウトは、以下のパートで構成します。固定ページは、主にトップページやメニュー表示で使用します。ICT実験室は、記事中心のサイトのためトップページやメニューに対するコメントは不要と考え、コメントは非表示にします。
・コンテント
・コメント ※ICT実験室では表示しない
・サイドバー(右)
・サイドバー(下)

コンテントエリア(投稿ページ)のレイアウト

投稿ページは、以下のパートで構成されます。投稿ページでは、カテゴリとタグが設定できるため、投稿ページは記事で使用します。ICT実験室では、任意の順で各カテゴリの記事を作成してくため、記事の作成順は意味をもたないと考え、ページ送りは非表示にします。
・コンテント
・コメント
・ページ送り ※ICT実験室では表示しない
・サイドバー(右)
・サイドバー(下)

フッターエリアのレイアウト

フッターエリアは、以下のパートで構成されます。
・フッター

おわりに

WordPressの公式テーマ「Twenty Thirteen」をカスタマイズするにあたり、「Twenty Thirteen」の特徴を考慮して、画面レイアウトの設計を行いました。

関連記事(Twenty Thirteenのカスタマイズの準備)

  1. Twenty Thirteenの概要
  2. Twenty Thirteenの画面レイアウトを設計
  3. Twenty Thirteenで使用する画像を作成
  4. Twenty Thirteenのデザイン変更時の表示確認

関連記事(目次)

  1. インターネットで情報発信!
ムームードメイン ロリポップ!レンタルサーバー

コメント記入欄

※メールアドレス(任意入力)は非公開です。コメントはお気軽にどうぞ!

内容を確認して、「コメント送信」ボタンを押してください。

post date*

※日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)