Google Analytics への対応が思ったより早く終わったので、昨日こっそり作って入れておいたスクリプトの紹介。
ファビコン。
それはブラウザのタブに表示される小さいアイコンのこと。
HTMLのlinkタグで指定できます。
この、結構大きく見える一萬です。
SVGなのでファイルサイズは小さいし、画質も美しいのですが、環境によってはSVG画像をファビコンとして表示できないため、その場合には別に登録してあるPNG画像が表示されます。
さて、記事のカテゴリやタグごとに、別のファビコンを表示したいとき、PHPを使うのが手っ取り早いと思われます。ライブドアブログのカテゴリやタグの変数は公開されているので、それを利用してファビコン画像を指定できそう。
でも管理人は PHPはあまり書いたことが無く、テンプレートをいじるのも怖い…ということで、いつものように JavaScript をフリーエリアに貼る方法でやってみました。
あとでファビコンを変えるべき条件があれば
URL文字列の中の
漢字入りの URL は、こんな風に変換しておきます。
単純比較ではなく
ここもテンプレの仕様に依存しているので、テンプレートHTML を変更した場合などはいちおう確認する必要があります。
ファビコン。
それはブラウザのタブに表示される小さいアイコンのこと。
HTMLのlinkタグで指定できます。
<link rel="shortcut icon" type="image/vnd.microsoft.icon" href="(画像のURL)">このブログのアイコンは
SVGなのでファイルサイズは小さいし、画質も美しいのですが、環境によってはSVG画像をファビコンとして表示できないため、その場合には別に登録してあるPNG画像が表示されます。
さて、記事のカテゴリやタグごとに、別のファビコンを表示したいとき、PHPを使うのが手っ取り早いと思われます。ライブドアブログのカテゴリやタグの変数は公開されているので、それを利用してファビコン画像を指定できそう。
でも管理人は PHPはあまり書いたことが無く、テンプレートをいじるのも怖い…ということで、いつものように JavaScript をフリーエリアに貼る方法でやってみました。
$(function(){ var flg = false;まず、
flg
という変数を作り、false
(偽)という値をセットします。あとでファビコンを変えるべき条件があれば
true
(真)にします。
if(window.location.href.indexOf("http://humotomiti.blog.jp/tag/%E5%B0%8F%E9%8D%9B%E6%B2%BB%E5%81%A5%E5%A4%9C") != -1 flg=true;最初の条件として、ページのURLを調べて、小鍛治健夜タグのページであれば、
flg
を立てます。URL文字列の中の
%E5%B0%8F%E9%8D%9B%E6%B2%BB%E5%81%A5%E5%A4%9C
は、「小鍛治健夜」のパーセントエンコーディングです。漢字入りの URL は、こんな風に変換しておきます。
単純比較ではなく
indexOf()
を使っているのは、2ページ目以降の URL にも対応するためです。
else{ for(var tag=document.getElementsByClassName("article-tags")[0].getElementsByTagName("a"),i=0;i<tag.length;i++){ if("小鍛治健夜"==tag[i].innerHTML){ flg = true; break; } } }次に、記事のタグに「小鍛治健夜」が含まれている場合にも、
flg
を立てます。ここもテンプレの仕様に依存しているので、テンプレートHTML を変更した場合などはいちおう確認する必要があります。
if(flg) $('<link rel="shortcut icon" type="image/vnd.microsoft.icon" href="http://humotomiti.blog.jp/char/saki-1107.png">') .appendTo("head"); })
flg
が立っていれば、ファビコンを指定したlink
タグをhead
内に挿入します。
コメント