はてなブログで、カテゴリー別に画像を表示させたい！

はじめに

　はてなブログのカスタマイズ記事です。カテゴリーの文字列を取得して、それに応じた画像をバックグランドの画像に割り当てるやり方について書きます。

まずは、どんなものか？

はてなブログでは、トップページでは記事が複数表示されると思います。記事の文中に「続きを読む」を入れると、「続きを読む」までの内容が表示されます。
以下のような感じで最新の記事が並びます。
f:id:San3saN:20151201124347p:plain

記事一覧のような感じです。どんな記事があるのがわかります。
ユーザー側からすると、見やすいようにカテゴリー別の何かがあるとわかりやすいですよね。そこで、「.entry」のバックグランド画像をカテゴリー別に変更してみたいと思います。すると、以下のようなbefore after になります。

before

after

どうでしょうか？わかりやすくなったんじゃないかいと。

CSSの編集

　まずはCSSの編集から行いましょう。
.entry には３つの子要素があります。「.entry-title」「.entry-content」「.entry-footer」の３つです。例で示したものは、.entry-contentの文章は非表示、.entry-footer は全て非表示にしてあります。
ちゃんとまとめると、

entry-titleの編集
1. 記事作成日時の非表示
entry-contentの編集
1. デフォルトの画像の設定
2. 文字の非表示
3. 文字を表示
entry-footer の編集
1. 全て非表示

こんな感じです。2-2、2-3 あたりは今回話しませんが、１つ１つの記事の entry に何を表示させるかです。

/*.entry-$ の表示の変更*/
/*1-1 記事作成日時の非表示*/
.date {
    display:none;
}
/*2-1 デフォルトの画像の設定*/
.page-index .entry-content {
  position: relative;
  background-image: url("/*デフォルトで表示される画像のURLを記述*/");
  background-size:310px 155px;
  background-repeat: no-repeat;
}
/*2-2 文字の非表示*/
.page-index .entry-content p{
    display:none;
}
.page-index .entry-content h3{
    display:none;
}
/*2-3 文字を表示*/
.page-index .entry-content h6{
    font-size:80%;
    background:black;
    filter:alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.5;
    color:white;
    position: relative;
    top: 95px;
}
body:not(.page-index) h6{
    display:none;
}
/*3-1 footer 全て非表示*/
.page-index .entry-footer{
    display:none;
}

jQuery について

jQuery を使って、カテゴリーを読み込んでデフォルトで指定した画像を変更させます。それだけです。
以下にjQueryを示していますが、読み込みの関係から、フッタにコピペしてくれればと思います。

<script type="text/javascript">
   $(window).ready($(".page-index .entry-inner").each(function(){
   var a = "<!-- カテゴリの文字列-->"
   var b = "<!-- カテゴリの文字列-->"
   var c = "<!-- カテゴリの文字列-->"
   var d = "<!-- カテゴリの文字列-->"
    if ($(this).find(".entry-categories").text().indexOf(a) != -1){
       $(this).find(".entry-content").css("background-image","url((<!--  カテゴリa に対する画像のURL-->)");
   }else if($(this).find(".entry-categories").text().indexOf(b) != -1){
       $(this).find(".entry-content").css("background-image","url(<!--  カテゴリb に対する画像のURL-->)");
   }else if($(this).find(".entry-categories").text().indexOf(c) != -1){
       $(this).find(".entry-content").css("background-image","url(<!--  カテゴリc に対する画像のURL-->)");
   }else if($(this).find(".entry-categories").text().indexOf(d) != -1){
       $(this).find(".entry-content").css("background-image","url(<!--  カテゴリd に対する画像のURL-->)");}
    }));
</script>

var a = ってところに（a,b,c,d それぞれ）、各々のカテゴリを指定してあげて、それに対応するURLを「カテゴリa に対する画像のURL」と置き換えてください。すればOKです。
以上です。