MENU

WordPress (Twenty Ten) のフォントを変更

  • URLをコピーしました!

今まで、このブログはTwenty Tenテンプレートのフォントのデフォルトのままで使用していました。でも、このままだと明朝体で、自分の好みじゃないのでゴシック系に変更しようと思います。

当然、これもカスタマイズなので、せっかくなので子テーマを使いましょう。
子テーマの使い方は、「初心者向けWordPressテーマカスタマイズのための、子テーマについて (CSS編)」のページを参照して下さい。

で、変更点ですが、WordPressの管理画面から、「外観」→「テーマ編集」を選択します。
開いた「テーマ編集」の画面の左上の「編集するテーマを選択:」のドロップダウンリストから「Twenty Ten」を選択し、その横の「選択」ボタンをクリックします。
そこで、スタイルシート(style.css)を選択し、

/* =Fonts
-------------------------------------------------------------- */

と書いてあるところから下の部分のフォント関連の記述のところをコピーします。

つづいて、「テーマ編集」の画面の左上の「編集するテーマを選択:」のドロップダウンリストから「twentyten_child」を選択し、その横の「選択」ボタンをクリックし、スタイルシート(style.css)を選択し、コピーしたフォント関連の記述をペーストします。

ちなみに、私は現在「twentyten_child」という子テーマを使用していますのでこのようにしましたが、このコピーを変更せずに、「Twenty Ten」のスタイルシート(style.css)を変更しても結果は同じです。

今回の変更は、あくまでも本文だけなので、

/* =Fonts
-------------------------------------------------------------- */
body,
input,
textarea,
.page-title span,
.pingback a.url {
    font-family: Georgia, "Bitstream Charter", serif;
}

の部分を

/* =Fonts
-------------------------------------------------------------- */
body,
input,
textarea,
.page-title span,
.pingback a.url {
    font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, "MS Pゴシック", Verdana, Arial, sans-serif;
}

のように8行目のみ変更しました。
子テーマ側に必要なCSSは、上記の部分のみです。他の部分は全く不要です。

すると画面イメージが、

SnapCrab_NoName_2012-8-24_18-35-7_No-00

こんな感じから、

SnapCrab_NoName_2012-8-24_18-39-51_No-00

こんな感じになりました。

ちなみに、このブログから既に変わってますよ。
いかがでしょう、イイ感じじゃないですか?

よかったらシェアしてね!
  • URLをコピーしました!
目次