ワイド＆３カラムでウェブマガジンに最適！2014年版 WPデフォルトテーマ「Twenty Fourteen」

WordPressのバージョンが3.7になったと思ったら、あっという間に3.8が出て「おっ、早いなぁ〜」と思ったら2014年版のデフォルトテーマ「Twenty Fourteen」もリリースされていました。

「Twenty Fourteen」は日本人のWebデザイナー、WordPressのテーマクリエーターの入江隆さんという方がデザインされ、WordPressチームメンバーとともに作り上げたそうです。

そして今回のデフォルトテーマ、２カラムにすることもできますが、３カラムでの利用、複数人での運営を想定した「ウェブマガジン」に最適な作りになっています。

しかし、３カラムにすると横幅の問題でどうしても窮屈なサイトになってしまって、みづらい、わかりづらいといった問題があります。

しかし、Twenty Fourteenではそのような問題は全くありません。なにしろ「ワイド（標準の横幅が 1,260ピクセル）」な作りで、余白も十分にとられています。

結果、情報量が多くても全体のデザインとして「シンプル＆わかりやすさ」を実現しているように思います。

Twenty Fourteen 試作サイト

ちょっと深読みすると、Retinaディスプレイに代表される高解像度のディスプレイに対して、WordPressとしてWebサイトの新たな「標準規格（横幅サイズ）」を打ち出してきたのかなという気もします。

大きなモニター使っていると、このサイトちっちゃ！というようなこと、結構ありますよね。世界中のWebクリエーターにとって、インパクトのある出来事かもしれません。

もちろんレスポンシブ仕様なのでスクリーンサイズに自動最適化します。スマホやタブレット、10年前から使っているようなモニターでも全く問題はありません。

このへんが「レスポンシブ」の素晴らしい点でしょうね。ハードウェアの進化についていきながらも、これまで通りのハードにも対応するという特徴が。

ちなみに、ここ最近のデフォルトテーマの流れを見返してみると

Twenty Twelve（2012）- デザイン要素は全くなし、２カラムの使いやすい箱で、いかようにも使ってください的な感じ。使い勝手がものすごく良い。用途としてはブログはもちろん、多用途型。

Twenty Thirteen（2013）- シンプルさにこだわり、サイドバーなし１カラムのブログ用テーマ。コンテンツこそが主役なんだというテーマでした。テーマタンクでも紹介しています。→  WP公式テーマ「Twenty Thirteen」、ブログやるなら意外に？いえ、想像以上に良いテーマでした。

そして今回が３カラムのウェブマガジン用テーマです。次の「Twenty fifteen」は、ポートフォリオ系と写真ギャラリー系の中間くらいのブログ用テーマかなと勝手に予想です（笑）

それでは本題に戻って「Twenty Fourteen」のご紹介に入っていきましょう。

目次

1. テーマの特徴
2. テーマの外観・デザイン・レイアウト
3. テーマの基本的な使い方・カスタマイズ

１. テーマの特徴

１）デザイン・仕様

• トップページ、フィーチャードエリアにあり
• モバイル端末対応レスポンシブデザイン：スマホ、タブレットにも自動最適化
• スライドショー：簡単設置
• ページネーション：SEO対策、ユーザビリティ向上
• 見出しタグの最適化：各ページ毎に最適化！SEO対策に効果的
• 日本語化ファイル内蔵：テーマをインストール後、すぐに使用可！

２）カスタマイズ・オプションメニュー

• ヘッダーカスタマイズ機能：ヘッダー画像をアップロード
• バックグラウンド・カスタマイズ機能：背景画像、背景色を設定
• メニュー・カスタマイズ機能：２か所あり
• ウィジェット・カスタマイズ機能：サイドバー×２、フッターの計３か所
• 独自ウィジェットパーツ：サイドバー用のオリジナルウィジェットあり
• アイキャッチ画像サポート：記事一覧ページ、個別のページにも表示されます
• カスタムレイアウト：２カラム、３カラムに対応
• 全幅（横幅フル）ページ用テンプレート：問合せページなどの作成に便利

３）その他

• 英語サポート：配布元サイトのコメント欄から質問
• テーマ・アップデート：バグ修正、WPアップデート対応、セキュリティ向上に
• WordPress公式テーマ：安心ですね

２. テーマの外観・デザイン・レイアウト

１）トップページ

まずはトップページの外観からチェックしていきましょう。

• ヘッダー部分はヘッダー画像にトップメニュー（カスタムメニュー）
• 左サイドバーは２つのパーツで出来ており、セカンドメニュー（カスタムメニュー）とウィジェットパー
• フィーチャードエリアは注目記事をグリッドレイアウト、もしくはスライドショーにて表示可能
• 右サイドバーはウィジェットエリア
• アイキャッチ画像付きの記事一覧スペース

続いてトップページの下部。

• ページネーション（ようやく数字表示になりました）
• ４カラムのフッターウィジェットエリア
• 最下部に「WordPress」のクレジット表記

フィーチャードエリアをグリッド表示ではなく、スライドショーに切り替えてみました。設定そのものは、グリッドかスライドショーかを選択するだけです。

２）記事一覧ページ、個別の投稿ページ

記事一覧ページは、アイキャッチ画像に微妙に記事タイトルがかかるというユニークなデザインになっています。

個別の投稿ページでもアイキャッチは同様です。左右の余白が大きく取られており、日本人にはうれしい仕様かもしれません。

アメブロの芸能人ブログがその代表でしょうが、改行を多用するような記事の書き方ではこれくらいの幅が丁度良いでしょう。

記事下の前後の記事へのリンクもこれまでのデフォルトテーマとは違います。いいですね。

３）固定ページ用テンプレート

固定ページの作成には、３つのページテンプレートが用意されています。

こちらが投稿者を一覧表示するためのテンプレート。複数人でのメディア運営を意識していますね。

３カラムの設定の時でもサイドバーなしのページを作るためのページテンプレートもあります。問い合わせページなどを作る際にもってこいです。

もちろん、通常ページを作成するためのデフォルトテンプレートもあります。

４）レスポンシブWebデザイン

スマートフォン、タブレット、ちょっと古めのモニター・・・（笑）、流動的にデザインが切り替わります。

３. テーマの基本的な使い方・カスタマイズ

１）テーマのインストール

WordPress公式サイトで配布されているテーマ（当たり前ですが）なので、テーマの導入は簡単です。

1. WordPress ダッシュボードに移動
2. 外観 > テーマ > テーマのインストール > 検索
3. 「Twenty Fourteen」と検索
4. 【いますぐインストール】をクリック
5. 【有効化】をクリック

以上でテーマの導入完了、サイトを表示してみます。デフォルトではヘッダー画像がありませんね。

２）基本的なカスタマイズ

ダッシュボード > 外観 > カスタマイズ

テーマの基本的なカスタマイズを行います。

フィーチャードエリアは「Featured Contents」というメニューで設定します。レイアウト（Layout）を「Slider」にすすとスライドショーに。

下に「Tag Name」という欄がありますが、ここで設定した「タグ名」でフィーチャードエリアに表示するための記事を抽出します。（ ※ タグの設定は、記事を投稿する際に行います ）

「Grid」を選択するとこの通りです。

ダッシュボード > 外観 > ヘッダー

ヘッダーは先ほどのページでも編集できますが、カスタムヘッダーページからも設定可能です。

このページではヘッダー画像の横幅は1260ピクセル以上、高さは240ピクセル以上が推奨となっています。横幅に関してはその通りでよいでしょうが、高さを240ピクセルにすると高すぎるかもしれません。

試作サイトで使っているグレーの画像は、高さ170ピクセルです。

ダッシュボード > 外観 > 背景

背景も同様、カスタム背景のページで設定できます。

３）メニューのカスタマイズ

ダッシュボード > 外観 > メニュー

先ほどご説明した通り、メニューは２か所設定することができます。トップメニューと左サイドバーのセカンドメニューですね。トップに固定ページ、セカンドメニューに投稿カテゴリ等のリンクを設定すると良いかなと思います。

まず適当なメニュー名（ここではメニュー１）を記入し作成ボタンをクリック。

「位置の管理」というタブが追加されます。さらにもう１つメニューを作成するために「新規メニューを作成」をクリックします。

「メニュー２」という名前を付け、作成ボタンをクリック。

「位置の管理」タブに移り、テーマ上でのメニュー位置と名付けたメニュー名をひもづけます。

「メニューを編集」タブに戻り、編集するメニューを選択、左側の【固定ページ / リンク / カテゴリー / フォーマット】などの各項目から右側の「メニュー構造」に追加。最後に保存をクリック。

メニュー２（セカンドメニュー）も同様に実施します。

メニュー１とメニュー２が反映されました。

４）ウィジェットのカスタマイズ

ダッシュボード > 外観 > ウィジェット

左サイドバー、右サイドバー、フッター、３か所のウィジェットエリアを設定します。

• Primary Sidebar：左サイドバー
• Contents Sidebar：右サイドバー
• Footer Widget Area：フッター

「Twenty Fourteen Ephemera」というテーマオリジナルのウィジェットパーツが用意されています。指定の投稿フォーマットの記事を抽出し表示します。

投稿フォーマットは【アサイド / 画像 / 動画 / 音声 / 引用 / リンク / ギャラリー】です。（投稿フォーマットについては後述）

出来上がりはこうなります。

左サイドバーの「About」の画像部分ですが、テキストウィジェットパーツに画像を直接htmlで記述しています。（先に画像をメディアライブラリに登録しておく必要があります）

５）記事の投稿方法

ダッシュボード > 投稿 > 新規追加

記事の投稿ですが、フィーチャードエリアに記事を表示したい場合は「featured」タグを設定します。ただし、タグ名の編集画面で名前を変更することもできます。

また、先ほど出て来た「Twenty Fourteen Ephemera」というテーマオリジナルのウィジェットパーツを使う場合には、投稿フォーマットも選択しておきましょう。

６）固定ページの作成

ダッシュボード > 固定ページ > 新規追加

固定ページの作成時、ページ属性欄で「ページテンプレート」を選択します。

各ページテンプレートについては、ページ外観の項目でご確認いただけます。

• Contributor Page：編集者一覧ページ
• Full Width Page：全幅ページ

以上、「WordPress」渾身の（？）最新版デフォルトテーマ「Twenty Fourteen」はいかがでしたでしょうか？個人的にはテーマそのものよりも、このテーマが与える今後のWordPressの動きというか、Webの流れが気になります。もちろん、このテーマも素晴らしいです。

この「Twenty Fourteen」をきっかけに、さらに新しいテーマがまた続々と出てくることを期待しています。

• Tweet
•