攻めは飛車角銀桂守りは金銀三枚

人生、なすがママ、きゅうりがパパ

はてなブログでカテゴリーごとに異なるスタイル(CSS)を適用する方法

はてなブログでカテゴリーごとに異なるスタイル(CSS)を適用する方法は意外と簡単です。

はてなブログではbodyタグに「category-{カテゴリーの名前}」というクラス(class)が出力されているので、そのクラスごとにCSSを切り替えれば簡単にできるということです。

今更ながらに気が付きました。(;_;)/~~~

はてなブログでカテゴリーごとに異なるスタイル(CSS)を適用する方法

まずは記事のHTMLソースを見てください。
(ブラウザーで右クリックして「ソースを表示」みたいなの選んでください。)

その中に「<body・・・」という記述あるはずです。

これはHTMLで文章の本体の始まりを表すタグで必ず1個あるはずです。

そこにわたしのサイトの場合は

<body class="page-entry enable-top-editarea enable-bottom-editarea category-はてな">

って行があり、今回使うのはこの中の「category-はてな」って部分です。

ここまでわかればあとは簡単。

CSSのセレクターに「category-はてな」使っちゃいましょう。

具体的には以下のように書きます。

.category-はてな h3
{
    color: #ff0000;
}

.category-はてな .red-char
{
    color: #ff0000;
}

これで「h3」と「red-char」は文字が赤くなるはずです。

<h3>ここは赤字になるはず。</h3>
<div class="red-char">ここは赤字になるはず。</div>

【表示例】

ここは赤字になるはず。

ここは赤字になるはず。


気が付けば簡単ですね。
あとはCSS学んでください。

いまさら感満載です。

HTML&CSSとWebデザインが 1冊できちんと身につく本

HTML&CSSとWebデザインが 1冊できちんと身につく本

当然、カテゴリーの名称変えたり、記事のカテゴリー変えたらCSSは適用されません。

以上、はてなブログでカテゴリーごとに異なるスタイル(CSS)を適用する方法でした。