Simplicity2でフォントの種類と文字色をカスタマイズ

Simplicity2のカスタマイズ備忘録だ。WordPressのテーマSimplicity2で、フォントの種類をfont-familyで指定、文字色も変更してみた。このサイトで使用したCSSのコードを貼ってある。

Simplicity2のバージョンは2.6.3。

CSS変更する際の注意

WordPress上で「外観」→「テーマの編集」にある「スタイルシート(style.css)」に変更したいコードを追加していく。その前に2つほど気をつけておくことを。

CSSのカスタマイズは子テーマで

親テーマを直接触るなんて怖くてできない。以下のサイトで「Simplicity2カスタマイズ用の子テーマファイル」をダウンロード。これ、常識。

テーマをカスタマイズするなら親テーマの直接編集はお勧めできません。というのも、ダウンロードページで配布しているテーマファイルを直接編集すると、アップデート時に編集下部分がが上書きされ、せっかくのカスタマイズが全て消えてしまいます。それを防ぐ

変更していなければブラウザのキャッシュをクリアを

変更されていなくても、ブラウザのリロード(再読込)をすれば、たいていはCSSの変更を反映してくれるはず。もし、変更されていない場合はブラウザのキャッシュをクリア(スーパーリロード)を試してみる。
(例)Windows
Firefox:Ctrl + F5 または Ctrl + Shift + R
Google Chrome:Ctrl + F5 または Shift + F5

フォントの種類をカスタマイズ

フォントの種類はCSSのfont-familyで指定する。さまざまなデバイス(Mac、Windows、iPhoneなど)でキレイに文字が表示されるのが理想だけど、最終的には個々の好みだ。あらゆるバージョンで……なんて考え始めるとキリがないもんね。

文字の種類を指定するコード

/* 文字指定 */
body {
font-family:-apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI","Hiragino Kaku Gothic ProN", Meiryo, sans-serif; !important;
}

このサイトで指定しているフォントの一覧。実際のCSSには色指定の情報を付け加えてある。以下、少しばかり簡単な説明を追記しておく。

-apple-system

Macの欧文フォント指定。Chromeなどのブラウザで San Francisco を表示してくれる。ヒラギノの英字がキレイではないので、アルファベットは San Francisco でお願いってやつだ。

BlinkMacSystemFont

同じく、Macの欧文フォント指定。SafariやFirefoxなどのブラウザで San Francisco を表示してくれる。

Helvetica Neue

Macの欧文フォント指定。San Francisco はOS X 10.11(
El Capitan)と iOS 9 以降に有効だ。なので、それ以前のMacには Helvetica Neue を指定している。

Segoe UI

Windowsの欧文フォント指定。Windows 7 以降で反映される。このサイトのアイコン(a)は Segoe をつかっている。

Hiragino Kaku Gothic ProN

Macの日本語フォント指定。Macintosh OS X 10.5(Leopard)以降と iOS なら、ヒラギノ角ゴ ProN W3 が優先される。

Meiryo

Windowsの日本語フォント指定。Windows Vista以降でメイリオを反映してくれる。Windows 7以降なら、Meiryo UI もあるのだけれど、ひらがなの幅がせまくなる点が今ひとつ。

sans-serif

少なくとも sans-serif (ゴシック体)では文字を表示して、という最後のお願い。古いバージョンのブラウザは無視した指定なので、これは書いておかないと。

文字色をカスタマイズ

ここではサイト全体の文字色を変更している。本文だけなどの細かい指定もできるが、ここでは割愛。色は濡羽色 #000b00 を選んだ。参考にしたのは下のサイト。

日本の伝統色の名前とカラーコードが一目でわかるWEB色見本

文字色を変更するコード

* 文字色の変更 */
body{
color:#000b00 !important;
}

実際には「文字の指定をするコード」と「文字色を変更するコード」を合わせてCSSに打ち込んだ。それは次の通り。

文字の種類を指定、文字色を変更するコード

/* 文字指定と文字色 */
body {
font-family:-apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI","Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
color:#000b00 !important;
}

これが子テーマに貼ったCSS。webフォントはつかわなかった。軽くてキレイなフォントがあれば、そのうち使用するかもしれない。2018年度、現段階での自分的ベストなフォントファミリーかなと思っている。

フォントは重要な要素

フォントの指定は面倒だ。もっと楽にならないかと思う。だが、さまざまなOSやデバイスがある現状では少しでもベストと感じるフォントを指定してやらないといけない。フォントの色指定もそうだ。サイトの見た目はフォントの種類や色で印象が変わってしまう。フォントはサイト作成にとって重要な要素のひとつだと思っている。