読者です 読者をやめる 読者になる 読者になる

攻めは飛車角銀桂守りは金銀三枚

ITとアコースティックギター、そして日常のひとこま。

「はてなブログ」で記事下などにランダムに【自力】で人気記事を表示する方法(2016.09.05修正)

はてな
スポンサーリンク

「はてなブログ」にはランダムに自分が選んだ記事を記事下などに表示する機能がありません。
(たぶんないと思ってます。)

そこで今回は自力で選んだ記事のリンクをランダムに表示するJavascriptを作成しました。

選んだ記事をランダに表示するJavascript

今回はjQueryを極力使わずにベタなJavascriptで書きました。

この前バージョンはjQueryでゴリゴリと書いていたのですがどうしても「はてなブログ」で動作しなかったので断念しました。

表示リストの作成

まずはランダムに表示したり記事へのリンクリストを作成します。

<script>
//人気記事リスト
var popularList=[
     "<li><a href='表示したい記事のURL'>表示したい記事のタイトル</a></li>"
    ,"<li><a href='表示したい記事のURL'>表示したい記事のタイトル</a></li>"
    ,"<li><a href='表示したい記事のURL'>表示したい記事のタイトル</a></li>"
    ,"<li><a href='表示したい記事のURL'>表示したい記事のタイトル</a></li>"
    ,"<li><a href='表示したい記事のURL'>表示したい記事のタイトル</a></li>"
    ,"<li><a href='表示したい記事のURL'>表示したい記事のタイトル</a></li>"
];
</script>

こんな感じで設定します。(件数は何件でもかまいませんが、表示したい件数よりは多く設定して下さい。)

これをヘッダーに設定します。

ランダム表示処理

次にランダム表示処理のソースです。

<script>
function makeTextLink( listName, dispCnt )
{
    var str = "" ;
    var lineNo = 0;
    var chk_num = new Array();
    for( var i = 0 ; i < dispCnt ; i++){
        lineNo = Math.floor(Math.random() * listName.length);
        console.log("no=[" + lineNo + "]");
        if( !checkDuplicate(chk_num, lineNo)  ){
            chk_num.push(lineNo);
            str += listName[lineNo];
        }else{
            i-- ;    //数が足りなくなるのでもう一回
        }
    }
    return str ;
}
//同じ記事を選択しないようにするためのチェック処理
function checkDuplicate(array, str){
    for(var i =0; i < array.length; i++){
        if(str == array[i]){
            return true;
        }
    }
    return false;
}
</script>

これを同じくヘッダーにコピーします。


ランダムに人気記事を出力

最後にランダムに人気記事を表示させます。

<script>
$(function()
{
    var str = "" ;
    //表示するのは記事ページだけにする
    if( document.querySelector("html").getAttribute("data-page") == "entry"){
        //人気記事リスト編集
        str += "<h3>攻めは飛車角銀桂守りは金銀三枚の人気記事</h3><ul>" ;
        str += makeTextLink( popularList, 5 ) ;
        str += "</ul>" ;

        $('div.entry-content').append( str );   //記事の最後にくっつける
    }
});
</script>

こんな感じです。
(2016.09.03 20:50に「$('div.entry-content').after( str );」を「$('div.entry-content').append( str );」に変更しました。)

「makeTextLink( popularList, 5 ) ;」の「popularList」は上で設定した「人気記事のリスト名」、「5」は表示する件数です。

「<h3>攻めは飛車角銀桂守りは金銀三枚の人気記事<h3>」などはご自由に設定して下さい。
なくてもいいし、もっとカッコよくして下さい。

これをヘッダーに貼りつけると記事の最後に「人気記事」のリストが表示されます。

CSSなどを上手く設定すれば画像や広告バナーでも使えると思います。

サンプル表示はこの記事の最後にも出てるはずです。たぶん。

出ない?そんな人におすすめ。

注意事項

万が一、このスクリプト等を利用して発生した何らかのトラブルや損失・損害等につきましては一切責任を問わないものとします。
ご利用になる場合は責任でお願いいたします。

もっとかっこいいコードにしてくれても全然OKです。