so-net 管理ページ衣替え記念、BLOGのアイコンを変更する方法 [BLOG]
別に記念するようなもんじゃ無いんですけどね。
アドレスバーのアイコンは、、どこからやって来る？
最近、当BLOGをWEBブラウザで表示したとき、タブに「渦巻きアイコン」
が表示されるようになったことにお気づきの方もいらっしゃるかと思います。
これは、 noritan.org がレンタル・サーバになったことに気をよくして変更したものです。
隣に見える管理ページのアイコンは、so-net が用意したものです。
今日のテーマは、このアイコンを自分の好みのものにする方法です。
そもそも、このアイコンは、どこから来たかというと、各WEBページに「このページのアイコン画像は、これです。」という情報が埋め込まれています。 詳しいことは、 w3c.org の FAQ How to Add a Favicon to your Site に書いてあります。 当BLOGで採用しているのは、「Method 1 (Preferred): Use of a rel attribute value defined in a profile」の方法です。
<link rel="icon" href="http://noritan.org/favicon.png" type="image/png" />
要は、こんなタグがWEBページに書いてあれば OK なのです。
画像は、 noritan.org 配下にあります。
で、どこに書くんだ？
w3c.orgの文書にもあるように、このタグは、 <head> の要素として書かなくてはなりません。 ところが、BLOGというシステムの場合には、<heead> タグは自動的に生成されてしまいます。 そこで、so-netの場合には、テンプレートのHTMLを直接変更してしまいます。
ここで記述している方法は、HTMLを直接変更するため、失敗した場合にはBLOGが表示されないという深刻な事態を引き起こす可能性があります。 十分に理解したうえで、お試しください。
管理ページで「デザイン」タブをクリックし、さらに「HTML編集」をクリックします。 すると、「上級者向け」というラベルの下に編集すべきHTMLを選択する画面が現れます。
ここから、現在使用しているHTMLを選びます。 私の場合は、「はてな付き」という名前のHTMLを使用しています。 あれっ？ 選べませんか？ 実は、HTMLの編集は、「カスタムHTML」にしか許されていないのです。 編集可能なスキンを追加した上で、カスタムのHTMLを準備してからお試しください。
すると、HTML編集画面が出てきますので、「<!--link rel="shortcut icon" href=…」と w3c.org 勧告に沿わない行をコメントアウト、または削除して、アイコンをありかを示す <link> タグを追加します。 これで、WEBブラウザ上にお好みのアイコンが表示されるようになります。
本当は、<head>タグにも profile 属性を追加しなきゃいけなかったのね。 あとで変えておこう。
アイコンの規格は？
アイコンは、16×16ピクセル、または、32×32ピクセルの8-または24-ビット色のもので、フォーマットは PNG（W3C 標準）、GIF、または ICO と定められています。 置き場所は。各自考えてください。 もちろん、so-net のファイル置き場にある画像も使えます。 適宜 URL を探り当てて使ってください。
参考サイト
- How to Add a Favicon to your Site
- 困った時には、 W3C に探しに行くと、たいてい解決します。 ただ、このFAQに限って言えば、まだ Draft の段階なのだそうで、将来変更されるかもしれません。
2009-02-15 21:25
nice!(1)
コメント(0)
トラックバック(0)
コメント 0