Bloggerでは、ブログ上にガジェットとして「人気の投稿」や「連絡フォーム」を設置することができます。しかし、「今までの記事をランダムにピックアップして表示する」ものは今のところありません（2020.12.04現在）。そこでランダムに記事を表示する方法について調べたところ実装できたので、そのやり方をまとめてみます。
自分のブログ上に表示しているランダム記事のガジェット
ランダム記事を表示するコードをガジェットで実装
ランダム記事の表示方法については以下のページを参考にさせていただきました。貴重な情報を有難うございます🙏
まずBloggerの管理画面の「レイアウト」を選択し、ランダム記事を表示したい場所で「ガジェットの追加」の「HTML/JavaScript」を選んでガジェットを追加してください。すると編集画面が出ると思うので、タイトルには好きな名前（例：Pick Up Posts）を入力してください。そしてコンテンツの部分には以下のコードを入力してください。
<style type="text/css">
#random-posts img{
float:left;
margin-right:15px;
width:60px;
height:60px;
object-fit: cover;
}
ul#random-posts{
list-style-type:none;
padding:0
}
#random-posts li{
margin-bottom:15px
}
.random-title{
margin-bottom:5px
}
.random-summary{
margin-top:5px;
display:block
}
</style>
<ul id='random-posts'>
<script type='text/javascript'>
var randomposts_number = 5; /* 表示する投稿の数 */
var randomposts_chars = 50;
var randomposts_details = 'yes'; /* 投稿日とコメント数を表示するか */
randomposts_details2 = 'no'; /* ? */
var randomposts_comments = 'Comments';
var randomposts_commentsd = 'Comments Disabled';
var randomposts_current = [];
var total_randomposts = 0;
var randomposts_current = new Array(randomposts_number);
function randomposts(json) {
total_randomposts = json.feed.openSearch$totalResults.$t
}
document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=randomposts\"><\/script>');
function getvalue(){for(var a=0;a<randomposts_number;a++){for(var b=!1,c=get_random(),d=0;d<randomposts_current.length;d++)if(randomposts_current[d]==c){b=!0;break}b?a--:randomposts_current[a]=c}}function get_random(){var a=1+Math.round(Math.random()*(total_randomposts-1));return a}
</script>
<script type='text/javascript'>
function random_posts(a){for(var b=0;b<randomposts_number;b++){var c=a.feed.entry[b],d=c.title.$t;if("content"in c)var e=c.content.$t;else if("summary"in c)var e=c.summary.$t;else var e="";if(e=e.replace(/<[^>]*>/g,""),e.length<randomposts_chars)var f=e;else{e=e.substring(0,randomposts_chars);var g=e.lastIndexOf(" ");f=e.substring(0,g)+"…"}for(var h=0;h<c.link.length;h++){if("thr$total"in c)var i=c.thr$total.$t+" "+randomposts_comments;else i=randomposts_commentsd;if("alternate"==c.link[h].rel){var j=c.link[h].href,k=c.published.$t;if("media$thumbnail"in c)var l=c.media$thumbnail.url;else l="記事中に画像が無い(サムネイル画像を表示できない)場合に表示させたい画像のURL"}}document.write("<li>"),document.write('<a href="'+j+'" rel="nofollow"><img alt="'+d+'" src="'+l+'"/></a>'),document.write('<div class="random-title"><a href="'+j+'" rel="nofollow">'+d+"</a></div>"),"yes"==randomposts_details&&document.write('<span class="random-details">'+k.substring(5,7)+"."+k.substring(8,10)+"."+k.substring(0,4))+"</span>","yes"==randomposts_details2&&document.write('<span class="random-summary">'+f)+"</span>",document.write('<div style="clear:both"></div></li>')}}getvalue();
for (var i = 0; i < randomposts_number; i++) {
document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&start-index=' + randomposts_current[i] + '&max-results=1&callback=random_posts\"><\/script>')
};
</script>
</ul>
<div style="font-size: 10px; float: right;"><a target="_blank" href="http://helplogger.blogspot.com/2012/03/add-random-posts-widget-to-blogger.html" rel="nofollow noopener">Random Posts Widget</a></div>
※上記のコード中の、サムネイル画像を表示できない時に代わりに表示する画像のURLを指定する部分に書いてある「記事中に画像が無い(サムネイル画像を表示できない)場合に表示させたい画像のURL」と書いた部分は消してください。代替画像を表示させたい場合はそこに代替画像のURLを記述してください（random_posts 関数内の一箇所だけ）。
上記のコードでは記事が5つ、サムネイル画像とタイトルと投稿日がそれぞれ表示されます。表示する記事の数を変えたい場合は randomposts_number の値を適宜変更してください。
また、サムネイル画像やタイトル、投稿日の表示を変更したい場合はコード下方にある random_posts 関数の中身を編集してください。例として投稿日の表示について、上記のコード
'+k.substring(5,7)+"."+k.substring(8,10)+"."+k.substring(0,4))+"では 月.日.年 の順で表示されるようになっています。k.substring(5,7) が月、k.substring(8,10) が日、k.substring(0,4) が年の値で、これらを . で結合させたものを出力しているので、ここを編集することで年月日の表示を変更することができます。
また、一つ注意点として「記事内の画像をサムネイルとして表示させるには、記事内の画像のアップロード先URLについて、ファイル名の前に書かれている部分を解像度表記にする」必要があります。
記事に画像がある場合、HTMLビューモードにするとその画像のアップロード先のURLを確認できると思うのですが、多くの場合 https:// ~~~ /w320-h213/ファイル名 のようになっていると思います（アップロードの設定により異なる場合もあると思います）。ファイル名の前にある w320-h213 のような部分は画像サイズを表しており、このように画像サイズで書かれていると先述したコードでランダム記事を表示する時に画像が正しく表示されません。
サムネイル画像を表示できるようにするためには、画像のアップロード先URLのファイル名手前の部分を画像サイズ表記ではなく「解像度表記」にする必要があります。書き方は s1000 みたいに s解像度 という形で希望する解像度を書きます。解像度の値が大きいほど記事の画像が綺麗に表示されるようになるのですが、高くしすぎると記事を表示する時に画像の読み込みに時間がかかるようになってしまうので、1000近くが良いように個人的には思います。
画像のアップロード先URLの編集は各記事の１つ以上の画像に対して行う必要があるので面倒ではあるのですが、これを行うことでランダム記事の表示時にサムネイル画像が表示されるようになります。
※この情報はBlogger HelpのQAより知りました。
以上がBloggerでランダムに記事をピックアップ表示する方法でした。記事をたくさん書くと昔に書いた記事が埋もれてしまう（トップページに表示されなくなってしまう）ので、昔に書いた記事も見てもらうためにも今回のようなガジェットを使う方法は有効であるように思います。ご参考になれば幸いです。
0 comments:
コメントを投稿