以前から小説ページだけしっぽり明朝に変えたいという気持ちがあれども、いまいちWordPressを理解していなかったので手を付けられなかったフォント変更がついにできたので、備忘録を兼ねてご報告します。
EASELのフォーラムにはEASELを小説サイト用に少しだけカスタムするという記事を読んで以来、小説ページのフォントがずっと気になっていました。
デフォルトがPC上で小説を読むのに向いていないフォントであるというのはずっと感じていたのですが、WordPressのカスタムCSSが全く分かっていませんでした。今までずっと「外観」の「テーマファイルエディター」で編集するものだと思っていたので、上手く変更されないことが不思議だったのですが、「外観」の「カスタマイズ」で表示される「追加CSS」に記述すると変更されることを漸く理解しました。
今回、私が変更したかったのは、紙媒体でも使用しているしっぽり明朝です。これは濁点仮名が使えるので、ウェブ上でも濁点仮名が上手く表示されるのではないかという期待があってのことでした。
なので、上記リンクを参考にしつつ、小説本文の部分をしっぽり明朝を最優先で設定するような記述に変えてみました。
p {
font-family: 'Shippori Mincho B1',-apple-system,BlinkMacSystemFont,Helvetica Neue,Segoe UI,Hiragino Kaku Gothic ProN,Hiragino Sans,ヒラギノ角ゴ ProN W3,Arial,メイリオ,Meiryo,sans-serif;
font-weight: 500;
}
しかしながら、普通にpタグの装飾にしてしまうと、小説ページだけでなく、無関係なページまですべての本文がしっぽり明朝になってしまいます。またsectionの.entry-contentクラスや、.type-worksクラスでも同様に、作品として投稿しているものは等しくフォント設定が反映されてしまいます。
小説ページにだけ使いたい場合はどうすればよいか
ChromeブラウザでF12を押した後にあれこれ確認しながら探し出したところ、articleに.custom_cat-XXX（※XXXは各自が設定した作品タイプのスラッグです）というクラスが入っていることに気付きました。
<article id="post-595" class="cf post-595 works type-works status-publish hentry custom_cat-skfs custom_tag-r18 custom_tag-32 custom_tag-28 custom_tag-6 custom_tag-94 make_narrow" role="article">
上記はだってうさちゃんだからしかたがないっ！のタグです。
作品投稿した場合、articleタグのクラスとして、カスタムカテゴリー+スラッグが追加されるみたいです。カスタムタグもその後に続いているので、EASELはこのように設定されるものと考えていいはず。（自信はない）
以上を踏まえて、サンプルCSSを記述しました。参考になると嬉しいです。
※以下のサンプルは複数スラッグがある場合のものです。CSSは複数クラスを書き込めるので、.custom_cat-を複数追加することで、スラッグが複数あっても対応できます。おそらく、原作ジャンルごとなどに作品タイプを分けることになると思うので、複数クラスの記述を知っておくほうがいいと思います。複数クラスではない場合は、.custom_cat-xxx p {で始めてしまえば問題ありません。
.custom_cat-sample, .custom_cat-xxx p {
font-family: 'Shippori Mincho B1',-apple-system,BlinkMacSystemFont,Helvetica Neue,Segoe UI,Hiragino Kaku Gothic ProN,Hiragino Sans,ヒラギノ角ゴ ProN W3,Arial,メイリオ,Meiryo,sans-serif;
font-weight: 500;
}※しっぽり明朝はGoogle Fontsのウェブフォントですので、実際に使用する際は、以下の記述が必要です。
@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho+B1:wght@400;600;800&display=swap');実際に使ってみると可読性が高いとはいえないような……🙄 てかもともと明朝体ってウェブ媒体だとタイトルとか文字数が少ないところに使うものだったなって今更……🙄
濁点仮名を上手く表示させられるゴシック体のフォントを探すしかないようですね……。
ちなみに、今回の記事は以下の記事を参考にしました。
【HTML・CSS】class属性を複数指定するには？CSSセレクタを並べる方法もサンプルコードで解説
codeタグ – HTML 🍳コードキッチン
[2021年度版]WordPress のカスタム CSS だけで Google Font(Web Font) を使う
追記 2022/8/26 22:19
私は漸く正解を見つけました。濁点仮名の救世主はBIZ UDPゴシックだった！
BIZ UDPゴシックはモリサワのフォントで、可読性を重視したユニバーサルデザインのフォントです。
参考：About BIZ UDPGothic
正直仕事で使っていた時は数字が読みにくくて（数字のフォントの幅が合わないため、桁区切りが揃わない）あまり好きではなかったのですが、プロポーショナルフォントであるからこそ、「゛」の持つ隙間が最初から狭く、不自然になりにくいのだと思われます。その視点はなかった。
@import url('https://fonts.googleapis.com/css2?family=BIZ+UDPGothic:wght@400;700&display=swap');
.custom_cat-sample, .custom_cat-xxx p {
font-family: 'BIZ UDPGothic',-apple-system,BlinkMacSystemFont,Helvetica Neue,Segoe UI,Hiragino Kaku Gothic ProN,Hiragino Sans,ヒラギノ角ゴ ProN W3,Arial,メイリオ,Meiryo,sans-serif;
font-weight: 500;
}これから、ウェブではBIZ UDPゴシックを讃え、紙媒体ではしっぽり明朝を崇めて生きていきます。やった！