「Twenty Thirteenのカスタマイズの準備」タグアーカイブ

Twenty Thirteenのデザイン変更時に表示確認

「Twenty Thirteen」で、デザインを変更した場合の表示確認のポイントを整理します。

はじめに

「Twenty Thirteen」で、デザインを変更した場合の表示確認のポイントを整理します。
・画面の種類別
・OS/ブラウザ別(※必要な場合OS/ブラウザのバージョン別でも)
・レスポンシブルレイアウト(画面幅別)

使用環境

WordPress 4.2.3
Twenty Thirteen 1.5

画面の種類別での表示確認

画面の種類別に表示確認します。
・トップページ
・固定ページ
・投稿ページ

OS/ブラウザ別での表示確認

OS/ブラウザ別で表示確認します。(例)
・Windows7/Chrome
・Windows7/Firefox
・Windows7/Internet Explorer
・Linux/Firefox
・Mac/Safari
・Android/Chrome
・iOS/Safari
※場合によっては、OSとブラウザのバージョン別でも表示確認します。

レスポンシブルレイアウトでの表示を確認

レスポンシブルレイアウトでの表示を確認します。
・画面幅大(2カラム表示状態)
・画面幅小(1カラム表示状態)

おわりに

注意点として表示確認は、管理者ユーザでログインしていないウィンドウで行います。「Twenty Thirteen」で、デザインを変更した場合の表示確認のポイントを整理しました。

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

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

関連記事(目次)

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

Twenty Thirteenで使用する画像を作成

WordPressの公式テーマ「Twenty Thirteen」をカスタマイズするにあたり、「Twenty Thirteen」で使用する画像を作成しておきます。

はじめに

WordPressの公式テーマ「Twenty Thirteen」で使用する画像を作成します。

使用環境

WordPress 4.2.3
Twenty Thirteen 1.5

作成する画像

以下の画像を作成します。
・ファビコン
・ウェブクリップアイコン
・ヘッダーの背景画像

ファビコンとウェブクリップアイコン

ファビコンとウェブクリップアイコンの作り方」を参照して作成します。

ヘッダーの背景画像

「Twenty Thirteen」の背景画像の推奨のサイズは、1600×230pxです。背景を設定する際に、WordPress上でトリミングできるので、高さは気にせず幅1600pxで画像を作成しておきます。

おわりに

WordPressの公式テーマ「Twenty Thirteen」をカスタマイズするにあたり、「Twenty Thirteen」で使用する画像を準備しました。

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

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

関連記事(目次)

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

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. インターネットで情報発信!
ムームードメイン ロリポップ!レンタルサーバー

Twenty Thirteenの概要

Twenty Thirteenをカスタマイズする準備として、Twenty Thirteenの概要を整理します。

はじめに

Twenty Thirteenの概要を整理します。

使用環境

WordPress 4.2.3
Twenty Thirteen 1.5

Twenty Thirteenの特徴

Twenty Thirteenの主な特徴をリストアップします。
・右サイドバーの2カラムのブログ用の画面構成
・レスポンシブルレイアウトに対応
・投稿ページと固定ページが作成可能
・多彩な投稿フォーマットが使用可能で個別のデザインで表示可能
・ヘッダーに画像を表示可能
・アイキャッチ画像を表示可能
・Microformats対応
・RTL言語対応
・翻訳対応
・アイコンフォント(Genericons)付属
・jQuery使用可能
・アクセシビリティ対応

レスポンシブルレイアウト対応

Twety Thirteenの大きな特徴は、レスポンシブルレイアウトに対応していることです。画面の幅が広い時は、サイドバーが右側に表示されます。
abstract_of_twentythirteen_001

画面が幅が狭くなると、サイドバーが下側に回り込みます。
abstract_of_twentythirteen_002

abstract_of_twentythirteen_003

投稿ページの特徴

投稿ページの特徴は、多彩な投稿フォーマットが使用可能で個別のデザインで表示可能なことです。文章と画像中心のブログでは、「標準」だけで間に合うかもしれませんが、様々なメディアを扱うようなサイトではとても役立ちそうです。

固定ページの特徴

固定ページの特徴は、ほぼ投稿の「標準」フォーマットと同じデザインですが、カテゴリとタグを指定することができません。トップページとメニューから呼び出される記事一覧のページで使用することになりそうです。

トップページの表示方法

トップページは、デフォルトでは最新の投稿ページが表示されますが、特定の固定ページをトップページに指定することができます。

アーカイブ表示ページの特徴

カテゴリ別とタグ別でアーカイブ表示が可能です。記事は、全文で表示されます。カスタマイズとしては、要約で表示したくなるかもしれません。

検索結果表示ページの特徴

検索結果を表示するページですが、、記事は要約で表示されます。

404ページの特徴

404 Not Foundのページは、404のメッセージだけはなく、検索窓も表示されます。サイドバー(右)は、表示されません。

おわりに

Twenty Thirteenの概要を整理しました。

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

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

関連記事(目次)

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