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

アフィリエイト広告を利用しています

【はてなブログ】記事のカテゴリーによってオススメ記事を切り替える方法 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です。

<script src=”https://code.jquery.com/jquery-1.9.1.min.js” type=”text/javascript”></script>

 

んで、先ほどの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>

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

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

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

CSS

/*カテゴリ―ごとのおすすめ記事*/
#recommend-entry 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;
}
.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: 2px 4px;
margin-right: 4px;
}

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

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

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

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

HTML

<!-- カテゴリごとのおすすめ記事 -->
<div id="recommend-entry" 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です。

<script src=”https://code.jquery.com/jquery-1.9.1.min.js” type=”text/javascript”></script>

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

JavaScript

<script>
$(function(){
var rec = document.getElementById('recommend-entry');
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;
}
}
}
	categoryList(rec);
});
</script>

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

コードの例

<div id="recommend-entry" 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>

どうですか?うまくいきそうですか?

あと、カラーは以下のサイトでカラーコードを調べて、好きな色に設定してください。

www.color-sample.com

やり方が分からないよーー!って人は修業が足りないので少し勉強して出直してください。

HTML・CSS・JavaScriptを独学するのにおすすめの入門書・参考書まとめ

ウソです。コメント欄に質問いただければ、暇な時に回答いたします。

もし不具合があるとか、コードがおかしいなどあれば報告いただけると嬉しいです。

それにしても、この記事書くの疲れたわーーーー!!!

欲しい物リスト

欲しい物リスト

欲しい物リスト

効果のほど

ちなみに、カテゴリごとのおすすめ記事を表示してからどれだけ効果があったかをコッソリ教えます。

直帰率 約83%→約80%(今月は78%~79%くらい)

ページ/セッション 約1.32→約1.40(今月1.43くらい)

これくらい改善しました。他にも要因はあるので一概には言えませんが、試してみる価値はあると思います。特にスマホ。特にスマホですよ。

他にもこんな記事書いてます。

レスポンシブに対応したサイドバー固定Ver.2(はてなブログ向け)

はてなブログをカスタマイズしてる人向け。jQueryの読み込みを速くするためにコードを変えてみた

コピペで簡単!はてなブログのシェアボタンをカスタマイズ

コピペで簡単!CSSではてなブログの見出しをカスタマイズ!