記事下に関連記事を表示する「ブログカード式関連記事」をリリース

f:id:nuruta:20170312013233j:plain
手軽にやって頂けるようにしています。

はじめに

記事下に関連記事を表示する方法はいくつもあります。
僕の作ったものは、記事に付けられたタグと同じタグが付けられた記事をランダムに最大10件タブ形式で表示するモノです。
関連記事の検索には、はてなブログのRSSを採用していますので、あまりにも古い記事は表示されません。

このブログはアクセス数が殆ど無いので、このカスタマイズをされる方は少ないでしょうが、1人でも多くの方に「こんな方法もあるよ」と知っていただけたら幸いです。
他の方法については「やぎろぐ」さんが纏めて下さっていますので、参考までに。
www.jimpei.net
以前もこのカスタマイズを書きましたが、あっちは面倒というか、不備があるので再投稿のような形になります。

見た目

f:id:nuruta:20170318014806j:plain
こんな感じです。
僕はブログカードの背景色を弄っている為、こんな色になってますが、基本は白となります。

背景色変更はこの辺の記事を参考にして下さい。

概要

・タブ形式
・同じタグが付けられた記事をRSSからランダムで表示
・はてなブログカードを採用
・最大2つのタグの関連記事を表示
・3つ目のタブには、アクセス数ランキングを表示

CSS

最初に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%;
}
}

#tab {
    text-align: left;
    list-style: none;
    margin: 0;
    padding: 0;
    line-height: 24px;
    position: relative;
}
#tab li {
    margin: 0 10px;
    padding: 0 10px;
    border: 1px solid #AAA;
    background: #ECECEC;
    display: inline-block;
    position: relative;
    z-index: 0;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    background:      -o-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
    background:     -ms-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
    background:    -moz-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
    background: -webkit-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
    background: linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4), inset 0 1px 0 #FFF;
    text-shadow: 0 1px #FFF;
    margin: 0 -5px;
    padding: 0 20px;
}

#tab li.present {
    background: #FFF;
    color: #000;
    z-index: 2;
    border-bottom-color: #FFF;
}

#tab:after {
    position: absolute;
    content: "";
    width: 100%;
    bottom: 0;
    left: 0;
    border-bottom: 1px solid #AAA;
    z-index: 1;
}

#tab:before {
    z-index: 1;
}


#tab li:before {
    border-bottom-right-radius: 6px;
    border-width: 0 1px 1px 0;
    box-shadow: 2px 2px 0 red;
    box-shadow: 2px 2px 0 #ECECEC;
}
#tab li:after {
    border-bottom-left-radius: 6px;
    box-shadow: -2px 2px 0 red;
    box-shadow: -2px 2px 0 #ECECEC;
}

#tab li.present:before {
    box-shadow: 2px 2px 0 #FFF;
}
#tab li.present:after {
    box-shadow: -2px 2px 0 #FFF;
}

一番始めの「#recent-box h4」は見出しになります。
ここはお好きなように弄って下さい。
オススメは、記事内で使ってる見出しと同じCSSにすることです。
一番馴染むかと思います。

HTML

次にhtmlコードになります。
デザイン設定⇒カスタマイズ⇒記事⇒記事下
に貼り付けてください。

<div id="recent-box"><h4>関連記事</h4></div>
<ul id="tab">
<li id="MENU1" class="present"><a href="#page1"></a></li>
<li id="MENU2"><a href="#page2"></a></li>
<li id="MENU3"><a href="#page3">人気記事</a></li>
</ul>

<div id="page1"><p id="tab-body1"></p></div>
<div id="page2"><p id="tab-body2"></p></div>
<div id="page3"><div class="hatena-module-entries-access-ranking hatena-module-entries-access-ranking2"
     data-count="10"
     data-display_entry_category="0"
     data-display_entry_image="0"
     data-display_entry_body_length="0"
     data-display_entry_date="0"
     data-display_bookmark_count="0"
     data-source="access"
>
<div class="hatena-module-body hatena-module-body2" id="hatena-module-BODY"></div></div></div>

h4タグで囲まれた部分が見出しになります。
ここでは「関連記事」と表示させるようにしてますが、適当に変えて下さって構いません。

また、5行目の「人気記事」は、アクセス数ランキングのことです。
ここも自由に名前を変更して下さい。

スクリプト

最後にスクリプトになります。
デザイン設定⇒カスタマイズ⇒ヘッダ
または
デザイン設定⇒カスタマイズ⇒フッタ
に書き加えて下さい。

jqueryの読み込みをしてる人は、先頭から6行目までを削除願います。
重複するとブログが重くなる原因になります。

まだ終わりではありません。
8行目と9行目に自身のブログのトップページのアドレスを書いて下さい。
このブログの場合は

var urlRss="http://nuruta2.hatenablog.com/rss";
var url_cat = "http://nuruta2.hatenablog.com/rss/category/";

となります。

<!--[if lt IE 9]>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.3.min.js"></script>
<![endif]-->
<!--[if gte IE 9]><!-->
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.2.3.min.js"></script>
<!--<![endif]-->
<script>
    var urlRss="＜ここに自身のブログのトップページurl＞/rss";
    var url_cat = "＜ここに自身のブログのトップページurl＞/rss/category/";
</script>
<script type="text/javascript" src="http://blog-imgs-104.fc2.com/f/o/v/fovsaikou/nuruta2.js"></script>

<script type="text/javascript">
var tab = {
init: function(){
var tabs = this.setup.tabs;
var pages = this.setup.pages;
 
for(i=0; i<pages.length; i++) {
if(i !== 0) pages[i].style.display = 'none';
tabs[i].onclick = function(){ tab.showpage(this); return false; };
}
},
 
showpage: function(obj){
var tabs = this.setup.tabs;
var pages = this.setup.pages;
var num;
 
for(num=0; num<tabs.length; num++) {
if(tabs[num] === obj) break;
}
 
for(var i=0; i<pages.length; i++) {
if(i == num) {
pages[num].style.display = 'block';
tabs[num].className = 'present';
}
else{
pages[i].style.display = 'none';
tabs[i].className = null;
}
}
}
}

tab.setup = {
tabs: document.getElementById('tab').getElementsByTagName('li'),
 
pages: [
document.getElementById('page1'),
document.getElementById('page2'),
document.getElementById('page3')
]
} //オブジェクトをセット
tab.init(); //起動！
 
// ]]>
</script>