最近、頂いたコメントの中で子テーマについてお話ししていたのですが、説明も長くなりそうなので、せっかくだから記事にしちゃえ、ということで子テーマやカスタマイズの基本についてちょっとおさらいしてみようと思います。

テーマって何？

WordPressのデザインを変更するときに、外観＞テーマというところで好きなテーマを選びますね。テーマは一種のきせかえみたいなもので、簡単にデザインを変えたり、ちょっとした機能を足すことが出来ます。

WordPressをインストールしただけの状態だと、Twenty Ten、Twenty Elevenという二つのテーマが入っています。これはデフォルトのテーマで、WordPressを開発してる方達が用意してくれた、標準のテーマといえるものです。

他にもたくさんのテーマを「テーマのインストール」からインストールすることが出来ます。もちろん、「テーマのインストール」から選ぶほかにも、色々なところでテーマを手に入れることができます。
（ただし、公式と言われるところ以外からのテーマには悪意のある物がまじっている場合もあります。見極めが出来ない場合は十分気をつけてくださいね）

そんな便利なテーマですが、インストールすると管理画面で選べるように表示されますね。これはなぜかというと、きちんと決まりがあるからです。

テーマってどこにあるの？

テーマは、WordPressのある場所/wp-content/themes/テーマのフォルダ　という場所に置かれます。これは、FTPなどで確認してみるとすぐに分かります。

とっても大事なstyle.css

ただ、そこにフォルダを置いただけでは、WordPressがテーマを探してくれません。テーマのstyle.cssにテーマの名前など、決められた情報を書かなければなりません。
例えば、Twenty Elevenを見てみると、

/*
Theme Name: Twenty Eleven
Theme URI: http://wordpress.org/extend/themes/twentyeleven
Author: the WordPress team
Author URI: http://wordpress.org/
Description: 2011年版の WordPress テーマは洗練されていて、軽量で、柔軟性があります。メニュー、ヘッダー画像、背景をあなたなりにアレンジしてみてください。明と暗のカラースキーム、リンクカラー、3つのレイアウトオプションが利用できるようになっています。「Twenty Eleven」は、フロントページをコンテンツの目立つショーケースへと変身させるショーケース固定ページテンプレートを備えています。ウィジェット対応のたくさんのエリア (サイドバー、3つのフッターエリア、ショーケース固定ページウィジェットエリア) があり、また、アサイド・リンク・引用・ステータスを表示する「短冊」ウィジェットを備えています。印刷用と管理者のエディタ用のスタイル、アイキャッチ画像（投稿、固定ページ上のヘッダー画像と注目の"固定"記事の大きな画像として）のサポート、6つの異なる投稿フォーマットの特別なスタイルが含まれています。
Version: 1.3
License: GNU General Public License
License URI: license.txt
Tags: dark, light, white, black, gray, one-column, two-columns, left-sidebar, right-sidebar, fixed-width, flexible-width, custom-background, custom-colors, custom-header, custom-menu, editor-style, featured-image-header, featured-images, full-width-template, microformats, post-formats, rtl-language-support, sticky-post, theme-options, translation-ready
*/

/* =Reset default browser CSS. Based on work by Eric Meyer: http://meyerweb.com/eric/tools/css/reset/index.html
-------------------------------------------------------------- */

と書いてあります。全部が必要な情報ではありませんが、このコメント部分をみて、WordPressは管理画面にテーマの一覧そして出しているわけなんですね〜。（もちろん、管理画面に出すだけではなくて、この記述がないと、テーマとして機能しません）

CSSファイルだからって見た目のことを書いているわけではないのです。テーマの中でとっても大事なファイルです。

cssとphp

テーマフォルダの中を見ると、style.cssのようなCSSファイルとindex.phpのようなPHPのファイルが入っていると思います。

ざっくり分けると、CSSが見た目部分、PHPがHTMLとして書きだすための仕組みの部分になります。

フォントの色や大きさを変えたいならCSS、出てくる文章そのものを変えたいならPHPを編集することになります。

子テーマって何？

このブログでも紹介していますが、WorsPressのテーマの中には、子テーマと呼ばれる種類の物があります。

これは元々あるテーマを最大限利用して、変更したい部分だけ記述すればいいという、大変便利なものです。これを使えば、テーマを1から書く必要がありません。

テーマをカスタマイズするときに、この子テーマをおすすめしている方が多いのには理由があります。

まず、子テーマを作ることによって、WordPressバージョンアップなどに伴って自分の変更したテーマが自動的に上書きされてしまうことが防げます。
また、親のテーマを直に編集してしまい、大きなミスをしたり、もとに戻したくなったときに簡単にもとに戻すことが出来ます。

管理画面から親のテーマを選べば、とりあえずはもとに戻せますし、もとの親テーマを見ることでどこがおかしくなったのか調べることも出来ます。

もちろん、変更前のテーマをまたダウンロードしてくる、ということも出来ますが、とても面倒ですし、そのテーマ自体がなくなったり変わっていたら大変です。

他にも、自分用の使いやすいテーマをつくっておいて、その子テーマでどんどん新しいテーマを作っていく、という使い方もできますね。

「テーマは直に編集しない」

大事なことなので、何回でも言っちゃいます。

ということで、私もカスタマイズには子テーマを使うことを強〜くおすすめしているワケなのですが、子テーマによるカスタマイズの基本についてももう一回じっくり見てみたいと思います。

子テーマの作り方

子テーマの作り方については「まずは子テーマをつくる準備から」に書いてありますので、ちょっと補足します。

子テーマに置くstyle.cssに記述するコメントが必要なのは、先ほど書いたように、それをテーマとして認識させるためです。
普通の物と違うのは、親のテーマを指定する部分ですね。
親のテーマを指定することで、この親テーマの機能を引き継げるわけです。

また、普通のテーマではstyle.cssのほかにindex.phpも必要ですが、これは親のものを利用できるため、style.cssを置くだけでテーマとして機能するようになっています。

このstyle.cssを好きな名前のフォルダに入れて、先程のテーマを置く場所に、FTPなどでアップします。

そうすれば、管理画面から自分の子テーマを選べるようになります。

子テーマのしくみ

さて、子テーマは親のテーマを利用する、といいましたが、いったいどこを利用してくれるのでしょうか？

試しにstyle.cssにテーマに必要なコメント部分のみ書いて有効化するとどうなるでしょうか？

/*
Theme Name:     child
Template:       twentyeleven
*/

これだけです。他には何も置きません。スクリーンショットです。

こちらはTwenty Eleven。

子テーマの方はCSSはすべて解除された状態ですが、コンテンツやメニューなどは同じように出力されているのがわかるでしょうか。

子テーマは機能は引き継ぐけどデザインは引き継がない

というわけで、よく子テーマに書かれる@importの登場です。もし、親テーマのCSSを大部分利用してちょっと変えたいだけ、という場合は

@import url('../twentyeleven/style.css');

というように親のテーマのCSSを読み込みます。そうすると、親テーマと全く変わらない子テーマの出来上がりです。

子テーマでどうやって変更するの？

子テーマでの変更の基本は「上書き」です。

例えばCSSを変更したいときは、子テーマのstyle.cssに変更したい部分だけ書いていきます。
CSSは読み込んだ順に適用されていきます。WordPressは@importで呼ばれた親テーマのCSSを読んでから子テーマのCSSを読むことになるので、必要部分を書き足していくだけでよいわけです。
親テーマのCSSをすべてコピペしてくる、という必要はありません。
（もちろん、親のCSSを全く読みこまずに、全部自分で書く、というのもアリですよ）

また、ほかのphpのテンプレートに関しても、基本は上書きになります。例えば、ちょっとheader.phpに変更を加えたいな、というときには、まず子テーマに親テーマのheader.phpをコピーしてきます。そして、そのコピーしたものに変更を加えれば、そちらが後から読まれて、有効になります。

注意するのはファイル名を同じにするということです。同じファイル名でないと上書きしてくれません。

ちょっと付け足したい

例えば、特定のページだけ、ちょっと出されるものを変えたいなということもあると思います。

チョコレート、「chocolate」というスラッグの付いたカテゴリーがあるとします。そのカテゴリーだけちょっと何か変えたいよ、というときは、category-chocolate.phpというファイルを新たに作って子テーマの中に置けばいいのです。

このルールについてはWordPress Codexのテンプレート階層を参考にすると良いと思います。

要注意！functions.php

CSSもテンプレートも基本的に上書きなのでカスタマイズもかなり楽なのですが、functions.php、これがクセモノです。これにはちょっと癖があるのですが、今回は基本の基本ということのにしたいので、ここまでで。

このブログでもいつか取り上げるかもしれませんし、調べると色々な情報がでてくるので、「WordPress 子テーマ　functions.php」などで調べてみるとよいかもしれません。

安心してカスタマイズを！

子テーマを作れば、少しくらい失敗しても、もとはきちんとあるので大丈夫。ちょっと冒険も出来ますね。

ということで、子テーマと親テーマの仕組みをしっかりおさらいして、安心してカスタマイズを楽しんでください！

@MakeGoodTimeさんの　「WordPress をはじめるときに知っていると役立つこと」からバトンを引き継いだ、@Webourgeon_comです。

実はAdvent Calendarが大好きなので「楽しそう！」ってつい勢いで申し込んでしまったのですが、みなさんの素晴らしいブログを読んで、何を書いたらいいのかとても迷っています。

私も最近本当に助けられてばかりのWordPressのコミニュティの素敵さも@rie05さんや@shinichiNが書いてくださってるし、技術的なものはあまり気のきいたこと書けません。

この前のWordBench東京の交流会のLTでお話させていただいた「お客様にWordPressにしてっていわれたけど、どうやって仕組みを考えたらいいかわからない、とかここ突っ込んで確認しとかないとはまるよ、みたいな話」のスライドが「アレだけじゃ何のことかわからないよ〜っ」という状態のまま置いてあることを思い出しました。（ごめんなさい…）

というわけで、折角の機会なのでスライドの内容を題材にWordPressをCMSとして使いながらオリジナルテーマを作る時の考え方について書こうと思います。

お題

このようなホームページを作ります。

WordPressには色々な機能があるので、何を使ったらこれが実現出来るのか、ということをまず考えていきます。

基本の機能を使う

出来れば簡単に作れた方が嬉しいので、まずはTwentyTenやTwentyElevenなどのデフォルトのテーマにある機能などで、対応できる部分を考えました。

オリジナルで作るときも、ちゃんとデフォルトのテーマにお手本があるので真似することもできるし、子テーマを使えばその部分はそのまま使うことが出来ますね。

デフォルトのテーマは一冊のWordPress勉強本みたいな物じゃないかと思います。カスタマイズしたり分解したり、眺めて楽しんだり（？）たっぷり使っちゃいましょう。

私もこれからTwentyElevenとしっかりお付き合いしてみたいなーと思っています。（成果は後ほど！）

メニュー

メニューに関してはカスタムメニューが本当におすすめです。投稿や、固定ページや、カスタム投稿タイプの記事だけでなく、カテゴリーやオリジナルのリンクまで自由自在に並べることが出来ます。

また、複数作れるので、グローバルナビゲーション、フッターやサイドのナビゲーションなど、使い分けることが出来ます。

カスタムヘッダー

カスタムヘッダーで管理画面からサイトのイメージ画像を簡単に入れ替えることができます。
それぞれのページで画像を変えたかったらアイキャッチを使う、という手もありますね。

これはWordPress3.3でTwentyElevenを使ったときのカスタムヘッダーの設定画面です。

ウィジェットの活用

サイドバーにバナーなどを置きたい時にもウィジェットはとても便利です。ウィジェットもたくさん作れるので、フッターに入れたり、トップページなどで目立たせたいコンテンツを入れておく、なんていう使い方も出来ます。

カスタムメニュー、カスタムヘッダー、ウィジェットを上手に利用すると自分だけでなく他の方でも更新しやすいものが作れますね。

ブログ

WordPressといったらやっぱりブログです！！

「投稿」をブログのみで使うようにしておくと、ブログだけデザインを変える、というようなことも楽々出来るのでおすすめです。

プラグイン

WordPressとプラグインは切り離して考えられないほどプラグインが充実しています。しかもほとんどのものが無料だったりします。これは本当にすごくてありがたい事だと思っています。

たくさんの労力と使った時間に感謝しながら使いたいです。

はまりどころ

次は色々な方法が考えられるけど、始めにきちんと設計しておかないと後で困りそうな部分について考えます。

こういったはまりどころは、今でも本当にたくさんあって、毎回反省しながら次こそは、と思うのですが、また予想できなかった問題が起きたりします。

でもそんな情報を共有して、誰かの参考になったら嬉しいし、または、こんな方法があるよ〜なんてアドバイスしていただけたら嬉しいな、なんてちょっと虫のいいことを考えてます♪

はまりどころ1.「新着情報」

新着情報とひとくちでいってもいろいろなパターンがあります。

• 独自の文章で新着を載せたいですか
• ブログの新着を読み込みますか
• 特定のコンテンツの新着を読み込みますか

その都度、お知らせを書いていきたいようなときには 「カスタム投稿タイプ」を使うと便利です。「お知らせ」という「カスタム投稿タイプ」を作ってトップページに読み込みます。

ブログを併設している場合は、ブログのみを「投稿」で作っておくと新着表示が楽になります。

特定のコンテンツの新着をお知らせしたい時、それが固定ページか「カスタム投稿タイプ」なのか、またはブログの特定カテゴリーなのか、など様々なパターンが考えられます。新着に読み込むと分かっているものを逆に始めから「カスタム投稿タイプ」で作っておくというのもいいかもしれません。

「コンテンツの一部読み込み」

ちょっと分かりにくいですが、例えば「スタッフ紹介」のようなページがあって、そこからスタッフの名前や写真、ちょっとした紹介などをトップページにも載せたいときなどありますね？
こういうのは出来ればもとのページから読み込むだけにしたいものです。

これは一例ですが、カスタム投稿タイプ「staff」を作り、そこに人数分ページをつくっていき、固定ページ「スタッフ紹介」に読み込みます。

こうしておくと内容に変動があった時でも、「長いページから該当する人を探して削除しようとしたら他の人まで。。。！！！」のような悲しい事故も防げますね。

トップページに一部読み込みたいときは、写真にアイキャッチを使うとか、名前をカスタムフィールドに入れるとか、文章は抜粋の機能を使うとか、工夫が必要です。

また、この方法を使うと固定ページに一覧表示したときにひとり分ずつ記事IDを付けることもできるので、トップページからその部分にリンクさせたい時などにも、ちょっとごにょごにょすると自動でできるという、ナイスなおまけが付いてきます。

「更新されていくページ」

更新されていくページはカスタム投稿タイプで作ると便利です。

今回の例では施工事例（実績紹介）のような物として考えています。

もしこのページがこんな固定レイアウトだとしたら。。ぜひカスタムフィールドを使いましょう。それぞれを項目として登録しておき、そこに内容を入れるだけ。テーマの方でレイアウトをきちんとしておけば、複雑なレイアウトも楽につくっていくことが出来ます。

カスタムフィールドを使うには便利なプラグインもありますので活用したいものです。

そしてカスタム投稿タイプで作ったものにカスタムタクソノミーで分類をしておくと、なんと、カスタムメニュー項目としても扱うことが出来ます。カスタムタクソノミーがメニューに簡単に出せるのはとっても便利だと思います。

カスタム投稿タイプ、カスタムタクソノミー、カスタムフィールドについては7日目の@naokomcさんが
「WORDPRESS のカスタムフィールド・投稿タイプ・タクソノミーを使い分けよう！」で丁寧に解説してくださってるのでまだの方はぜひ読んでみてください。

工夫と考え方と組み合わせ

テーマを作るときも、基本は工夫と考え方と組み合わせだと思います。

自分がやりたい事、伝えたい事は何なのか、またはお客様やサイトに訪れてくれる方が求めていることは何なのか、まずはっきりさせる。

そうすれば、WordPressは様々な情報があふれていますし、困っていれば手を差し伸べてくれるフォーラムや勉強会、コミニュティなどもあるので、きっと作りたいものが作れるようになると思います。

誰かに何かを伝えるものを作り上げる手段の一つとして、私はWordPressが好きなんだなぁ、と思っています。

次　お願いします！

なんだかまとまりがなくなってしまいました。読み返してみると少しずつ前の方と書いてることが重なってしまったようなそうでもないような。。

WordPress Advent Calendar 2011、明日は@anticyborg さんです。楽しみにしています！！

始めにお話を頂いたときは本当にびっくりして「ホントに私でいいんですか？」と思いましたが、お話を聞いてみると、
「もっともっと色々な方にWordPressに親しんでもらいたい」
というお話で、それは私が思っていることでもあったし、少しずつ誰かに何かを返していかないとな〜と思っていたこともあり、思い切ってお引き受けさせていただいきました。

途中で、
「こういう内容ってみんな必要としてるのかなぁ〜」
と不安になってたら@jim0912さんが
「自分で重要だと思っていることは、大抵他の人も一緒。」
って励ましてくださったり、@odysseyさんがスライドの作り方教えてくださったりと、皆さまの優しさに助けられました。

というわけで、当日お話させていただいたわけですが、自分ではどんなふうにしゃべったのか、実はよく覚えてません。でも、交流会で、色々な方に「分かりやすかったです」とか、「やってみようと思いました」などど言っていただけて、涙が出るほど嬉しかったです。聞いてくださった方、本当にありがとうございました。

そしてこれをきっかけに沢山の方とお話ができて、この出会いは宝物だなぁ、と思いました。

スライドを公開します

当日のスライドを公開します。勉強会のものと、交流会のLTの時のものです。

勉強会の方のサンプルサイトもしばらくそのまま置いておきます。

ただ、このスライドやサンプルサイトのCSSは勉強会でお話ししたとおり、「CSSだけで」という制約を設けたため、
あまり実用的でないものも含まれています。また、CSS3に対応してないブラウザ用の対応も全くしてません。
そして。。時間がなかったので、CSSの書き方が汚いです。。（うう。。）いつか直してアップします。

勉強会のスライド

交流会のスライド

CSSの可能性

このサンプルをつくりながら、HTMLを全くいじれなくてCSSだけで、なんて事現実にあるのかな〜と考えていましたが、そう、ありました！

WordCamp Tokyoでも話題になっていた、「レスポンシブ・ウェブ・デザイン」。正しくこれじゃないですか！

ワンソースでデバイスによって見た目が変わる「レスポンシブ・ウェブ・デザイン」。これはwebの可能性でもあるけど、CSSの可能性とも言えるんじゃないでしょうか。

できることから

何でも、自分の出来ること、知っている事から広げていけばいいのではないかと思っているので、これからもどんどん勉強していきたいと思います。

何かができるようになるって嬉しいですよね！

ブログもまた少しずつ書いていこうと思います。

追記

勉強会のスライドを入れ替えました。内容に変更はありません。(11/29 0:15)

始めてのWordCampで、今回は日程が決まるとすぐに申し込み、わくわくしながら待っていました。

なのに遅刻

せっかくなので朝からいってどんな雰囲気なのか楽しもうと思っていたのに、出かける時間と到着時間を寝ている間に脳内変換。それでもなんとか2つめのセッションから聞くことが出来ました。

きいたもの

今回は聞きたいセッションが山盛りで同じ時間に重なっていたりして、本当にどれを聞けばいいのか悩みました。
悩んだ末聞いたのはこちら。

• 堀内 敬子さん　「早く・良いものを作るための、WordPressサイト構築ワークフロー」
• たけさん　「WordPress でできる、あんなコトそんなコト」
• parkn_parkさん　「WordPressのオリジナルテーマ制作デザイン時に私が心がけている「更新しやすい」テーマ作り」
• マクラケン直子さん　「WordPress の現在とこれから」
• こもりまさあきさん　「未来を見据えたレスポンシブ・パブリッシング」
• たにぐち　まことさん　「実践！オリジナルテーマで作る、スマホサイト＆マルチスクリーンサイト」
• 原　一浩さん　「クリーンな WordPress サイトのための PHP コーディングのお作法 ― 計画的に WordPress を拡張していくためのフレームワーク思考」
• ジョン・フォードさん　「WordPress.com の裏側」

堀内 敬子さんのお話は、実際の案件を題材にされていて、共感出来る部分、反省する部分多々ありました。

たけさんのお話はフリーランスとしての目線も含めたWordPressの面白い使い方について。こういうことは考えられないので、すごいなぁ、と思います。

parkn_parkさんはテーマの作り方をとてもとても丁寧に解説。分かりやすい丁寧なセッションでした。

マクラケン直子さんはWordPressのことについて。WordPressが世界でどのくらいつかわれてるのか、びっくりです。

こもりまさあきさんはレスポンシブのお話。やはり未来を見ていかないと！次のセッションにまでつなげる素晴らしさでした。

たにぐち　まことさんはスマートフォンサイトの作り方。おお！こういうふうに考えるのかぁ！と目からウロコの部分がありました。

原　一浩さんはPHPのお話。プログラミング的な考えは出来ないので、考え方がとても勉強になりました。

ジョン・フォードさんのお話は、普段なかなかきけそうにない、貴重なお話。英語で質問されてる方もたくさんいました。

どのお話もとても良くってWordPressに限らず、自分の働き方とか考え方とか、そういうことも考えさせられました。

ほんと、今回の一番の不満はこれ。「こんなにいいお話を重ねないでくださ〜〜い！」

戦利品

交流会からが本番です

交流会もすごいひとと熱気でした。

はぐれたら2度と会えないんじゃないかってくらい。

「知らない人最低3人に声をかけよう」

って、え〜〜ドキドキするって思いましたが、実際は、本当にたくさんの方とお話をすることが出来ました。

前日のWordBenchでご挨拶だけになってしまった方とももう一度お話できたのも良かった。こういうことでもないと絶対に会えないような方と会えるなんて、本当にステキです。

遠くからいらっしゃってる方が「人に会いに来るんです」って言っていたのが印象的でした。

食べそこねたわぷーケーキ

いろんな立場の人が全国から集まってたくさんの出会いがある。みなさんとても仕事とか、立場とか関係なく優しくて、バイタリティーがあって、頑張ろうって思いました。

あとはスライドやUSTでじっくり復習することにします。

WordCampでは初心者向けから中上級者向けまで、色々なセッションがあるので、興味のあるところだけ聴きに行くもよし、よくばって色々聴いちゃうもよし、懇親会に出て色々な方とお話をしてみるもよし、色々な楽しみ方ができると思います。まだの方、ぜひ行ってみてはいかがでしょうか。

その他にも、WordPressは地域でのコミニュティがとっても盛んで、全国でたくさん勉強会や集まりが開かれています。WordBenchのサイトに情報が載っていますので、お近くのイベントを見つけたら、参加してみると楽しいのではないかなぁ、と思います。

そのWordBenchですが、11月26日、 WordBench 東京 勉強会＆ユーザー交流会というイベントが行われます。そちらで、なんと、私もスピーカーとしてお話をさせていただくことになりました。
たくさんたくさんすごい方がいらっしゃるのに、私なんかで大丈夫なのかしら？と悩みましたが、私なりに何かお伝えできることもあるのかもしれないと、本当にドキドキしながらお引き受けさせていただきました。

勉強会の方は、あっという間に定員いっぱいになってしまいましたが（補欠募集はしてるみたいです）、交流会の方はまだ空きがあるようです。交流会も普段悩んでいることなどをお話しできたり、色々な方からのお話を聞いたりするよいチャンスと思います。興味のある方はぜひ！

私はちょっと人見知りなので、おろおろしてしまうかもしれませんが、勉強したり、色々な方とお話ししたり、WordPressを楽しむ2日間にしたいと思っています。

次回は、またWordPressのカスタマイズのお話を続けていこうと思います。それでは、また。

今日はTwenty Elevenの、便利なところと、それがどのようにカスタマイズを難しくしているのかを、書いてみたいと思います。

スマートフォンに対応（1）〜レイアウトが相対的

Twenty Elevenの一番の特徴は、そのままでスマートフォンやタブレット表示に対応してくれていることかもしれません。

Twenty Elevenを有効にした状態で、ブラウザのウインドウのサイズを変えてみてください。ウインドウのサイズに合わせて、コンテンツやサイドバーの幅、ヘッダー画像の大きさなどが変わりますね。どんどん小さくしていくと、あるところでサイドバーが下に落っこちて1カラムになります。また、ウインドウのサイズがある大きさより小さくなると、フォントのサイズも変わります。

すごいですね！

こういうのを、「レスポンシブwebデザイン」と呼んでいて、いろんな環境からサイトを見ることが多くなってきていることに対応するひとつの方法です。同じHTMLを使ってウインドウのサイズに合わせてレイアウトやデザインなどをCSSによって変えていくものです。スマートフォンサイトなどを別に用意しなくていいのでとても便利です。

「いいじゃない！どんどん使おうよ！」

と言いたいところなのですが。。。これがとってもややこしいんです。

試しに、Twenty ElevenのCSSファイルの68行目当たりから始まる「Structure」という部分を見てみましょう。

/* =Structure
----------------------------------------------- */

body {
     padding: 0 2em;
}
#page {
     margin: 2em auto;
     max-width: 1000px;
}
#branding hgroup {
     margin: 0 7.6%;
}
#access div {
     margin: 0 7.6%;
}
#primary {
     float: left;
     margin: 0 -26.4% 0 0;
     width: 100%;
}
#content {
     margin: 0 34% 0 7.6%;
     width: 58.4%;
}
#secondary {
     float: right;
     margin-right: 7.6%;
     width: 18.8%;
}

これは基本のレイアウトの部分なのですが、すごく微妙な感じの%で設定されていますね。これをざっくり説明すると、「page」（外枠の大きさ）は最大1000pxに決めて、そのなかの「primary 」「content」「secondary」などはそれに対するパーセントで大きさを決めています。微妙な数字になってしまうのは、もともとのレイアウトをピクセルで考えておいて、それをパーセントに直すからなんですが、ちょっと見ただけでは、どういう意味の数字なのか分かりにくくなってしまっています。

コンテンツの幅などを変えたい、と思ったときに、今まではピクセルで簡単に指定できました。でも、この相対的な設定の仕方のために、どことどこが影響しあっているのかとか、この数字はどこから出てきているのか、ということを見つけ出すのも難しくなっていると思います。そして、うっかりすると、カラム落ち..なんてことにもなりかねないので、しっかり計算しないといけませんね。

スマートフォンに対応（1）〜MediaQuery（メディアクエリ）

はい、また耳慣れない言葉が出てきました。聞いたことがある方、使っている方もいらっしゃると思いますが、ちょっと説明します。MediaQuery（メディアクエリ）というのは、すごく簡単に言うと、デバイス（ウインドウのサイズ）に合わせて、それぞれの設定ができるCSSの事です。

Twenty ElevenのCSSの2237行目当たりを見てみましょう。「=Responsive Structure」というコメントがある部分です。

@media (max-width: 800px) 、@media (max-width: 650px)、@media (max-width: 450px) 、@media only screen and (min-device-width: 320px) and (max-device-width: 480px) と設定が続いています。見つけられましたか？

最大幅800px、650px、450px、これはふつうのブラウザからタブレットくらいまでですね。最後のは、デバイスの最小幅が320px、最大幅が480px、とスマートフォン向けになっている感じです。

この部分のおかげで、スマートフォンやタブレット、大きなディスプレイや小さなディスプレイ、色々なものに対応できるのですが、レイアウトを変えたくなったときには、この部分にも変更を加えないといけません。

つまり、レイアウトやフォントサイズなどを変更するためには、パーセントの計算をした上で、MediaQuery（メディアクエリ）で指定されている部分も変えてあげないといけない、という何重かの手間がかかるわけです。

管理画面でレイアウト選択

管理画面で、外観＞テーマ設定のところを見ると、「デフォルトのレイアウト」とあって、3種類のレイアウトを選択できるようになっています。

「おお！！！これば便利！」

と思った人も多いのでは？でも、これもカスタマイズするとき、意外にクセモノです。

• 左コンテンツを選択したとき→two-column right-sidebar
• 右コンテンツを選択したとき→two-column left-sidebar
• 1カラムを選択したとき→ one-column content

というスタイルがbodyに書きこまれます。ですので、微調整したい時には、該当剃る部分をしっかり探して変えてあげないと、「CSSが効かないよ〜〜」って、何時間も悩むことになったりしかねません。

管理画面でカラー選択

同じく管理画面の、外観＞テーマ設定に「色の設定」という部分があります。デフォルトでは「ライトカラー」の白っぽい色ですが、「ダークカラー」を選ぶと黒っぽい感じになります。

これもなかなかいいですね！

さて、これをベースにちょっと色合いなど変えてみようかな…とTwenty ElevenのCSSを探してみても…..それらしい記述がありません。このカラー設定に関するCSSは、テーマフォルダの中にある、colorsというフォルダの中、drak.cssというファイルで設定しています。管理画面で色の設定を変えると、このスタイルシートへのリンクが、headに自動で追加される仕組みです。ですから、どちらの設定にしたのか、しっかり把握してないと、やっぱり「CSSが効かないよ〜〜」って悩むことになるかもしれません。

その他いっぱい

その他にも、たくさんのページのフォーマットが選べるようになっている分、それ専用のスタイルの設定がされています。これもうまく該当箇所を見つけて変えていかないと、うまく変わらなかったり、一カ所だけ変になったりと、つまずくことが多くなるかもしれません。

また、高機能な分、CSSだけではどうにもならなくて、functions.phpなど、テーマ本体のほうをいじらないと、ということも増えてくると思います。

でも楽しいよ

だいぶ脅かしてしまったでしょうか。でも、Twenty Elevenには、WordPressで出来ることの見本がいっぱい詰まっています。今までTwenty Tenのカスタマイズについて考える時にやってきたように、出てくるHTMLとテーマファイルをじっくり見比べれば、分かってくることも多いです。テーマを作っていきたい人にも、こんな機能を持たせるにはこんなことをすればいいんだ、という見本がいっぱいです。

ぜひ色々いじって楽しんでみてください。（はまったらまず、この記事にあるようなことを確認してみてくださいね）

そして、難しいな、と、ここまでの機能はいらないな、と思う人はTwenty Tenや、その他のシンプルなテーマを使ってみるのも良いと思います。たくさんの選択肢があることもWordPressの魅力のひとつですよね！

それでは、楽しいカスタマイズを！

今まではCSSでするTwenty Tenのカスタマイズについて色々考えてきました。CSSだけでも本当にいろんなことが出来ますね。ただ、本格的に色々やってみよう、と思い始めると、CSSだけではなくテーマのファイルも変更していかなくてはならなくなってきます。

本当はテーマの構造から説明していこうと思っていたのですが、いきなりここから始めちゃいますね。

Twenty Tenのテーマのフォルダの中をみてみよう

さて、まずはTwenty Tenのテーマのフォルダの中を見てください。ずら〜っとファイルが並んでいますね。***.phpなどど、phpという名前がついたファイルがたくさんあります。WordPressは基本的にPHPという言葉を使って書かれているので、テーマのファイルもPHPになります。

つまり….PHPを避けて通ることが出来ない….

そして、WordPressの中で決められた、WordPressのための言葉、テンプレートタグ、というものがあります。テーマはこのテンプレートタグとPHPの組み合わせで出来ているんです。

HTMLやらCSSやらでも大変なのに、まだまだあるの？って感じですよね。私も初めてWordPressのテーマの中身を見たとき「何だこの宇宙語は？」って思いました。でも、じっくり勉強していくと、やがて「となりの星の言葉」くらいになり「外国語くらい」になり。。「まぁ、ちょっと何言ってるかわかるようになってきたかも」、と少しづつわかるようになってきました。私も本当にまだまだですが、みなさんもぜひ、挑戦してみてくださいね。

では、今回必要なファイルをちょっと開いてみましょう。

テーマに色々な機能を追加する、functions.php

Twenty Tenのフォルダの中を見ると、「functions.php」というファイルがあると思います。これを開いてみましょう。

なにやら難しそうなことがズラズラと書いてありますね。そ〜〜っと閉じたりせずに、少し下の方へいってみましょう。114行目当たりに

// The height and width of your custom header. You can hook into the theme's own filters to change these values.
	// Add a filter to twentyten_header_image_width and twentyten_header_image_height to change these values.
	define( 'HEADER_IMAGE_WIDTH', apply_filters( 'twentyten_header_image_width', 940 ) );
	define( 'HEADER_IMAGE_HEIGHT', apply_filters( 'twentyten_header_image_height', 198 ) );

と書いてある所があります。英語を読んでみると、「カスタムヘッダーの高さと幅をして指定してますよ」という感じのことが書いてあります。
そして、940とか198とかいう数字がありますね。これが管理画面で見る

デフォルト画像の代わりにサイトの一番上に表示させるカスタムなヘッダー画像をアップロードできます。
画像の大きさを940 × 198ピクセルにするとそのままの大きさで表示されます。

の数字です。

そう、こんなふうに「functions.php」では、テーマに様々な機能を付け加えている、プラグインみたいなファイルなんです。みなさんのよく使うカスタムメニューやウィジェットなども、ここで指定してあるんですよ。興味のある方は、どこに指定されているか、探してみてくださいね。

さぁ、ヘッダーのイメージを指定しているところがわかりました。これを変更すればバッチリですね…

いいえ！ちょっと待ってください！

「functions.php」も上書きされちゃう

前に「まずは子テーマをつくる準備から」で子テーマを作るおはなしをしました。子テーマを作る理由は、直にTwenty Tenを変更していくと、何かあったときに戻せなくなってしまうこと、また、WordPressをバージョンアップするときに、テーマも上書きされてしまうことがあるためです。

テーマが上書きされる、ということは「functions.php」も上書きされてしまうということです。それでは困るので、子テーマを作り、そこに「functions.php」という名前のPHPファイルを作りましょう。

ヘッダーのイメージのサイズ変更のコードを書く

<?php

add_filter('twentyten_header_image_width', 'my_header_width');

function my_header_width($size){
    return 1000;
}

?>

「functions.php」に上のコードを書きます。「functions.php」の書き方の注意については、「functions.phpを編集したら、サイトが真っ白になっちゃったときに試してみてね」を見てくださいね。

すでに「functions.php」がある人は、元々ある

<?php

......
?>

の中に入れてしまうといいと思います。

上のコードの意味は、「twentyten_header_image_width」という設定の言葉を自分の作った「my_header_width」という言葉に取り替えますよ、そそして「my_header_width」は「1000（px) 」にしますよ、って感じです。「twentyten_header_image_width」は先程見たtwentytenの「functions.php」に書かれていたものですね。

width（幅）をheight（高さ）に変えれば高さを変える事ができます。

管理画面に行くと、ヘッダーのサイズが変わっていると思います。変えたサイズのファイルをアップロードして、ヘッダー画像を取り替えましょう。

それだけじゃダメよ！

さぁ、できた！と思って、確認すると…

ヘッダー画像だけがびょ〜〜ンと長くなっていませんか？

これはTwenty Tenのコンテンツの幅を変更していないからです。CSSで、ヘッダー画像のはばに合わせて、全体幅、コンテンツ幅、サイドバーの幅など調整しましょう。

「Twenty Ten テーマ　全体のレイアウトのカスタマイズ」、「Twenty Tenのレイアウトを変える(2)〜コンテンツ幅の調整」などにも説明してるので、そちらもどうぞ。

ちょっとした機能を追加できたり、変更できたり、テーマを変更できたりするようになると、カスタマイズの幅が格段に広がると思います。ぜひ、ちょっとしたことから挑戦してみてください。

では、楽しいカスタマイズを…

もちろん、雰囲気は似ていても全く新しいテーマですから、それでいいと思うのですが、戸惑う方もいらっしゃるかもしれませんね。

ですから、テーマ本体のおはなしの前に、出力されるHTMLの構造をざーっと見ていきたいと思います。Twenty Tenと比べてみたい方はTwenty Ten テーマの構成（レイアウト）-1を見てくださいね。

Twenty Elevenのレイアウトの大まかな構造

上の図のように、Twenty Elevenでは大きな囲みの「div #page」、その中に大きくわけてheader、#main、footerという構造になっています。

HTML5が積極的に使われている！

みなさんはHTML5をご存知でしょうか。今までHTML4やXHTMLという形が多く使われてきましたが、新しくできてきたHTMLの書き方のことです。まだ、細かいところが正式に決まっていない部分もありますが、たくさんの可能性を秘めていて、これからの標準になっていくと思われるものです。

そして、HTMLの文章の構造を今までよりもすっきりと、しかも的確に表すことができます。

例えば、上の例ですと、今まではdivにheaderやfooterというidを付けて、意味合いを持たせていましたが、直接「header」や「footer」という名前になっていますね。もちろんdivと書かない分楽になるだけでなく、「ここがこの書類のヘッダーですよ」「ここはフッターですよ」としっかりと意味付けられる用になるわけです。その分、色々と条件が厳しかったりするわけですが、だんだんに覚えていきましょうね！

今はHTML5というのを使ってるんだなぁ、と思っておいていただければいいかな、と思います。（知りたい人は、たくさんの情報が出てますからどんどん勉強してみてくださいね）

実はTwenty TenもHTML5で書かれていたのですが、まだまだ発展途上だったために、ほとんどの部分が今までの形式で書かれていました。今回積極的にHTML5を使ったということで、時代が進んだんだなぁ〜、と思いました。

外枠の囲みの名前が変わった！

HTML5の積極的な仕様の他の大きな変化の一つとして、外枠の囲みの部分のidがwrapperからpageに変わっています。ただの囲み、という意味合いからこれがひとつのページですよ、というしっかりした意味合いに変えたかったのかもしれませんね。

primaryとsecondry

さて、もう一つ、混乱しちゃいそうな変化にprimaryとsecondryがあります。Twenty Tenの時は、primaryとsecondryはサイドバーに当たる部分の名前でした。ところが、Twenty Elevenでは、「#main」をprimaryとsecondryに分け、primaryの中に「#content」が入っている、という仕組みになっています。

これは、Twenty Elevenのテーマが、コンテンツ部分と、サイドバー、という固定のレイアウトの考え方から一歩飛び出したためかな、と思っています。このことについては、また別の機会に書きたいと思いますので、今は「primaryとsecondryの扱いがかわったぞ！」と覚えておいてくださいね。

ナビゲーションはnav

もう一つ、メニューの部分です。今まではdiv #access .menuという感じでしたが、HTML5を使ってすっきりと「nav」となっています。

新しいことも少しずつ

Twenty ElevenではHTML5という新しい技術が使われています。またCSSもCSS3というこれまた新しい技術も使われています。今までだってややこしかったのに〜〜って思う方も多いと思います。新しいものにはそれなりのメリットがあって、作られていくものですが、進みが早くて、追いついていくのも大変です。
私たちはお仕事ですから、どんどん勉強しないといけないですが、みなさんも、必要な部分だけ、ちょっとずつでも覚えていくと、何か楽しいことができるかもしれません。
楽しみましょうね！

ですからこのブログでも今まで書いてきた「Twenty Ten」のカスタマイズの記事をもとに、今度はテーマファイルやテンプレートタグの方にも目を向けながら、「Twenty Eleven」を中心にWordPressのカスタマイズについてもう少し深く考えていこうと思います。

WordPress3.2は動作環境に注意しよう

WordPress3.2にバージョンアップしたいと考えている方、動作環境に注意してくださいね！もう知っている方も多いと思いますが、再確認です。

• PHP バージョン 5.2.4 以上
• MySQL バージョン 5.0 以上

この中でPHPのバージョンがクセモノです。レンタルサーバで、PHP5.2.4 以上というのを満たしていないところもまだまだあります。そうするとWP3.2を使いたくても使えない、ということになってしまいます。

もしPHPのバージョンが不適切であると、このような表示が出ます。

動作環境が適切かどうか調べてくれるプラグイン

PHPと MySQLのバージョンが適切かどうか調べてくれるHealth Checkというプラグインもあるようです。このようなものを利用してもいいですね。

WordPressをバージョンアップ

WordPressのバージョンアップについては以前、WordPressのアップグレード（アップデート）のしかたという記事を書きましたので、これを参考にしていただければ、と思います。

くれぐれもバックアップは忘れずに！！

それではこれから新しいWordPressを一緒に楽しみましょう！！（出遅れぎみですが。。）

コメントを頂き、この方法についての記述が不十分でしたので、追記をさせていただきました。

ご覧いただき、画像置き換えについてはメリット、デメリット、また様々な方法がありますので、どうぞ、十分に注意してお使いください。

お仕事に追われている間にWordPressも3.2になり、新しい標準のテーマ、Twenty Elevenも出てしまいました！
そろそろこちらのことについても書いていかなければ、と思っています。

今日は、お知らせまで。