作品ごとにフォントを分ける方法

[ぴけ]

サイトにていくつかの小説を展示しているのですが、それぞれの世界観を出すために
フォントを変えられないかと考えております。
きちっとした真面目なお話には「筑紫明朝」で、ほのぼのしたお話には「Zen Maru Gothic」といった具合です。

カスタマイズしようとしてもまったく変わらなかったり、サイト全体が変わってしまったりと
なかなかうまくいきません。

もし上記方法についてご存じの方がおられましたら知恵をお貸しいただけると幸いです。
また、システム的・技術的に難しいようだったら諦めますので、そちらもお伝えいただけると嬉しいです。

よろしくお願いします。

[佐高]

WEBフォント系に詳しくは無いのですが、通りすがりに失礼いたします。

「サイト全体が変わってしまったり」ということなので、使用WEBフォントのライセンス登録や各種方法での読み込みなどは完了していて、CSSの記述を悩んでいるということかなと思いましたが、見当違いでしたら申し訳ありません。

ざっと見た感じ、EASELでは作品タイプごとの各投稿部分に作品タイプのスラッグを利用したclass「.custom_cat-●●」が付与されています。

そのため、たとえば作品タイプ「タイトルA」（スラッグを「a」とします）の本文部分のみをGoogleフォントの「Zen Maru Gothic」としたい場合は以下の通りになるかなと思います。

.custom_cat-a .entry-content {
font-family: ‘Zen Maru Gothic’, sans-serif;
}

（元々のものがあるので多分大丈夫だとは思いますが念のために「sans-serif」もいれています。）

また、もし作品タグでフォントを分けたい場合では作品タグのスラッグのclass「.custom_tag-○○」で同様に指定するといいかと思います。
たとえばタグのスラッグ「honobono」とすると

.custom_tag-honobono .entry-content {
font-family: ‘Zen Maru Gothic’, sans-serif;
}

という具合になるでしょうか。

自分は筑紫明朝を使用できるライセンス契約をしていないため、筑紫明朝については分かりかねるのですが、ご契約されているサービスの使い方・ご契約プラン内で使用できる方法などをお調べいただき、該当のfont-familyで指定すると反映されると推察いたします（「sans-serif」部分は「serif」などにした方がいいかなとは思います）。

曖昧な説明で申し訳ありません。
うまくカスタマイズできることを祈っております。

[ぴけ]

佐高様

ご丁寧にご返答いただきありがとうございます。
また、足りない言葉が多かったにも関わらず此方の意図を汲み取っていただきありがとうございます。

教えていただきたかったのは佐高様がご記載いただいた内容になります。
いろいろと確認しながらカスタマイズしていきたいと思います。

具体的にアドバイスいただき大変助かりました。
ありがとうございました。

[投稿者]

投稿