[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。
http://www.acky.info/tips/web/index.html
WEBの小技
- Photoshopのチャンネルを使った髪の毛の切り抜き方法
- Dreamweaverで目的のCSSクラス、IDを簡単に探す
- Dreamweaverのツールバーにspanボタンを追加
- QRコードの作り方
- Dreamweaverのツールバーカスタマイズ
- favicon、お気に入りアイコンの作り方
- 404 NotFoundページの作り方
- imode XHTMLの基礎知識
CSSテクニック
- display:inline-blockを使った中央寄せ
- CSSで作るプルダウンメニュー
- CSSで作るツールチップ
- 疑似クラス:hoverを使ったロールオーバー
- positionプロパティのrelative、absoluteの簡単な使い方
- 横並びリストを自動で折り返しさせる
- 横並びリストを中央寄せにする
- リストを横並びにする
- フォームのIME-MODEを指定する
- 均等割付でテキストを揃える
- Firefoxでリンクの点線がはみ出る時の対処法
- text-indentのネガティブマージンで、ぶら下げインデント
- リストタグのスタイルをを元に戻す
- その他のショートハンドプロパティ
- ショートハンドプロパティの使い方
- ブロック要素の左寄せ、中央寄せ、右寄せの指定方法
- インライン要素の左寄せ、中央寄せ、右寄せの指定方法
アドレスの左に付いてるあのアイコン=ファビコン
作成方法は以下の通り
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以外のブラウザではファビコン設置ページの選別ができる。
※ドメイン直下に置くとすべてのページにファビコン表示されてしまうので
置かないこと!!
------------------------------------------------------
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/