Google Analytics への対応が思ったより早く終わったので、昨日こっそり作って入れておいたスクリプトの紹介。


ファビコン。
それはブラウザのタブに表示される小さいアイコンのこと。

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内に挿入します。