Googleドライブの画像をfaviconとタイトル画像に利用：kouの雑感：So-netブログ

	ブログをはじめるログイン

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個並べておけば良い。
こういうスクリプトを上手く使うと、記念日にそれ用の画像を自動で表示したり、午前と午後で画像を変えたりできる。

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

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

2018-07-08 00:01 nice!(19) コメント(12)
共通テーマ：blog

nice! 19

残念ながらさっぱりわかりません。kouさんはこういうお仕事をされているんですか。営業職と思っていましたが・・・
by takenoko (2018-07-08 05:11)

JavaScript良いですね。参考にさせてくださいな。＾＾
by スイカが好き (2018-07-08 08:51)

＞takenokoさん、
Webデザイナーなどの仕事はしたことないですが、少し興味があって調べてやっています。
職業的には営業なので、仕事そのものはこのあたりのスキルはまったく無縁です。(笑)
by kou (2018-07-08 08:59)

＞スイカが好きさん、
参考になったなら良かったです。(^^)
Googleドライブの画像を利用すると毎回エクスポートするため、表示に少し時間がかかるのが難点ですね。あとエクスポートがいつまでサポートされるのか不明という問題も。DropBoxとか別のサービスの方が良いかも知れません。
by kou (2018-07-08 09:05)

こんにちは＾＾
　わたくしは自分のホームページにJavaScriptを利用していますが、この画像を変えると言うのがなかなか上手くいきません（－。－
ターンオーバーなどは使えてますけれど。
by mimimomo (2018-07-08 14:18)

＞mimimomoさん、
私もhtmlファイルへのhtml文追加はやったことがあるのですが、JavaScriptの埋め込みは初めてでした。
今日は7月～8月は花火の画像を表示するように追加してみました。
一箇所でも何か抜けや間違いがあったら表示されないので、私も試行錯誤ばかりです。(^^;
by kou (2018-07-08 17:58)