記事下に関連記事のブログカードを設置して回遊率を上げるカスタマイズ
はてなブログのカスタマイズの記事です。
記事下にブログカードを設置して、回遊率を高められたらいいなと思って、やってみました。
関連記事を表示する
この記事は正しくありません。
こちらを参照下さい。
僕のメインブログ「アニメな日々以下略」では、今まで池田仮名 (id:bulldra)さんのあわせて読みたいGを使わせてもらっていました。
bulldra.hatenablog.com
不満等は無かったのですが、気分転換したくなって、昨日1日は、Milliardを付けていました。
設置に当たってはゆきひー (id:ftmaccho)さんのこの記事を参考にしました。
www.yukihy.com
綺麗に出来て満足したのですが、気がかりがありました。
ブログが重くなると記載されていて、これ以上重くなるのもなと。
今朝起きて、やっぱり気になったので、自分で出来ないかなと試行錯誤。
やっと出来上があがった為公開します。
ランダム表示が出来なかったり、コメント欄に被さったり。
諸々の問題は解決できたと思われます。
コンテンツ
このカスタマイズをされる場合は、自己責任でお願い致します。
回答できるかは分かりませんが、出来る範囲でお答えしますので、質問はこの記事のコメントにお願い致します。
概要
はてなのカテゴリ別RSSを取得して、ランダムに10件2列に表示します。
その為、RSS配信されていない記事(古い記事)は表示出来ません。
尚、Milliardよりも重くなるという支離滅裂な事になった可能性も否めません。
ご了承下さい。
見た目
こんな感じです。
最大で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つしかない記事だとどうなるか分かりませんので、確認しつつ変更してみて下さい。
以上になります。
終わりに
もし質問等ありましたら、コメント欄にお願いします。