忍者ブログ
WEB制作のためのメモ・リンク
[1]  [2
×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

アドレスの左に付いてるあのアイコン=ファビコン

作成方法は以下の通り

1.「16px×16px」と「32px×32px」の画像 を作成

2.上記をgifかpngで書き出す

3.@icon変換(※インストールしなくてもexeファイルダブルクリックで使えます。)
http://www.vector.co.jp/soft/win95/amuse/se201729.html

を使って、

32x32
16x16
の2つの画像を、ツール内にドラッグ。

4.@iconで二つとも選択しながら、「マルチアイコンに保存」をする。
※2つの画像を1つのアイコンにすることができる。

5.好きな場所に保存

6.<link rel="shortcut icon" href="ファビコンまでのパス/名前.ico" />
を<head></head>内に挿入。

7.各ページに設定

8.サーバーにアップ

9.完了

【ドメインに一括に設定したいなら】
1.favicon.icoをドメインルート直下にアップ
(これだけでも最新のブラウザは対応します。たぶんIE以外は)

2.htaccessに

AddType image/xicon .ico
<Files favicon.ico>
ErrorDocument 404 ディレクトリ/favicon.ico
</Files>

と記述追加。
.htaccessなければ.htaccessを追加。

「ディレクトリ/favicon.ico」
は相対パスでも絶対パスでもOK!

これでドメイン以下のページにはすべてファビコンが付きます。

☆FireFoxが一番対応してる。

☆IE7 の場合
ツール - インターネットオプション - 全般タブ - 閲覧の履歴 - 削除
と進み、
・「インターネット一時ファイル」 ファイルの削除
・「履歴」 履歴の削除

【IEの場合】
ドメイン直下に置かないと言うこときいてくれない現象が起こる。

参考:
http://profile.allabout.co.jp/ask/column_detail.php/27210
http://profile.allabout.co.jp/ask/column_detail.php/27659


【IEでファビコンが表示されない問題について】
http://q.hatena.ne.jp/1133217127より抜粋

IEのFaviconに関する仕様は非常に厳格です。
まずWindows icon形式(bmp形式ではないよって拡張子を変えただけではだめ)でなければなりません。
「iconなのだからicon利用に最適化された形式であるべき」という思想です。
Windows icon形式のファイルは@icon変換などで作成することができます。

またIEはサイト(=ドメイン)のルートにあるfavicon.ico以外は読み込みません。
それはただのアクセサリ感覚で実装したFirefoxやOperaとはFaviconの実装理由がまったく異なるためです。
IEのFaviconがお気に入りにどれくらいの人が登録したかを知ることでマーケティングを有利にするためのものです。
また登録したページのアドレスは/favicon.icoに対するアクセスのログにリファラ部分としてかかれるので/favicon.icoのみを読み込むだけで十分です。
また/favicon.ico以外を読み込んだ場合Faviconに対するアクセスログが散在してしまうため/favicon.ico以外を読み込むべきではないのです。
Windows icon形式でサイト(=ドメイン)のルートに配置すれば読み込まれます。

もしもサイト(=ドメイン)のルートにFaviconが置けない場合<link rel=”shortcut icon” href=”[Faviconのhttp://からのアドレス]” />をhead要素の中におけば読み込まれるようになります。
しかしその場合もWindows icon形式でなければなりません。

------------------------------------------------------
ディレクトリ切ってるので、ページごとにファビ設定

■IE
ドメイン直下に置かないと反応薄いのでしょうがないけど捨てる。
運にまかせる。

■その他
この場合直下ではなくて別の場所にファビコンを置いて、
<link>タグを設定すれば、IE以外のブラウザではファビコン設置ページの選別ができる。

※ドメイン直下に置くとすべてのページにファビコン表示されてしまうので
置かないこと!!
------------------------------------------------------

rollover2.jsを下記サイトからダウンロード

http://d.hatena.ne.jp/KAZUMiX/20071017/rollover2


HTMLソース<HEAD></HEAD>内に
外部リンクで「rollover2.js」をリンク

マウスアウト画像を「○○○_rollout.拡張子」
オンマウス画像を「○○○_rollover.拡張子」
で書き出して、「○○○_rollout.拡張子」でコーディングすれば、
ふわっとしたロールオーバーになる。

※ダウンロードしたファイルはコーディングするHTMLに合わせて
文字コードを直さないと動かない。

【サイトデザイン】
◎Web Design Clip (検索項目多)
http://www.webdesignclip.com/

◎あんじょうできてはる (デザイン質良)
http://anjo.dekiteharu.jp/

◎≪デザインリンクデータベース≫ (量多)
http://www.designlinkdatabase.net/

○デザインレシピデータベース (検索項目多、検索しにくいけど・・・)
http://www.designrecipedatabase.net/

○いけてるサイトドットコム
http://www.ikesai.com/

◇Most Inspired (海外)
http://www.mostinspired.com/

◇WEBデザインデータベース
http://www.webdedb.com/

◇デザイン・制作会社系Webデザインリンク集
http://www.art-noc.com/archives/cat_67.php

◇テンプレートモンスタージャパン
http://www.templatemonster.jp/

【ロゴデザイン】
◎デザインIDデータベース
http://www.designiddatabase.net/

画像を「明度100」「コントラスト100」にして印象的にエフェクト

灼熱っぽい感じが出る。

http://allabout.co.jp/gs/flash/closeup/CU20080916B/

 

次のページ &gt;&gt;
カレンダー
04 2024/05 06
S M T W T F S
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
ブログ内検索
アーカイブ
アクセス解析
忍者ブログ [PR]