ＷＥＢ制作メモ https://binako.blog.shinobi.jp/ ＷＥＢ制作のためのメモ・リンク Thu, 25 Jun 2009 01:11:14 GMT ja © Ninja Tools Inc. WEBの小技 http://www.acky.info/tips/web/index.html

WEBの小技

他にも

CSSテクニック

]]> コーディング https://binako.blog.shinobi.jp/%E3%82%B3%E3%83%BC%E3%83%87%E3%82%A3%E3%83%B3%E3%82%B0/web%E3%81%AE%E5%B0%8F%E6%8A%80 Thu, 25 Jun 2009 01:11:14 GMT binako.blog.shinobi.jp://entry/6 ファビコンの設定方法 アドレスの左に付いてるあのアイコン＝ファビコン

作成方法は以下の通り

１.「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以外のブラウザではファビコン設置ページの選別ができる。

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

]]> コーディング https://binako.blog.shinobi.jp/%E3%82%B3%E3%83%BC%E3%83%87%E3%82%A3%E3%83%B3%E3%82%B0/%E3%83%95%E3%82%A1%E3%83%93%E3%82%B3%E3%83%B3%E3%81%AE%E8%A8%AD%E5%AE%9A%E6%96%B9%E6%B3%95 Wed, 24 Jun 2009 07:21:26 GMT binako.blog.shinobi.jp://entry/5 超簡単　滑らかロールオーバー

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

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

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

※ダウンロードしたファイルはコーディングするHTMLに合わせて
文字コードを直さないと動かない。]]> ＪＳ https://binako.blog.shinobi.jp/%EF%BD%8A%EF%BD%93/%E8%B6%85%E7%B0%A1%E5%8D%98%E3%80%80%E6%BB%91%E3%82%89%E3%81%8B%E3%83%AD%E3%83%BC%E3%83%AB%E3%82%AA%E3%83%BC%E3%83%90%E3%83%BC Tue, 23 Jun 2009 10:15:13 GMT binako.blog.shinobi.jp://entry/4 デザインリンク集 【サイトデザイン】
◎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/

]]> デザイン https://binako.blog.shinobi.jp/%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3/%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%83%AA%E3%83%B3%E3%82%AF%E9%9B%86 Tue, 23 Jun 2009 10:04:16 GMT binako.blog.shinobi.jp://entry/3 FLASH　画像切り替えエフェクト 画像を「明度100」「コントラスト100」にして印象的にエフェクト

灼熱っぽい感じが出る。

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

 

]]> ＦＬＡＳＨ https://binako.blog.shinobi.jp/%EF%BD%86%EF%BD%8C%EF%BD%81%EF%BD%93%EF%BD%88/flash%E3%80%80%E7%94%BB%E5%83%8F%E5%88%87%E3%82%8A%E6%9B%BF%E3%81%88%E3%82%A8%E3%83%95%E3%82%A7%E3%82%AF%E3%83%88 Tue, 23 Jun 2009 09:49:09 GMT binako.blog.shinobi.jp://entry/2 【カフェ】　デザイン参考リンク　 http://www.mother-s.net/

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

グラシアニ
http://www.graciani-kobe.jp/]]> デザイン https://binako.blog.shinobi.jp/%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3/%E3%80%90%E3%82%AB%E3%83%95%E3%82%A7%E3%80%91%E3%80%80%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E5%8F%82%E8%80%83%E3%83%AA%E3%83%B3%E3%82%AF%E3%80%80 Wed, 17 Jun 2009 00:58:10 GMT binako.blog.shinobi.jp://entry/1