2024年8月にWordPressに移行し、Twenty Sixteenを使い始めて1年未満ですが、なんやかんや暇をみて自分好みにカスタマイズしてきました。そこで、備忘がてら自分でカスタマイズしたところを紹介してみようと思います。
ただ、僕はCSSに詳しいわけでもなく、調べながら割とカンでやっているので、ムチャクチャだったり無駄なことをしている可能性があると思いますので、もし参考にされる方がいればその辺りはご留意ください。
子テーマのstyle.cssを使う
記事の主旨とは異なるので省略しますが、Twenty Sixteenに限らず、WordPressをカスタマイズするには子テーマを作って、その中のstyle.cssをこねくり回すのが定番です。
詳しく書かれた記事は世の中にたくさんあるのでそちらを参考にしてください。
ブログ全体に同じフォントを指定する
Twenty Sixteenはいろんなフォントが使われています。それもいいですが、個人的には同じフォントで統一されている方が好きなので統一してしまいます。（ただし、<pre>と<code>は別のフォントにしています。）
指定したいフォントはこんなところ。Appleの「SF Pro JP（San Francisco）」か「Hiragino Kaku Gothic Pro」、それか「Meiryo」にしたいという感じです。（昔、AppleのサイトのCSSをみてそのままコピーしたものです。たしか…。）
font-family: "SF Pro JP", "SF Pro Text", "SF Pro Icons", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "Helvetica Neue", "Helvetica", "Arial", sans-serif最初は<body>にfont-familyを指定すればいけるかなと思いましたがそんなことはなく。ということで、子テーマのstyle.cssに以下を追加しました。
/* フォントの設定 */
body,
input,
textarea,
.site-title,
.entry-title,
.page-title,
.entry-footer,
.widget-title,
.post-title,
.reply-title,
.nav-links,
#page,
#menu-top,
#wp-block-archives-1,
form .comment-form-cookies-consent label {
color: #000000;
font-family: "SF Pro JP", "SF Pro Text", "SF Pro Icons", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "Helvetica Neue", "Helvetica", "Arial", sans-serif !important;
}片っ端からやっています。これでMacやiPhone、iPadでは「Hiragino Kaku Gothic Pro」で、Windowsでは「Meiryo」で表示されます。Appleの端末からは「SF Pro JP」で表示されるとうれしいのですが、できないようですね。
