はてなブログで特定カテゴリの記事だけに適用させるCSS

ブログ上で小説をアップロードするとき、本文フォントを自動で明朝体にしてくれるCSSを入れてみた。

htmlやCSSが分かる人にはあまりにも単純なやり方だけど、それなりに需要はありそうな気がするので書き残しておく。

ポイント

• 投稿時に特定のカテゴリを指定するだけでCSSが適用される（楽ちん！）
• 応用すればフォント以外にも様々な装飾が可能
• はてなブログでしか使えない（たぶん似たような方法で他ブログでも可能な気はする）

ソースは例えばこんな感じ。このブログではWebフォントを読み込ませたりしているので、実際に使ってるソースとは微妙に異なります。

.category-創作 div.entry-content {
    font-family: "游明朝", "YuMincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E","ＭＳ Ｐ明朝", "ＭＳ 明朝", serif ;
}

はてなブログの設定で、
デザイン→カスタマイズ→カスタマイズCSS のところに入れればそのまま使えるはず。

font-familyの中身はお好みにお任せします。
これをfont-family以外のスクリプトに差し替えれば、本文全体に他にも様々な装飾をかけることができます。

大事なのはこの部分。

.category-創作 div.entry-content { }

これが「創作」カテゴリの記事本文に指定するという役割の文。
カテゴリ名のところは自由に書き換えて使ってください。日本語でも大丈夫っぽいです。
この { } の中身を書き換えれば、その本文にだけCSSで自由に装飾がかけられます。やったね！

というわけで、ブログで小説が明朝体で読めます。
motoietchika.hatenablog.com

……そもそもカクヨムとかなろうとかpixivでも小説投稿できるのに、個人のブログで小説を投稿するっていうのが時代遅れ感ありますけども。