2007年06月29日

ブログのコメント・トラックバックでファビコン表示

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

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

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

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

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

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

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

ペイントでのファビコン作成方法
ペイントなどお絵かきソフトで正方形の画像を作成しGIF、JPG、PNGファイルのどれかで保存します。
FaviconJapanさんや、favikon(英語)など自動生成サイトでファビコン生成します。
生成したicoファイルをシーサーのファイルマネージャーでアップロードします。
「デザイン」−「html」で<Link rel=...という記述が並んでいる部分に下記1行を追加し、再構築してください。
<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などを使うとトラックバック・コメント欄において当該サイトにファビコンの設置があればそれを表示することも出来ます。
favicon02.JPG
シーサーブログ(SEESAA)の場合は管理画面で「デザイン」−「コンテンツ」−「記事」で画面右上に表示される「コンテンツHTML編集」をクリック。
表示されるhtmlの最下段に下記記載があるので、太字部分を追加すればOKです。(トラバの場合の設定例)
<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 %>

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


posted by がりんぺいろ Edit | Comment(0) | ブログカスタマイズ
ブックマークに追加する

この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
※ブログオーナーが承認したコメントのみ表示されます。

この記事へのトラックバック
メルマガ、ホームページ、メールアンケート、アフィリエイト、懸賞メールなど様々な方法でインターネットで副収入を得る方法がありますが、今から始めるにはブログとアフィリエイトの組み合わせは最も効率的に稼ぐことが出来ます。私もブログをはじめて2ヶ月目には約2万円を得ることが出来、以前から作成しているホームページより売り上げ上昇が早いので、最近はブログ作りに集中しています。
では何故そんなに稼げるのか、そしてその方法を解説したいと思います。
はじめの一歩  ブログをはじめよう  アフィリエイトをはじめよう  ブログの機能を使おう 見栄えを良くしよう(html入門) 写真を掲載しよう リンクを使いこなそう
月に1万円稼ぐアフィリエイターは実は少数派。売り上げが伸びない方、アクセスを伸ばしたい方は必ず読んで下さい。
Firefoxを使おう ブログをカスタマイズしよう ブログツールを使いこなそう 人気ブログを研究しよう アクセスアップ・SEOを考えよう ランキングサイトへ登録しましょう アフィリエイト的ブログサービスの選び方 アクセス解析を使おう 目的にあったブログを選ぼう
月に5万円稼げるようになるとようやく一人前のアフィリエイターと言えるでしょう。最初の壁を越えるためのテクニックです。
独自ドメインを使おう 日本語ドメインを使おう Google サイトマップに対応させよう もっとアクセス解析



×

この広告は1年以上新しい記事の投稿がないブログに表示されております。