気楽に生きよう!

うつ病、野球、エンタメ 色々喋るよ

記事下に関連記事のブログカードを設置して回遊率を上げるカスタマイズ

f:id:nuruta:20170312013233j:plain
はてなブログのカスタマイズの記事です。
記事下にブログカードを設置して、回遊率を高められたらいいなと思って、やってみました。

関連記事を表示する

この記事は正しくありません。

こちらを参照下さい。

僕のメインブログ「アニメな日々以下略」では、今まで池田仮名 (id:bulldra)さんのあわせて読みたいGを使わせてもらっていました。
bulldra.hatenablog.com
不満等は無かったのですが、気分転換したくなって、昨日1日は、Milliardを付けていました。
設置に当たってはゆきひー (id:ftmaccho)さんのこの記事を参考にしました。
www.yukihy.com

綺麗に出来て満足したのですが、気がかりがありました。
ブログが重くなると記載されていて、これ以上重くなるのもなと。

今朝起きて、やっぱり気になったので、自分で出来ないかなと試行錯誤。
やっと出来上があがった為公開します。

ランダム表示が出来なかったり、コメント欄に被さったり。
諸々の問題は解決できたと思われます。

コンテンツ

このカスタマイズをされる場合は、自己責任でお願い致します。
回答できるかは分かりませんが、出来る範囲でお答えしますので、質問はこの記事のコメントにお願い致します。

概要

はてなのカテゴリ別RSSを取得して、ランダムに10件2列に表示します。
その為、RSS配信されていない記事(古い記事)は表示出来ません。

尚、Milliardよりも重くなるという支離滅裂な事になった可能性も否めません。
ご了承下さい。

見た目

f:id:nuruta:20170227122947j:plain
こんな感じです。
最大で10件表示させています。
※ブログカードの背景色等別で弄っている為、蒼くなってますが、基本は白です。

CSS

先ずはCSSをデザインCSSに加えます。

#recent-box h4{
   background-color: #d3edfb;
   color: #008dcb;
   border-left: 8px solid #0000ff;
   border-bottom: 3px solid #4784bf;
   padding:5px;
}

#recent-menu {
    display: table;
    padding:0;
    width:100%;
}
#recent-menu > li:nth-child(2n+1) {
    clear: both;
}
#recent-menu > li {
    display: table-cell;
    float: left;
    width: 50%;
}

@media only screen and (max-width: 480px) {
#recent-menu{
    padding: 0;
    width: 100%;
}
#recent-menu li{
    padding: 0;
    margin: 0;
    list-style-type:none;
    width: 100%;
}
}

画面サイズ480px以下では、1列表示になるようにしています。
最初のh4タグは、見出しですので、お好きなように変えて下さい。

html

続いて、以下のタグを記事⇒記事下などに追加して下さい。

<div id="recent-box">
<h4>関連記事</h4>
</div>

スクリプト

最後にスクリプトです。
ヘッダ、フッタ、記事下、どこに書いても多分大丈夫です。

<script>
<script>
$.ajax({
        //はてなrssファイルを読み込む
        //ブログのアドレスの最後にrssをつける
     url:'http://nuruta.hatenablog.com/rss',
     success: function(data){
					
					var presentCategory1 = $("div.entry-categories a:nth-child(1)").text();

                    //はてなrssの読み込み
                    var rss_url = 'http://nuruta.hatenablog.com/rss/category/' + presentCategory1;

          var htmlstr = "";
		  var x=0;
		  var m=0;
		  var eurl = new Array();
          htmlstr += '<ul id="recent-menu">';
          //アイテムの調整
          $.get(rss_url, function(data) {
               $(data).find("item").each(function (i) {
                    	var el = $(this);
						eurl[x] = el.find("link").text().replace("/entry","/embed");
						x++;
			   });
			   
			   var href = window.location.href.replace("/entry","/embed");

			   while(eurl.length > 0){
			   		mx=Math.floor(Math.random() * eurl.length);
                    if (href != eurl[mx]) {
                    	htmlstr += '<li>';
                   		htmlstr += '<iframe style="display: block; height: 180px; width:100%; min-width:200px;" src="' + eurl[mx] + '" frameborder="0" scrolling="no"></iframe>';
                    	htmlstr += '</li>';
                    	m=m+1;
                    }
                    eurl.splice(mx,1);

                    if (m==10){
                    	break;
                    }
				}
               
		  	htmlstr += '</ul></div>';

          //footer前に挿入する
          document.getElementById("recent-box").innerHTML += htmlstr;
          });
     }
});
</script>

変更箇所は3か所です。
1か所目は無視しても問題無いかもですが、3か所目は変更必須です。
表示に倣って、ご自身のブログのトップURLに置き換えてください。

変更箇所2は任意です。
nth-child(1)
この数字で、記事の何番目のタグが認識しています。
1で先頭のタグ。2は2つ目のタグです。
親子カテゴリを作っている場合は、2に変更して下さい。
但し、カテゴリが1つしかない記事だとどうなるか分かりませんので、確認しつつ変更してみて下さい。

以上になります。

終わりに

もし質問等ありましたら、コメント欄にお願いします。