ＷＥＢ制作メモ

WEBの小技

以下のサイトにはちょっとした小技が掲載
http://www.acky.info/tips/web/index.html

WEBの小技

他にも

CSSテクニック

ファビコンの設定方法

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

作成方法は以下の通り

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

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

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

を使って、

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

4.＠iconで二つとも選択しながら、「マルチアイコンに保存」をする。
※２つの画像を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/

FLASH　画像切り替えエフェクト

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

灼熱っぽい感じが出る。

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

【カフェ】　デザイン参考リンク

マザーズ　北堀江
http://www.mother-s.net/

クナーベ
http://www.knaben.jp/

グラシアニ
http://www.graciani-kobe.jp/