So-net無料ブログ作成
検索選択

so-net 管理ページ衣替え記念、BLOGのアイコンを変更する方法 [BLOG]このエントリーを含むはてなブックマーク#

WS000240.png

別に記念するようなもんじゃ無いんですけどね。

アドレスバーのアイコンは、、どこからやって来る?

最近、当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が表示されないという深刻な事態を引き起こす可能性があります。 十分に理解したうえで、お試しください。
WS000241.png

管理ページで「デザイン」タブをクリックし、さらに「HTML編集」をクリックします。 すると、「上級者向け」というラベルの下に編集すべきHTMLを選択する画面が現れます。

WS000242.png

ここから、現在使用しているHTMLを選びます。 私の場合は、「はてな付き」という名前のHTMLを使用しています。 あれっ? 選べませんか? 実は、HTMLの編集は、「カスタムHTML」にしか許されていないのです。 編集可能なスキンを追加した上で、カスタムのHTMLを準備してからお試しください。


WS000243.png

すると、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 の段階なのだそうで、将来変更されるかもしれません。

nice!(1)  コメント(0)  トラックバック(0)  このエントリーを含むはてなブックマーク#

nice! 1

コメント 0

コメントを書く

お名前:
URL:
コメント:
画像認証:
下の画像に表示されている文字を入力してください。

トラックバック 0

この記事のトラックバックURL:
※言及リンクのないトラックバックは受信されません。

この広告は前回の更新から一定期間経過したブログに表示されています。更新すると自動で解除されます。