なかなか進まないこのブログ。もう１つ管理しているサイトがあって、そちらの方に力が向いていたことと、そのサイトでWordpressをフリーのテンプレートに頼りすぎてしまって見た目が煩雑になっている感があるので、こちらのブログはシンプルに、基本的にはWordpressの２０１３年のテーマ、Twenty Thirteenをそのまま使う感じで、WordpressやPHPの勉強もかねてやっていこうと思っています。

まずは「子テーマ」を作る

もう１つのウェブサイトでは、フリーのテンプレートのCSSファイルに直接あれやこれやと書き込みをしていました。Wordpressの本を何冊か買ってきて読みながらやっていたのですが、いろいろなサイトを見ていると、CSSファイルは直接書き込むとWordpressのバージョンアップのときにもとに戻されてしまう可能性があるとのこと。そうなるとせっかく修正したCSSファイルもなくなってしまうので、子テーマを作ることにしました。

参考にしたサイト：THE PRESENT NOTE

CSSファイルは当然ですがテーマ全部のスタイルを定義しています。私の使っているエディタでも３，１２５行あります。これを上から下まで素人が全部みていたらわけがわかりません。そこで直したいところだけ再定義する、という子テーマを作ります。

作り方は簡単です。Twenty Thirteenのテーマフォルダと同階層のフォルダ（wp-content/theme/のなか）に子テーマのフォルダを作成します。私は”child_thirteen”と名付けました。そこにからのstyle.cssを作ります。そうすると基本的にはTwenty ThirteenのCSSファイルを取りに行くのですが、直したところだけ子テーマのCSSファイルから読み取ってくれます。

そのためには、基本的にはTwenty ThirteenのCSSファイルを見に行ってねという定義を子テーマのCSSファイルに入れてあげる必要があるので、以下のとおりファイルに書き込みます。

/* theme name: child_thirteen
template: twentythirteen */
@import url('../twentythirteen/style.css');

これで、基本的にはTwenty ThirteenのCSSファイルを読みにいけとなります。

フォントの指定

次に今回のメインテーマ、フォントの修正です。先ほどの下に、直したいところのスタイルを指定してやればO.K.です。

今読めているのはこのように追加しました。

/* theme name: child_thirteen
template: twentythirteen */
@import url('../twentythirteen/style.css');
/****ヘッダーの変更****/
.site-title {
font-size: 40px;
font-family: "ヒラギノ角ゴ pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
}
.site-description {
font-style: normal;
font-size: 20px;
font-weight: light;
font-family: "ヒラギノ丸ゴ pro W3", "Hiragino Maru Gothic Pro", sans-serif;
}
/****テキストエリアの変更****/
textare { font-family: "メイリオ", Meiryo, "Hiragino Maru Gothic Pro", "ヒラギノ丸ゴ Pro W3", "ＭＳ Ｐゴシック", "Lucida Grande", "Lucida Sans Unicode", Arial, Verdana, sans-serif;
}
.site-title {
font-size: 30px; font-weight: bold; font-family: "ヒラギノ角ゴ pro W3", "Hiragino Kaku Gothic Pro", sans-serif; line-height: 1; margin: 0; padding: 58px 0 10px;
}
h1 {
font-size: 30px; font-family: "ヒラギノ角ゴ pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
}
h2 {
font-family: "ヒラギノ角ゴ pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
}
h3 {
font-family: "ヒラギノ角ゴ pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
}
h4
{
font-family: "ヒラギノ角ゴ pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
}
h5 {
font-family: "ヒラギノ角ゴ pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
}
h6 {
font-family: "ヒラギノ角ゴ pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
}

正直、文章本体が丸ゴシックになっていないような気がするのですが、ブログのタイトルがやたらと大きくて２段になっていたこと、ブログのタイトル、見出しのフォントが明朝ではなく、ゴシックになったことで一安心です。

スタイルシートになれていない人にお勧め

スタイルシートになれていない人はどこをどう直していいのかわからなくなりがちです。直している間にどこかで{が抜けてしまって、CSSファイル自体がおかしくなってしまうということも多々あります。

子テーマを作って直したいところだけCSSを書いてあげることでCSS全体がおかしくなってしまうかもという不安はなくなりますし、子テーマで１つずつCSS指定してあげることでCSSの勉強にもなります。おすすめです。