【はてなブログ】記事のカテゴリーによってオススメ記事を切り替える方法 Ver.2

先日作ったカテゴリごとにおすすめ記事を切り替える方法がめちゃめちゃ好評だったので、もっと簡単に導入できるようにコードを改良しました。

カテゴリごとにおすすめしたい記事を選んで、それを表示させる方法です。

【はてなブログ】記事のカテゴリーによってオススメ記事を切り替える方法 | SHIROMAG

jQueryを使っているので上記記事より少し重くなりますが、それでも導入しておく価値はあると思います。

例えば、以下の記事に飛ぶとサイドバーでおすすめされている記事が変わります。（スマホだと記事上）

ダウンロードしておきたい最新おすすめ洋楽【2016年版】

貧困女子高生のヤラセと貧困は別問題

このように、記事のカテゴリによってオススメの記事を切り替えることができます。

ニーズに合わせて前回とちょっとデザインを変えてみました。

ちなみにこんな感じに表示されます。

「カスタマイズ」というカテゴリには、カスタマイズに関する記事をおすすめするとクリックされやすいですよね。もしくは、誘導したい記事がある場合にも有効だと思います。

注意事項！！！！！！

カスタマイズは記事をよく読んで行ってください。
カスタマイズ後は記事を巡回して、動作確認して下さい。
自己責任でお願いします。

CSSとJavaScriptのコードはコピペでOKですが、HTMLはご自身で書き換えが必要です。よく読んで行ってください。HTMLの部分はメモ帳などのエディタを経由すると良いと思います。

コードは2パターンあるので、該当するコードを選んでください。

親・子カテゴリーを設定している人向け
親・子カテゴリーを設定していない人向け
効果のほど

親・子カテゴリーを設定している人向け

このパンくずリストを利用している人で「親カテゴリ-子カテゴリ」という風にカテゴリーを設定している人は以下のように設定してください。

まずはダッシュボードの「デザイン」→「カスタマイズ」→「デザインCSS」に以下のコードをブっこみます。

スマホの場合（レスポンシブにしてない人）は<style> </style>で囲んで、記事上か記事下にブっこんで下さい。

CSS

/*カテゴリ―ごとのおすすめ記事*/
#recommend-entry-parent ul {
display: none;
}
#recommend-entry-child ul {
display: none;
}
.recommend-entries {
margin: 10px 0;
}
.recommend-entries ul {
padding: 0;
}
.recommend-entries ul li {
position: relative;
list-style-type: none;
margin-bottom: 10px;
padding-left: 60px;
line-height: 24px;
}
.recommend-entries ul li a{
text-decoration: none;
}
.recommend-entries ul li::before {
position: absolute;
top: 0;
left: 0;
content: "おすすめ";
background-color: #e13361;
color: #fff;
font-size: 12px;
line-height: 24px;
padding: 0 4px;
margin-right: 4px;
border-radius: 4px;
}

お次は、以下のコードを表示したい場所にブっこみます。

コード内の「親カテゴリ-子カテゴリ」及び「カテゴリ」を好きなカテゴリーに書き換えて下さい。「記事のURL」と「記事のタイトル」は、そのカテゴリで表示したいおすすめ記事を選んで下さい。

よく分からない人は、このあとコードの例を載せておいたので、それを参考にしてください。

とりあえず3つずつ記述してますが、増やしても減らしても問題ありません。

HTML

<!-- カテゴリごとのおすすめ記事 -->
<div id="recommend-entry-child" class="recommend-entries">
<ul data-category="親カテゴリ-子カテゴリ">
<li><a href="記事のURL">記事のタイトル</a></li>
<li><a href="記事のURL">記事のタイトル</a></li>
<li><a href="記事のURL">記事のタイトル</a></li>
</ul>
<ul data-category="親カテゴリ-子カテゴリ">
<li><a href="記事のURL">記事のタイトル</a></li>
<li><a href="記事のURL">記事のタイトル</a></li>
<li><a href="記事のURL">記事のタイトル</a></li>
</ul>
</div>
<div id="recommend-entry-parent" class="recommend-entries">
<ul data-category="カテゴリ">
<li><a href="記事のURL">記事のタイトル</a></li>
<li><a href="記事のURL">記事のタイトル</a></li>
<li><a href="記事のURL">記事のタイトル</a></li>
</ul>
<ul data-category="カテゴリ">
<li><a href="記事のURL">記事のタイトル</a></li>
<li><a href="記事のURL">記事のタイトル</a></li>
<li><a href="記事のURL">記事のタイトル</a></li>
</ul>
<ul data-category="カテゴリ">
<li><a href="記事のURL">記事のタイトル</a></li>
<li><a href="記事のURL">記事のタイトル</a></li>
<li><a href="記事のURL">記事のタイトル</a></li>
</ul>
</div>

このあと、jQueryの読み込みコードが必要なのですが、シェアボタンでシェア数カウントしている人は既に読み込まれてるので、記述しなくてOKです。

んで、先ほどのHTMLの下に以下のコードをコピペしてください。特にユーザー自身で書き換える部分はありません。

JavaScript

<script>
$(function(){
var id_c = document.getElementById('recommend-entry-child');
var id_p = document.getElementById('recommend-entry-parent');
function categoryList(id){
var ul = id.getElementsByTagName('ul');
var cnt = ul.length;
for(var i=0;i<cnt;i++){
var data = ul[i].getAttribute('data-category');
var cate_data = 'category-'+data;
if($('body').hasClass(cate_data)) {
				$(ul[i]).css({'display':'block'});
return;
}
}
return true;
}
var bool = categoryList(id_c);
if(bool){
		categoryList(id_p);
}
});
</script>

HTMLの部分で書き換えが必要なのですが、もしよく分からないという人がいましたら、下の例を参考にしてみて下さい。

コードの例

<div id="recommend-entry-child" class="recommend-entries">
<ul data-category="ブログ運営-カスタマイズ">
<li><a href="https://www.notitle-weblog.com/entry/2016/03/12/100000">コピペで簡単！はてなブログのシェアボタンをカスタマイズ</a></li>
<li><a href="https://www.notitle-weblog.com/entry/2016/02/17/144908">コピペで簡単！CSSではてなブログの見出しをカスタマイズ！</a></li>
<li><a href="https://www.notitle-weblog.com/entry/2016/05/15/152605">はてなブログをカスタマイズしてる人向け。jQueryの読み込みを速くするためにコードを変えてみた</a></li>
</ul>
<ul data-category="社会-経済">
<li><a href="https://www.notitle-weblog.com/entry/2016/01/14/165320">アベノミクスは本当に失敗だったのか</a></li>
<li><a href="https://www.notitle-weblog.com/entry/2015/11/28/080000">最低賃金はどんどん引き上げるべき</a></li>
</ul>
</div>
<div id="recommend-entry-parent" class="recommend-entries">
<ul data-category="ブログ運営">
<li><a href="https://www.notitle-weblog.com/entry/2016/08/13/090000">はてなブログの見たままモードを使いこなそう</a></li>
<li><a href="https://www.notitle-weblog.com/entry/hatena-amp">はてなブログのAMP対応について</a></li>
<li><a href="https://www.notitle-weblog.com/entry/2016/05/08/141657">Gistでブログにコードを載せる方法と便利アプリ「GistBox」</a></li>
</ul>
<ul data-category="洋楽">
<li><a href="https://www.notitle-weblog.com/entry/download-music">ダウンロードしておきたい最新おすすめ洋楽【2016年版】</a></li>
<li><a href="https://www.notitle-weblog.com/entry/2016/05/17/000000">オススメの人気洋楽記事一覧</a></li>
<li><a href="https://www.notitle-weblog.com/entry/2016/02/28/194418">【洋楽】UKロック入門！おすすめバンド20選</a></li>
</ul>
<ul data-category="社会">
<li><a href="https://www.notitle-weblog.com/entry/2016/08/20/124058">貧困女子高生のヤラセと貧困は別問題</a></li>
<li><a href="https://www.notitle-weblog.com/entry/2016/03/05/191129">奨学金制度で叩くべきは、延滞者ではなく「日本」</a></li>
</ul>
</div>

親・子カテゴリーを設定していない人向け

パンくずリスト使ってないよーって人はこちらのコードを利用して下さい。