【はてなブログ】カテゴリによって背景の色やレイアウトを変更する方法

『カテゴリごとに背景の色を変えたい』

『カテゴリによってレイアウトを変更したい』

ブログのデザインを整えるうえで上記のように考えている人のために、カテゴリーによって背景を変える方法をご紹介します。

ではまず、例から見ていきましょう。

この記事のレイアウトを見ると、ヘッダー部分やサイドバーの色は緑です。

では、以下より一度このブログのトップページを一度見てください。

Kotaro's blog

緑のところが黒色になっていますね。

このブログでは、カテゴリによって色を変更するようにしています。この記事はStudy Workerというカテゴリなので、緑。

他にも、映画について書いている記事は、Movie Calendarというカテゴリで青色、音楽について書いている記事は、Rock Calendarというカテゴリで赤色を指定しています。

では、実際にどうやっているのかですが、手順は下記の通りです。

手順

はてなブログのダッシュボード→デザイン→カスタマイズ→ヘッダ→タイトル下に下記のコードをコピペ。

<!--jQueryを既に読み込んでる場合は不要-->
<script src="https://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>

<script>
$(function(){
 
   if($("a").hasClass("entry-category-link category-任意のカテゴリー名")){
    $("セレクト").css("プロパティ", "値");
  }

});
</script>

任意のカテゴリー名のところは色を変えたいカテゴリー名に変更してください。

※半角スペースは、「-」に変更。

例として、以下をコピペしていただくと、背景の色が青色に変わると思います。

<!--jQueryを既に読み込んでる場合は不要-->
<script src="https://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>

<script>
$(function(){
 
   if($("a").hasClass("entry-category-link category-任意のカテゴリー名")){
    $("body").css("background-color", "#4169e1");
  }

});
</script>

このように、カテゴリーによってページの背景等のレイアウトをセレクタやプロパティ、値をいじることで、変更することができます。

しかし、トップページの記事を一覧表示にしていないと、トップページの背景色も変わってしまうので、注意してください。