簡単にファビコン設置とJavaScriptの外部化 | Toyo☆World

Toyo☆World

日常の楽しいことや不憫なこと・・・
人の不幸は蜜の味?的な
とにかく何でもありのTOYOワールドです。

私のブログを開くと
タブがこんな風になっているのはお気づきでしょうか?



この小さな画像が私のピグになっていて
ブラウザー上で、そのウェブサイトのシンボルマークとして使用されるアイコンのことを
ファビコンと言うのだけど 
たくさんタブを開いているとき
ひと目でわたしのブログってわかるような目印みたいなもの。

以前にもファビコンの作り方と設置の仕方をお役立ち情報で紹介したことがあるのだけど
いつのまにかできなくなっていたのよね。

でもそのやり方はすごく面倒で わかりづらいものだった。

しかし~奥さん!朗報ですよ。
今回は簡単にファビコンの画像を作れるし 設置もできるサイトがあるのよ。

それがこちらのサイト→JavaScriptでファビコン設置

①まずは小さな画像を作ります。
16×16 または32×32
これは32×32


小さな画像を作るの面倒だよーという人はこちらで。

②作った画像を一番上にリンクしてあるサイトでアップロードします。




③そして生成されたJavaScript をコピーしてプラグインに貼り付けます。
親切にアメーバブログでの設置の仕方も書いてありますので
そちらを参照しながらやってみてくださいね。

しかし~ここで涙目になる人も(汗

プラグインに余裕があればそのまま貼り付けるだけでいいのだけどね。

アメブロのプラグインには3800の文字制限があり
大抵の人はなにかしらプラグインに貼っていると思うので
この文字制限により生成された長~いJavaScriptを貼り付けるのはきついと思うのよ。



そこで JavaScriptの外部化をしなくてはなりません。

そのやり方も画像をアップロードした後にちゃんと説明してあります。
至れり尽くせりだねグッド!

それでも私のブログを見てくれている人の中にはお子様や初心者の方も多いので
ちょっと補足をしておきますね。


JavaScriptの外部化はコピーしたJavaScriptコード(サイトの二番目の方ね)
をメモ帳などのテキストに貼り付けて
名前をつけて自分のわかり易い場所に保存します。
メモ帳はそのままだとtxtという拡張子なのでここでJSというJavaScriptの拡張子にします。







これで保存した場所にこんな風に保存されています。
↓↓↓


これをJSファイルをアップロードできる別サーバーでも借りて
アップロードします。

念の為に私はファビコンで保存しているけど
faviconで保存したほうが無難かもです。
英数字じゃないとアップロードできないサーバーもあるので。


そして残念ながらアメブロでは画像だけしかアップロードできないので
どこか無料のサーバーを借りるしかありません。

私が使っているのは忍者ブログ。ここはJSファイルも簡単にアップロード出来ます。
すでに忍者ツールズで何かしら(アクセス解析など)借りているユーザーなら
簡単にブログも作れます。

忍者ツールズは初めてという人でも無料で新規ユーザー登録できます。

他にもわざめーば松本さんのところで紹介されているDropboxなどもいいかも。
Dropboxについて記事が何回にも別れて紹介してくれているのでそちらを参照してみてくださいね。→


Dropboxでアップロードした画像をアメブロで使う時のデメリットなどもあるので
使ってみたい人は必ず松本さんの所の記事を全部読んでみてくださいね。

最後に 他サイトのサーバーでアップロードした画像のURL(アドレス)をコピーして

こちらのように外部化したコードをプラグインに貼り付けてくださいね。




くれぐれもhttp://example.com/path/favicon.js の部分は
別サーバーにアップロードした自分のURLに置き換えてくださいね。



!ただし、FireFoxとChromeとOperaでは有効ですが、
IE(Internet Explorer)とEdgeではこちらの方法ではだめみたい。(残念)



外部化のやり方はプラグインの文字制限に対抗する手段として重宝しますので
覚えていたほうがいいと思います。

説明が長くなってしまいましたが
うまくできるといいですね。

やってみてできた!という人はコメントで報告してくれると嬉しいな♪