WPのテーマTwenty Twelve(2012)で表示フォントのカスタマイズをCSSで編集する方法

ワードプレス(WP)のデフォルトテーマ“Twenty Twelve(2012)”を利用している人が、不満に思うことの一つに「日本語フォントが美しくない」ということがあると思います。
表示するフォントの種類と、サイズを変更させるカスタマイズ方法を紹介します。

Sponsored Link

WPのテーマを編集

ワードプレスのダッシュボード画面より
「外観」→「テーマ編集」

ここで、スタイルシート(CSS)を編集します。
直接WPのCSSを編集するのではなく、terapadなどのテキスト編集用のメモ帳にコピーしてから作業したほうが良いと思います。

Twenty Twelve(CSS)の489行目あたりから、Basic Structureという項目

/* =Basic structure
————————————————————– */

/* Body, links, basics */
html {
font-size: 87.5%;
}
body {
font-size: 14px;
font-size: 1rem;
font-family: Helvetica, Arial, sans-serif;
text-rendering: optimizeLegibility;
color: #444;
}
body.custom-font-enabled {
font-family: “Open Sans”, Helvetica, Arial, sans-serif;
}
a {
outline: none;
color: #21759b;
}
a:hover {
color: #0f3647;
}

ココが、サイト全体の表示フォントを決めています。
以下の赤文字で表示した部分を変更(追加)します。フォントサイズを大きくしたいときは14PXから大きな数字に、お気に入りに表示フォントがある場合はカスタマイズしてください。

/* =Basic structure
————————————————————– */

/* Body, links, basics */
html {
font-size: 87.5%;
}
body {
font-size: 16px;
font-size: 1rem;
font-family: “ヒラギノ角ゴ Pro W3”, “Hiragino Kaku Gothic Pro”,Osaka, Helvetica, Arial, sans-serif;
text-rendering: optimizeLegibility;
color: #444;
}
body.custom-font-enabled {
font-family: “Open Sans”, Helvetica, Arial, sans-serif;
}
a {
outline: none;
color: #21759b;
}
a:hover {
color: #0f3647;
}

最後に

場所を知らないと、フォントの表示を変えるだけでも、結構な時間をとられます。
迷っている方の一助になれば幸いです。

LINEで送る
Pocket