Google Blogger で過去の投稿のリンクをランダムに表示する方法が知りたいという質問を見たので解説します。
Blogger の管理画面の「テーマ」項目から、ブログテンプレートの HTML を直接編集する必要があります。
これには HTML、CSS、Javascript とブログテンプレートの HTML を直接編集する手順の理解が必要です。
方法
以下のコードを追加します。
/*===== CSS (一例) =====*/
div, a, img{ box-sizing: border-box; }
#random-posts-outer{
display: flex;
flex-wrap: wrap;
max-width: 100%;
width: 600px;
}
#random-posts-outer>*{
flex-basis: 50%;
padding: 2%;
}
#random-posts-outer img{ max-width: 100%; }
<!--===== HTML, Javascript =====-->
<b:comment render='true'> 投稿のリンク一覧を表示 </b:comment>
<div id='random-posts-outer'/>
<b:comment render='true'> Javascript </b:comment>
<script>
//<![CDATA[
function blog_feed(data){
const random_posts_outer = document.getElementById('random-posts-outer');
const blog_posts_arr = data.feed.entry;
const max_posts = 8; // ← 表示する投稿の最大数
const num_of_disp_posts = (blog_posts_arr.length > max_posts) ? max_posts : blog_posts_arr.length;
const no_double_random_nums_arr = [];
for(let i = 0; i < num_of_disp_posts; i++){
while(true){
const random_num = Math.floor(Math.random() * blog_posts_arr.length);
if(!no_double_random_nums_arr.includes(random_num)){
no_double_random_nums_arr.push(random_num);
break;
}
}
const no_double_random_num = no_double_random_nums_arr[i];
const thumb_url_square = (blog_posts_arr[no_double_random_num].media$thumbnail)
? blog_posts_arr[no_double_random_num].media$thumbnail.url
: 'https://blogger.googleusercontent.com/img/b/R29v...WEWA/s72-c/NoImage.png'; // ← サムネイル画像の URL が設定されていない場合の代替画像の URL
const thumb_url = thumb_url_square.replace(/s[0-9]+-c/, 'w800-h420-n'); // ← 画像の幅と高さ (px)
const title = blog_posts_arr[no_double_random_num].title.$t;
const link_obj = blog_posts_arr[no_double_random_num].link;
const post_url = (link_obj[4]) ? link_obj[4].href : link_obj[2].href;
/* 各投稿リンクの HTML */
random_posts_outer.insertAdjacentHTML('beforeend', `
<a href="${post_url}">
<img src="${thumb_url}">
<div>${title}</div>
</a>
`);
}
}
//]]>
</script>
<b:comment render='true'> ブログフィードを読み込む </b:comment>
<script expr:src='data:blog.homepageUrl.canonical + "feeds/posts/default?alt=json-in-script&callback=blog_feed&max-results=99999"'/>
この Javascript のコードは、まず、ブログの過去の投稿をランダムに抽出して、そこからサムネイル画像の URL、投稿の URL、タイトルを取得して順番に出力する、という blog_feed という関数を定義しています。
その下でブログの全投稿のデータが入ったオブジェクトを引数にした blog_feed 関数の実行スクリプトを読み込んでいます。
よって blog_feed 関数が実行され、目的が達成できるわけです。
解説
CSS について
CSS は b:skin タグなど style タグの中に記述します。
これは見た目を整えるため一例としてすごく雑に作ったものなので適宜変えて下さい。
投稿リンクを表示する部分
<div id='random-posts-outer'/>
id が「random-posts-outer」になっている要素の中に投稿リンクが出力されます。
表示する投稿数の設定
const max_posts = 数字;
は表示する投稿の数です。1以上の任意の数字を設定できます。
全投稿数を超える場合は全ての投稿がランダムな順序で表示されます。
サムネイル画像がない場合の代替画像の設定
const thumb_url_square = (blog_posts_arr[no_double_random_num].media$thumbnail)
? blog_posts_arr[no_double_random_num].media$thumbnail.url
: 'https://blogger.googleusercontent.com/img/b/R29v...WEWA/s72-c/NoImage.png';
オレンジ色の箇所に入れた URL がサムネイル画像がない場合に表示される画像の URL になります。
その画像は Blogger にアップロードして、URL の s数字 (s1600 や s800 など) の部分を s数字-c (s72-c など) に書き換えて下さい。
そうしないと、次の設定が機能しません。
Blogger の画像の URL は s数字 の部分で画像のサイズをコントロールする仕様になっています。
例えば以下のように設定できます。
- s1600
- 画像の比率を変えず幅を 1600px に
- s72-c
- 縦横 72px の正方形に最大面積でトリミング
- w1600-h800-n
- 幅 1600px、高さ 800px に最大面積で中央でトリミング
サムネイル画像のサイズの設定
const thumb_url = thumb_url_square.replace(/s[0-9]+-c/, 'w800-h420-n');
緑色の箇所でサムネイル画像のサイズを設定します。
前述の表のように「s800-c」や「w1600-h840-n」のように値を設定します。
各投稿リンクの HTML の設定
random_posts_outer.insertAdjacentHTML('beforeend', `
<a href="${post_url}">
<img src="${thumb_url}">
<div>${title}</div>
</a>
`);
青色の部分は各投稿リンクの HTML で、この HTML が出力されます。
${}で囲まれた変数の意味は以下です。
- post_url
- 投稿の URL
- thumb_url
- サムネイル画像の URL
- title
- 投稿のタイトル
もし、どうしても IE に対応させたい時は次のように変えて下さい。
random_posts_outer.insertAdjacentHTML('beforeend', ''
+ '<a href="' + post_url + '">'
+ '<img src="' + thumb_url + '">'
+ '<div>' + title + '</div>'
+ '</a>');
実行例
これは当ブログで実行した場合の例です。
上記のコードを実行するとサムネイル画像と投稿タイトルが投稿リンクとなって、このようにランダムに表示されます。
