WordPress3.0の新デフォルトテーマ「Twenty Ten」をベースに子テーマを作る方法（２）

WordPress3.0からデフォルト（初期設定）のテーマが、「Twenty Ten」というテーマになりました。

「Twenty Ten」は、非常に多機能なテーマと言われています。

WordPress.comの日本語版ブログに、「Twenty Ten」の説明がありますので、一度参照されてください。
新テーマ: Twenty Ten — ブログ — WordPress.com

今回は、WordPressで特定のテーマを「親テーマ」として継承する形で、WordPressのテーマを作る「子テーマ」についての説明です。
自分は、最近は、「Twenty Ten」を親テーマとして、「子テーマ」を作る機会が増えてきました。

自分が「子テーマ」で今まで制作＆運営をしていて感じるメリットは、以下の通りです。
（１）親テーマの機能やデザインや仕組みを活かしつつ、編集したいところだけ、編集できる。
（２）親テーマの作成者がバージョンアップした際にも、そのまま継承できる。
（３）親テーマが既にある状態で作るので、短時間で制作ができる。
（４）サイトをシリーズ化や、色が違うだけのサイトなどを作る場合、子テーマにした方が管理が簡単。
などです。

デメリットとしては、
（１）親テーマベースなので、親テーマのコードの理解が必要。
ということでしょうか。
このデメリットについては、WordPress3.0からデフォルト（初期設定）のテーマが、「Twenty Ten」を親テーマとすることで、リファレンスも多いですし、多くの方の制作事例も増えてきていますので、カバーできるのではないかと考えています。

なお、わざわざ「子テーマ」として作らずに、親テーマを直接編集した方が早いのでは？と感じる方もいらっしゃるかと思います。
もちろん、ゼロから作った自作テーマをカスタマイズする場合には、この方が理解しやすいこともあると思います。
しかしながら、他のテーマを継承して作る場合には、「子テーマ」の方が上記メリットなどの点で、使いやすいと感じています。
また、WordPressで請負などをされている業者の中には、わざわざ自作のテーマを「親テーマ」として、お客さんごとに「子テーマ」にしている人もいます。「親テーマ」を作り込んで、色々な機能を作った場合には、この方がメリットが多いのだと思います。

「子テーマ」って何？という方もいらっしゃると思いますが、ぜひ一度、調べていただいて、必要があると感じましたら、試してみていただければと思います。個人的には、WordPressのテーマ編集に際しての「子テーマ」の活用はオススメです。

さて、「Twenty Ten」を親テーマとして「子テーマ」を作る場合、
テキストフォント（＝文字）が変、と言いますか、日本語には適さないように思われる方もいらっしゃるかと思います。

これは、「Twenty Ten」のstyle.cssファイルの中の、以下の「font-family」の部分が影響しています。

/* =Fonts
————————————————————– */
body,
input,
textarea,
.page-title span,
.pingback a.url {
font-family: Georgia, “Bitstream Charter”, serif;
}
h3#comments-title,
h3#reply-title,
#access .menu,
#access div.menu ul,
#cancel-comment-reply-link,
.form-allowed-tags,
#site-info,
#site-title,
#wp-calendar,
.comment-meta,
.comment-body tr th,
.comment-body thead th,
.entry-content label,
.entry-content tr th,
.entry-content thead th,
.entry-meta,
.entry-title,
.entry-utility,
#respond label,
.navigation,
.page-title,
.pingback p,
.reply,
.widget-title,
.wp-caption-text,
input[type=submit] {
font-family: “Helvetica Neue”, Arial, Helvetica, “Nimbus Sans L”, sans-serif;
}
pre {
font-family: “Courier 10 Pitch”, Courier, monospace;
}
code {
font-family: Monaco, Consolas, “Andale Mono”, “DejaVu Sans Mono”, monospace;
}

この意味は、「CSS　font-family」などで検索していただければ分かると思いますが、
具体的には、
「font-family:」以下で、指定したフォントが閲覧者のブラウザにある場合には、左側に指定しているフォントを優先して、フォントとして適用・表示する、ということです。

例えば、上の例では、
body,
input,
textarea,
.page-title span,
.pingback a.url
の場合には、

まず始めに、
「Georgia」というフォントが、閲覧者のブラウザのフォントしてあれば、適用する、という意味です。
多くのブラウザでは、「Georgia」フォントに対応していると思いますので、テキストエリアなどの部分は、「Georgia」で「Twenty Ten」が見れている人が多いと思います。

次に、もし「Georgia」というフォントが、閲覧者のブラウザのフォントして無ければ、「Bitstream Charter」が適用されます。
font-family: Georgia, “Bitstream Charter”, serif;
という形で、”Bitstream Charter”と、「”」ダブルクオーテーションで囲われているのは、BitstreamとCharterの間に半角スペースが入っているからです。

最後に、「Georgia」というフォントも、閲覧者のブラウザのフォントして無ければ、「serif」ということで、明朝体の閲覧者がデフォルトにしているフォントが適用されます。

このように「Twenty Ten」が指定している理由は、私は詳しくは知らないのですが、
メリットとしては、自分の思うようなフォントで表示できるという点があると思います。
しかしながら、デメリットとして、一般的なフォントでないと、閲覧者が違和感を感じる可能性があるという点があると思います。

日本のブラウザ表示の場合、明朝体系は一般的では無いような印象があります。むしろ、ゴシック体の方がブラウザ閲覧では馴染まれているのではないでしょうか？

そこで、このブログでは、
font-family : sans-serif ;
に統一しています。
「sans-serif ;」とは、ゴシック体の閲覧者がデフォルトにしているフォントという意味です。

具体的な書き方としては、「Twenty Ten」の「子テーマ」として作っていますから、「子テーマ」フォルダの中の、style.cssファイルを以下のように書きます。
すると、「Twenty Ten」フォルダの中にあるstyle.cssを書き換えなくても上書きされます。
「子テーマ」を使う場合には、基本的に親テーマのファイルは触らないのが基本のようです。

/* =Fonts
————————————————————– */
body,
input,
textarea,
.page-title span,
.pingback a.url {
font-family : sans-serif ;
}
h3#comments-title,
h3#reply-title,
#access .menu,
#access div.menu ul,
#cancel-comment-reply-link,
.form-allowed-tags,
#site-info,
#site-title,
#wp-calendar,
.comment-meta,
.comment-body tr th,
.comment-body thead th,
.entry-content label,
.entry-content tr th,
.entry-content thead th,
.entry-meta,
.entry-title,
.entry-utility,
#respond label,
.navigation,
.page-title,
.pingback p,
.reply,
.widget-title,
.wp-caption-text,
input[type=submit] {
font-family : sans-serif ;
}
pre {
font-family : sans-serif ;
}
code {
font-family : sans-serif ;
}

以上で、フォントが、
font-family : sans-serif ;
に書き換わります。

以下が、「Twenty Ten」テーマのフォント変更前と、「Twenty Ten」子テーマでのフォント変更後の違いです。

「Twenty Ten」テーマのフォント変更前

「Twenty Ten」子テーマでのフォント変更後

いかがでしょうか。

もちろん、特定のフォントを指定したい場合などは、上記CSS（スタイルシート）の「font-family :」以降で希望のフォントを書くことで解決されます。

これらのフォントの選択については、通常のWEB制作のCSS（スタイルシート）の使い方と同じですが、WordPressの場合は、wp-contentフォルダの階層にあるthemesフォルダの中の、指定テーマのstyle.cssファイルの中に書かれていることが多いので、もしテキストフォントを変えたい場合などは、一度チェックしてみると良いと思います。

（追加）
オデさんから、
「font-family 消しちゃうっていう方法もありますね。フォントは見る方のブラウザ設定にまかせるべき、という意見もあるようで。」
という意見をいただきまして、早速、変更してみました。

/* =Fonts
————————————————————– */
body,
input,
textarea,
.page-title span,
.pingback a.url {

}
h3#comments-title,
h3#reply-title,
#access .menu,
#access div.menu ul,
#cancel-comment-reply-link,
.form-allowed-tags,
#site-info,
#site-title,
#wp-calendar,
.comment-meta,
.comment-body tr th,
.comment-body thead th,
.entry-content label,
.entry-content tr th,
.entry-content thead th,
.entry-meta,
.entry-title,
.entry-utility,
#respond label,
.navigation,
.page-title,
.pingback p,
.reply,
.widget-title,
.wp-caption-text,
input[type=submit] {

}
pre {

}
code {

}

そもそも「font-family :」自体を消してみました。
この方法で良いのかな？オデさん、ありがとうございました！