ランダムポスト表示ボタンを置いてみました

サイドバー(個別ページではフッター)に「ランダムポスト表示ボタン」というウィジェットを試しに置いてみました。

ボタンを押す度にランダムで選択された記事に飛ぶというもの。押してみるまでどの記事に飛ぶのかはわかりません。なのでボタンの名前は「何が出るかな？」にしています(笑)

ウィジェットについて

このウィジェット、もちろん自作ではありません。Japanese Bloggers Info でたまたま覗いてみたブログ(どこだったか忘れた)に置いてあるのを見て、良さげだったのでソースコードから拝借してみたのですが、調べてみたらどうやらここで紹介されているウィジェットらしいです。
Random Posts Displaying Button for Blogger | Blogger Widget Generators (Wayback Machineによるアーカイブ)

記事が大量にあるブログで、古い記事も見てほしい！とか、人気記事以外にも日の目を見させたい！っていう方にオススメかも。

240件ほどある当ブログでは初期の2017年の記事もちゃんとピックアップされました。1000件以上あるようなブログでも古いのも拾ってくれるはず。(※RSS フィードが非公開だと機能しません)

ウィジェットコード

ChatGPT に整理してもらったウィジェットコードを置いときますので、使ってみたいという方はこのコードをレイアウト編集ページにて「HTML / JavaScript」 ウィジェットのコンテンツ欄にコピペして、お好きな場所に設置して下さい。

ボタン名(33行目)やボタンデザインの CSS や一番上の説明文はお好みでカスタマイズしてください。

<p style='font-size:15px;text-align:center'>ボタンを押すと記事がランダムで表示されます。</p>

<div id='myLuckyPost'></div>

<script>/*<![CDATA[*/
function showLucky(root) {
  const feed = root.feed;
  const entries = feed.entry || [];
  const entry = feed.entry[0];
 
  for (let j = 0; j < entry.link.length; ++j) {
    if (entry.link[j].rel == 'alternate') {
      window.location = entry.link[j].href;
    }
  }
}
function fetchLuck(luck) {
  const script = document.createElement('script');
  script.src = '/feeds/posts/summary?start-index=' + luck + '&max-results=1&alt=json-in-script&callback=showLucky';
  document.getElementsByTagName('head')[0].appendChild(script);
}
function feelingLucky(root) {
  const feed = root.feed;
  const total = parseInt(feed.openSearch$totalResults.$t, 10);
  const luckyNumber = Math.floor(Math.random() * total) + 1;
  const a = document.createElement('a');
  a.href = '#random';
  a.rel = luckyNumber;
  a.onclick = function() {
    fetchLuck(this.rel);
    return false;
  };
  a.innerHTML = 'ランダムで記事を見る'; //ボタン名
  document.getElementById('myLuckyPost').appendChild(a);
}
/*]]>*/</script> 
<script src='/feeds/posts/summary?max-results=0&amp;alt=json-in-script&amp;callback=feelingLucky'></script>

<style>
#myLuckyPost a {
  position: relative;
  color: #fff;
  text-decoration: none;
  background: linear-gradient(to bottom, RoyalBlue, DodgerBlue);
  font-weight: bold;
  display: block;
  padding: 6px;
  border-radius: 8px;
  box-shadow: 0px 5px 0px RoyalBlue, 0 10px 10px #333;
  margin: 1em auto;
  width: 160px; /*ボタンの横幅*/
  max-width: 100%;
  text-align: center;
}
#myLuckyPost a:hover {
  opacity: .9;
}
#myLuckyPost a:active {
  box-shadow: none;
  top: 3px;
}
</style>

最後に

当ブログの人気記事は Blogger カスタマイズ記事で、初期の頃にメインで書いていた雑記や写真記事はほとんど見られてません。そういうのはもう他のブログに移すか消してしまおうかなとも考えてましたけど、今回導入したウィジェットで少しでも見てもらえる機会が増えたら嬉しいです。

というわけで、気が向いたらでいいので、ボタンをポチっていろんな記事を覗いてみてくださいね！