画像にマージンができる
かなり初歩的で無駄なことかもしれませが、htmlに小さい画像（15pixel以下）をなんのcssもかまさずに入れるとFireFox、IE7で余計なスペースができます。理由はよくわかりませんが、対処法を書き残しておきます。
vertical-align: top;(topなりbottomなり)
}
情けなくも理由がわかりませんが、これをモダンブラウザのみに適応させれば直ります。
しかしそもそもこんな小さい画像をいれる必要が無いといえばそうなんですが。
どうしても入れたい！という時に。
もっと詳しい使い方はこちら。
mixiが更新されていない
ちょっと前にmixiへ自動的に更新されるプラグイン「Wp-MixiPublisher 1.0.0 rc1」を入れたけど、mixiが先日リニューアルしてからこれが効いていないようです。てっきりmixiに投稿されてるもんだと思っていたので悲しい・・・。
ところでmixiのリニューアルについて、機能が整理されたのですが見にくいですね・・・。
メインカラーのオレンジが少なく文字だけでボタンやリンクを見分ける必要があって、ちょっと疲れます。
テキスト飛ばしはスパム判定？
当サイトのタイトル「lifepad」の画像は、h1テキストを消してその背景として設定しています。
テキストは”text-indent: -9999px”で消し、”a”タグに”width”、”height”を設定してリンク範囲を決めています。
このやり方の利点は、 サイトに一つしか使えないh1タグを使いたい、けれどテキストにはしたくないという場合に、画像で代用することができる点です。
ショッピングサイト等ではヘッダーに小さい文字でh1テキストを入れるのが当たり前のようになっていますが、やはり見栄えが悪くなってしまいます。その為に画像で代用するしか僕のレベルでは出来なかったのですが、このやり方が”yahoo”や”msn”ではスパム行為ととられている可能性が高いです。
先週にあった”yahoo”検索のアルゴリズム変更で、 今までは「lifepad」の検索ワードでトップだったのが、無くなってしまいました。
googleは相変わらずトップです（当たり前なんですけど）。google Love。
しかし、これではh1タグはテキストしか駄目ということになってしまいます。
「もともと”h”タグはテキストを入れるものだ！」と言われればそうなのかもしれませんが、h1タグは最も目立たせたい部分に使うものでもあるワケで、そこにチャチなテキストを入れたくないという人はたくさんいると思います。
飛ばしたテキストの文字数を制限する等の 対処の仕方もあったのではないかと思ってしまいます。最近のヤフーはとにかく自分の都合の悪いことばかりなせいか、ますますgoogle賛美が加速しています。google Love。
フォントサイズを"em"で指定する場合の注意点
フォントサイズを”em”で指定する場合、親要素を”１”とした相対的な数値になる。
簡単に言えば”em”が”%”になってしまうようなもの。
例えば
#box1 { font-size:1em; }#box1 p { font-size:0.8em; }
上記のような場合には”box1 p”内の要素はとくに影響は無いが、
#box1 { font-size:0.8em; }#box1 p { font-size:0.8em; }
とした場合は”#box1 p”内のテキストは、親要素で設定した”0.8em”よりさらに”80%”小さいフォントサイズになってしまうということです。
以前はpxで指定していたのをemに変えた際に原因がわからず困っていましたが何とか解決。
しかし、便利といえば便利ですが、もうちょっと単位を固めて欲しいと思います。
ファビコンの作り方
ファビコンとはInternet Exploler6.0以前なら【お気に入り】のサイトタイトルの横に出るアイコン画像で、Fire Foxやsafariならタブのサイトタイトルにあるアイコン画像のことです。
【アドレスのファビコン画像】
【タブのファビコン画像】
これがあると、お気に入りに入れた際に視認性が格段によくなりますし、動くアイコンだったりすると結構記憶に残るものです。
設置するのも特別難しいものではないので作ってみます。
作業としては
- 16×16ピクセルの”gif”か”png”形式の画像を作ります。（windows付属の”ペイント”でもできそう。）注意したいのは透過が使えないことです。これを考慮して四角めいっぱいにデザインしたアイコン画像を作ります。
- 作った画像を”ico”データに変換してくれるありがたいサイト“FavIcon from Pics”へ飛びます。
- 英語サイトなのでちょっと面食らいますが、やることは簡単。
“Source Image”の選択ボタンをクリックして、作成した”gif”か”png”のデータを選んでアップロードします。 - 画像を選びアップしたら”Generate Favicon.ico”をクリックします。
- すると”zip”形式のデータがダウンロードされるので、解凍します。
- 解凍されてできたフォルダの中に”favicon.ico”というデータがあるはずです。それをFTPソフト等でサイトの最上層の階層（indexがあるディレクトリ）にアップします。
- <head>タグ内（<link~>でCSSやjavaをリンクさせている部分なら見栄えもよいです）に以下のタグを挿入します。
- <link rel=”shortcut icon” href=”favicon.ico”>
- 完成です！「表示されない！」という場合は画像へのパスが間違っている可能性があります。href=”favicon.ico”の部分を通常イメージと同じように”../image/favicon.ico”等にしてしまうか、絶対パスにしてみるとよいかもしれません。
やはりファビコンがあるといいですね。ブログには必須と言ってよいでしょう。
