ブログで稼ごう　ガリンペイロ

ファビコンてご存じですか？
FirefoxやNetscape、Opera、Lunascapeなどタブ式ブラウザを利用している方には定番ですね。
アドレスバー、タブ、ブックマークツールバー、ブックマークサイドバーなどにサイトのアイコンとして表示されるicoやgif形式の16×16pxの画像をファビコン（Favicon）と呼びます。
（Firefoxでのファビコン表示例）


残念ながら最も普及しているブラウザInternetExplorer（以下IE）ではIE6まで表示されなかったのでファビコンを設置していない有名サイトも多かったのですが、ようやく登場したタブ式のIE7の普及により、今後はサイト管理者はファビコン設置は必修になるでしょう。
WindowsXPでIE7をインストールするとブログで画像をアップロードできないなどのトラブルがあるようなので、ファビコンをみたいなら、Firefoxなどを利用することをオススメします。（IEよりサクサク動くし、ブロガーには何かと便利です）

ブログの場合、ICO・GIFファイルのアップロード・html編集が出来ればファビコンを簡単に設置できます。
html編集が出来るブログはブログサービス比較を参照ください。
（因みにライブドアブログ、ブロガー、ヤプログなどは各ブログで初期設定のファビコンが表示されています）

←これはガリンペイロのファビコンです。

←これは姉妹サイト忍者ブログで独自ドメイン・カスタマイズのファビコン
このようにアニメーション（動くファビコン）も可能です。「F5」キーを押してみてください。ちょっとくどいけど（笑）

←同じくライブドアブログ解説編

16×16のicoファイルが作成出来るフリーウェア（GIMPなど）やサイトもありますし、下記の通りウィンドウズのペイントでも作成出来ます。

ペイントでのファビコン作成方法
ペイントなどお絵かきソフトで正方形の画像を作成しGIF、JPG、PNGファイルのどれかで保存します。
FaviconJapanさんや、favikon(英語)など自動生成サイトでファビコン生成します。
生成したicoファイルをシーサーのファイルマネージャーでアップロードします。
「デザイン」−「html」で<Link rel=...という記述が並んでいる部分に下記１行を追加し、再構築してください。

<Link rel="SHORTCUT ICON" href="アップロードした画像のアドレス">

簡単ですね。

Photoshopで透過色の美しいファビコン画像を作成する方法
さて、ドロー系のフリーウェアなどでもファビコンを作成できるのですが、やはりこだわる方はPhotoshopなどで高精度な画像を作りたいことと思います。
ただ、PhotoshopCSやIllustratorではICOファイルを開くこともできないし、ファビコン生成ツールでは画像圧縮（あるいは変換）時に画質が落ちてしまいます。
この問題を解決するにはICO (Windows Icon) Formatというプラグインをダウンロード・インストール（program files/adobe/photoshop CS/プラグインのフォルダにコピーするだけ）してください。
これにより、ICOファイルに別名保存できますので、透過色などを使った美しいファビコンを作れます。作業としては、128×128pxなど大きめに作って「イメージ」−「画像解像度」バイキュービック法（シャープ）により、サイズを圧縮します。
例えば、
のようなpng画像をicoに新規保存すると、のようなファビコンを作れます。


トラックバック・コメント欄でファビコン表示する方法
更にFaviconAPIなどを使うとトラックバック・コメント欄において当該サイトにファビコンの設置があればそれを表示することも出来ます。

シーサーブログ(SEESAA)の場合は管理画面で「デザイン」−「コンテンツ」−「記事」で画面右上に表示される「コンテンツHTML編集」をクリック。
表示されるhtmlの最下段に下記記載があるので、太字部分を追加すればＯＫです。（トラバの場合の設定例）

<div class="comments-head">この記事へのコメント</div>
<% loop:list_individual_article_children -%>
<div class="comments-body">
<div class="text"><% comment.body | html | tag_strip | nl2br | clickable('target="_blank" rel="nofollow"') %></div>
<div class="comments-post">Posted by <% if:comment.homepage %>
<img src="http://favicon.aruko.net/m/f/<% comment.homepage | html | tag_strip %>" width="16" height="16" border="0" />
<a href="<% comment.homepage | html | tag_strip %>" target="_blank" rel="nofollow"><% comment.writer | html | tag_strip %></a><% else %><% comment.writer | html | tag_strip %><% /if %> at <% comment.createstamp | date_format('%Y年%m月%d日 %H:%M') %><br /></div>
・
・
・
この記事へのトラックバック
<% loop:list_individual_article_tb -%>
<hr />
<img src="http://favicon.aruko.net/m/f/<% tb.url %>" width="16" height="16" border="0" />
<a href="<% tb.url %>" target="_blank" rel="nofollow"><% tb.title | html %></a>
Excerpt: <% tb.excerpt | text_summary | html %>
Weblog: <% tb.blog_name | html %>

あっ！　でもガリンペイロをトラバの実験台にはしないでくださいね。
私はスパムを許す大きな心は全くありませんので。