Twenty Fourteenの紹介と子テーマ

WordPressのTwenty Elevenの子テーマを作成WordPressのバージョンが3.8にアップデートされ、デフォルトテーマがTwenty Fourteenへと変更になりました。
このテーマ、超シンプルでいい感じです!
WordPressの公式テーマですので、リスクコードが含まれている心配もないですし、何より使いやすそう”です!
本記事では、Twenty Fourteenを紹介し、子テーマを作る準備をしたいと思います。

Twenty Fourteenは標準3カラム

WordPress Twenty Fourteenのウィジェット管理画面あれ?確かめてみたら2カラムな感じなんだけど??
と思う方もいらっしゃいますよね。

そうなんです。
ダッシュボードで設定を一切変えていないデフォルト状態ではTwenty Fourteenは2カラムに見えます。

しかし、ダッシュボードのウィジェット管理画面でコンテンツサイドバーになにかウィジェットを追加すると…
WordPress Twenty Fourteen 3カラム状態ご覧のとおり、3カラムになります。
コンテンツサイドバーの部分にウィジェットがなにも設定されていないと、記事内容を表示する部分の横幅が広がり構造が変化します。
レスポンシブな設計になっているのでとても便利です。

アイキャッチ画像の表示が特徴的

WordPress Twenty Fourteenのアイキャッチ画像の表示Twenty Fourteenの最大の特徴は、アイキャッチ画像の表示のさせ方だと思います。
ピンク色の上にSalty WordPressと書かれている画像がアイキャッチ画像です。
記事タイトル表示部分がアイキャッチ画像に少し重なるように配置されています。
このアイキャッチ画像表示枠の横幅は672pxであり、それ以下のものをアイキャッチ画像として設定するとTwenty Fourteenであらかじめ用意されているグレーの斜線の画像が隙間を埋めるように表示されます。毎回意識して、所定のサイズのアイキャッチ画像を準備できれば投稿一覧ページはとてもオシャレになると思いますが、少々手間がかかるような気もします。

スマホなどに標準対応

まだすべてのデバイスで確かめたわけではありませんが、スマートフォンなどのデバイスに標準対応しており、それぞれのデバイスに最適化された表示をします。
私のiPhone 4Sでは記事一覧のトップページはタイトル一覧が表示されました。
標準対応はかなり嬉しいですね!

Twenty Fourteenの子テーマを準備する

さて、デフォルトでもかなり使いやすくオシャレなTwenty Fourteenですが、すべての状況に合うわけではありません。
子テーマを準備しカスタマイズしていきましょう!

WordPressの子テーマとは、直接Twenty Fourteenを修正するのではなく、修正必要部分だけを子テーマとしてまとめて管理していく方法です。
直接修正するのと表示結果はまったく同じになりますが、子テーマを作成した方が管理がしやすいと思います。
子テーマの作成はとても簡単にできますので、ぜひチャレンジしてみてください!

子テーマディレクトリを作成

WordPressのテーマがあるディレクトリ内に任意の名前で新たにディレクトリを作成します。
twentyfourteen-childというディレクトリを作成したという仮定で話をすすめます。

style.css作成

twentyfourteen-childディレクトリ内にstyle.cssというファイルを作ります。
そしてstyle.cssには以下の記述をします。/*
Theme Name: Twenty Fourteen Child
Template: twentyfourteen
*/

@import url('../twentyfourteen/style.css');
この記述でTwenty Fourteen Childというテーマ名でTwenty Fourteenの子テーマが完成です。
この状態ではTwenty Fourteenと全く同じです。

これにて子テーマにてTwenty Fourteenをカスタマイズする準備が整いました。
わくわくですね!

感想

私はこの記事作成現在ではTwenty Elevenを子テーマでカスタマイズして使用しています。
今後も本ブログではTwenty Eleven子テーマカスタマイズを使用予定なのですが、別のブログをWordPressにて立ち上げるタイミングでふと新しいデフォルトテーマが気になりました。
そして、リリースされたばかりのTwenty Fourteenを試してみると...
これが想像をはるかに超えてよかったんです!

まだまだTwenty Fourteenのことはあまり判っていませんが、ぼちぼちカスタマイズをして、その内容を本ブログにてシリーズ化していけたらと思います。


関連記事

Twenty Fourteenの検索枠の背景色を変更 Twenty Fourteenの検索枠の色変更
Twenty Fourteenの検索枠の背景色変更のカスタマイズです。
WordPressのTwenty Fourteenをフォトログにカスタマイズ Twenty Fourteenをフォトログ的に使う
Twenty Fourteenのトップページに写真をきれいに並べてフォトログテーマ風にカスタマイズしました。写真ギャラリーとして使えます。
Twenty Fourteenの背景色を変更する Twenty Fourteenの背景色を変更する
WordPressのデフォルトテーマにも採用されたTwenty Fourteenの背景色を変更するカスタマイズの紹介です。意外と手こずるカスタマイズですので、参考になれば幸いです。
WordPressのTwenty FourteenにヘッダーにSNSアイコン画像を貼る Twenty FourteenのヘッダーにSNSアイコン設置
レスポンシブで使いやすいWordPressテーマTwenty Fourteenのヘッダー部分に、SNSアイコン画像を貼り付けるカスタマイズを紹介します。
Twenty Fourteenのトップページをアイキャッチ画像と記事タイトルの一覧にするカスタマイズ Twenty Fourteenのトップをタイトル一覧にする
Twenty Fourteenのトップページをカスタマイズし、アイキャッチ画像と記事タイトルの一覧にしスッキリとレイアウトにする方法を紹介します。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>