はじめに
Wikiなんかにある「全記事の中からランダムに一つ記事を選ぶ」ボタンが僕はすごく好きです。
このブログ好きだしなんか見たいけど、何見ようかなーってときに使う、ちょっとした便利機能。
このブログは役立つ方面の記事が多いのでこういう需要はないかもしれませんが、ブログ改修ついでに実装してみました。
本記事では、自分のブログの全記事からランダムに一つ選んでその記事を表示するボタンの実装方法を解説します。
HTMLの知識がなくてもコピペだけで完結します。
というより、これを書いている僕自身もまともなHTMLの知識はありません。
今までいろんなサイトからコードをコピーして、数字だけいじったりして暮らしてきました。
そんなこのブログのキメラパーツの一つの実装方法をご覧ください。
仕組みを教えろとか言われても知りません、あしからず。
目次
参考にさせていただいたサイト
以下の記事をもとに、じゃんじゃんかいじっていたところできました。
HTML知識がない僕でも実装できるようにしていただいて、インターネットの諸先輩方には頭が上がりません。
furutsuki.hatenablog.com
ランダムボタンの設定方法
サイドバーへの設定
「サイドバー」を選択して、項目を開きます。
そしたら、「モジュールの追加」を押しましょう。
下にスクロールして、「HTML」を選択。
ここに、次の項目で紹介するコードをコピペしてください。
できたら、説明のタイトルを書いて、「適用」です。
「変更の保存」を忘れずに！
記事下への設定
「記事本文末尾」を選んで、項目を開きます。
そしたら、「モジュールの追加」を押しましょう。
下にスクロールして、「HTML」を選択。
ここに、次の項目で紹介するコードをコピペしてください。
できたら、説明のタイトルを書いて、「適用」です。
「変更の保存」を忘れずに！
コピペするコード
以下のコードをまるっとそのままコピペしてください！
<button onclick='javascript: fetch("/sitemap.xml").then(r => r.text()).then(data => { const parser = new DOMParser(); return parser.parseFromString(data, "text/xml") }).then(dom => { const locs = dom.querySelectorAll("sitemap loc"); return fetch(locs[Math.floor(Math.random() * locs.length)].innerHTML)}).then(r => r.text()).then(data => { const parser = new DOMParser(); return parser.parseFromString(data, "text/xml") }).then(dom => { const urls = dom.querySelectorAll("url loc"); location.href = urls[ Math.floor(Math.random() * urls.length) ].innerHTML; })' style="font-size: 120%; border: none; background: none; cursor: pointer;">ランダムボタン</button>
デザインを変えたいとき
最後の
style="font-size: 120%; border: none; background: none; cursor: pointer;">ランダムボタン</button>
の部分を変更すると、色や大きさを変えられます！
このブログの設定
まずは例としてこのブログの設定を見てみます。
style="font-size: 282%; color: #0088ff; text-decoration:underline; border: none; background: none; cursor: pointer;">ゆびをふる</button>
これは
- フォントの大きさ2.82倍
- 色：カラーコード#0088ff
- 下線の装飾
の3つを追加しています。
個別に見てみましょう。
文字の大きさを変える
「font-size: 120%」
の120%の部分を変更しましょう。
120より大きくすると大きくなります。
文字の色を変える
「font-size: 120% ; 」の後ろに
「color: #000000;」
などと追加します。
セミコロン（ ; ）で区切られているので、セミコロンはお忘れなく！
この怪しげな6桁の番号はカラーコードと言って、色の識別番号みたいなものです。
↓のサイトを参考に、設定したい色を見つけてみてください。
文字に装飾をする
「font-size: 120% ; 」の後ろに
「 text-decoration:underline;」
などと追加します。
セミコロン（ ; ）で区切られているので、セミコロンはお忘れなく！
下線以外の装飾は以下のページが参考になります。
おわりに
ランダム性は創造力の源です。
みんなもレッツゆびをふる！
ご質問など
本記事についてのご質問などがありましたら、下記のTwitterアカウントのDMまでご連絡ください。
対応させていただきます。
※商業DMに紛れていて気付かない場合があるかもしれません。
1日経って反応がなければ気づいていないので、メンションなどしていただけるとご対応できるかと思います。
お手数をおかけします。
アカウント：@kurosana309637
