Googleドライブの画像をfaviconとタイトル画像に利用

So-net ブログがhttps化されたことに伴い、変えなくてはならないことが出てきた。
一つはfavicon。
今までは、So-netホームページの中に画像を置いていたのだけど、このホームページはhttpsにはなっていない。
結果としてリンク先がセキュアじゃないということで、ブラウザが警告を出すなどして、faviconが表示されないケースが出てきた。
しかたないので、https化されたGoogleドライブにfavicon画像を置いた。
(そもそもicoファイルをアップロードさせてくれれば、Googleドライブに頼らなくても済むのに)

基本的なやり方は昨年のブログ記事と同じだけどGoogleドライブに置いてるのでこんな感じになる。
<link href="https://https://drive.google.com/uc?export=view&id=[favicon.icoのID]" type="image/vnd.microsoft.icon" rel="shortcut icon">
<link href="https://drive.google.com/uc?export=view&id=[favicon.icoのID]" type="image/vnd.microsoft.icon" rel="icon">
<link href="https://drive.google.com/uc?export=view&id=[apple-touch-icon.pngのID]" rel="apple-touch-icon">
<link href="https://drive.google.com/uc?export=view&id=[android-chrome-192x192.pngのID]" type="image/png" sizes="192x192" rel="icon">
※上記の[と]は実際の記述の際には不要

ついでに、おもしろそうだったのでGoogleドライブに保存したタイトル用の画像をランダム表示するスクリプトを入れてみた。
こちらは、JavaScriptを使うしかないようだけど、意外と簡単。
テンプレート管理のHTML編集の中を以下のように編集。
<div id="container">
の直後(So-netブログの場合)に
<script type="text/javascript">
(function() {
var bg = ["1つめの表示したい画像のID", "2つめの表示したい画像のID", "3つめの表示したい画像のID"];
var r = Math.floor(Math.random() * bg.length);
document.getElementById("container").style.backgroundImage = "url(\"https://drive.google.com/uc?export=view&id=" + bg[r] + "\")";
})()
</script>

これは3つの画像でやりたい場合の例で、10個あるならIDを10個並べておけば良い。
こういうスクリプトを上手く使うと、記念日にそれ用の画像を自動で表示したり、午前と午後で画像を変えたりできる。



今後画像を増やしていくとすると、季節感がない画像(春なのにモミジの紅葉の写真とか)が出てきそうなので、スクリプトを工夫して、通年版＋その季節版をランダムに表示するようにしたいところ。
JavaScriptはそれほど詳しくないが、調べれば何とかなりそうなので、今日いろいろやってみるつもり。