Keyword "CSS" - 18 items
CSSでIEに疑似要素を指定する時の注意点
リニューアルに伴い、画像の拡大表示に「Fancybox」を利用する事にしましたが、拡大させたい画像にマウスカーソルを持っていっても、通常のリンクなのでマウスカーソルは「pointer」になり、拡大されるのかそうじゃないのか判断ができません。
ということで、FancyBoxで拡大する画像には、よくある虫眼鏡的なズームカーソルを表示させることにしたのですが、IE 8をはじめとする、全てのIEに適用させるために苦労したのでそのメモです。
IE7のheightの扱い
本当に久しぶりにスタイルシートの作成で悩みました。原因はIE7。登場前はIE6よりはましなはずと期待していましたが、やはりましにはなっても不完全なまま。結局IE6対策と同じぐらいの労力を割かねばならないブラウザが一つ増えただけでした。
vertical-align｜IEとOpera の場合
稚拙のプラグイン「NP_OnlyImg」を作った動機をすっかり忘れていたのですが、先日ふと思い出し即実行。カテゴリー一覧、タグ抽出画面に記事内の画像をアイコン化して表示しました。文字列だけだったカテゴリー一覧ページがかなり楽しくなったと自負しております。特に Mac 一覧は気持ちいいです。Book や Movie もいいですね。自分が読んだ本や見た映画の表紙が一望できるのは何と幸せなことでしょう。
思い通りに表示されない場合
先日 Nucleus フォーラム「トピックを表示 - 画面の表示がおかしい・・・？」であいまいな知識のまま発言して、一人モニタの前で赤面していたのですが*1。それはともかく、自分のサイトが思い通りに表示されないと暗澹たる思いでいっぱいになりますよね。Blog なんてやるんじゃなかった…とまで思う人はまあいないと思いますが、とにかくむかつきます。
表示が乱れる主な原因はブラウザの解釈の違いが原因である事は多いですが、もうとんでもなく表示が乱れている場合、ソースの記述ミスが多いようです。なので、とりあえずきれいな、ルールに添ったソースを書いてください。となるわけですが、それを調べるのがめんどくさい。
Lightbox JS｜カスタマイズ後のセンタリング
未だ IE で表示させることができない当サイトの Lightbox ですが、いじくり回しているうちに微妙にセンターからずれていることが気になって仕方がありません。
というわけで、またまた知識も無いのに修正したのでメモ。
確認は Safari、Mac 版の FireFox、Opera で行っています。が、Opera では微妙ですがずれていますね。おまけに AdSense も飛び出して表示されたように見えます（笑）。興味のある方は、一度 Opera で見てください。思わずクリックしたくなりますよ（笑）。
Lightbox JS｜かっこいい画像表示
Nucleus ユーザに朗報です。
「Nucleus(JP)フォーラム :: Lightbox.JSについて」が元で、Andy さんがプラグインを作成してくれました。導入方法や、その他のプラグインとの調整などは
「我がサイトにLightbox JSが！」
で詳しく解説してくれています。いやいや、ほんとにすごい人たちです。
残念ながら当サイトは IE で表示されていないもよう。寝ころびながらの作業だからミスったのかな（笑）。あー腰痛い。
はてなブクマで人気の「Lightbox JS」を導入しました。導入に当たっては「Web2.0ライクな画像サムネイル生成」を参考にしました。ありがとうございます。
当サイトでは、Javascript を利用したサイトデザインを極力避けてきたのですが*1、これはかっこいいだけでなく、実用度も非常に高いので、導入に踏み切りました。
導入方法はほんとに簡単なのですが、配付されているスタイルシートを修正したのでメモ。
印刷用のスタイルシート設置
先日、ふと思い立って印刷用のスタイルシートを作成しました。自分で印刷しようとしたのですが、スタイルシートのmedia属性を「all」としていたので、不要な部分、具体的には左右のメニュー項目などまで印刷されてしまい、紙が無駄。おまけにブラウザによっては背景をきちんと黒にしてくれて、インクの無駄。
ということで、不要な部分を大幅にカットし、見た目に関してはほとんどブラウザの初期設定に任せるスタイルシートを作成しました。
Mac IE からのコメント文字化け対策
データベースが崩壊した旧サイトですが、Google 様のキャッシュや Internet Archive: Wayback Machine などのお力を借りて、8 割方記事を復活させることができました。今調べたら未だに残ってて、懐かしの旧サイト完全版が見れました。記念に前の記事で紹介している「Paparazzi!」を使って、キャプチャしておきました。いやいや、いいですね〜ミニバナー。もうこれに夢中でした（笑）。
なんて思い出に浸りたかったのではなくて、消えてしまった記事の中に未だに検索に引っ掛かってしまうものがあるので、ここで書き直そうと思ったわけです。
スターハックの代替手段
「@Style」さんからのトラックバックで知ったのですが、僕が多用しているCSSハックの一つ「スターハック」は止めなさいと、IEBlogで呼びかけているそうです…ってお前らのせいでどれだけ苦労していると…IE7が標準準拠すればいいだけだろうが！
と怒っていても問題は解決しないので、早速対策しました。
2カラムで一方のみをセンタリング（ただしIEは無視）
旧サイトは3カラムでごちゃごちゃしていたので、今回はシンプルにいこうと決めていました。実は当初、1カラムを目論んでいたのですが、さすがにカテゴリー一覧をどこに置くか迷い、プルダウンメニューなども考えましたが、ぱっと見てどれだけのカテゴリーがあるのかわからないのがいやだったので、2カラムに変更しました。後付けのサイトメニューを設置するにあたり、今のレイアウトになったのですが、当初は本文を表示するメインカラムをセンタリングできず、先日やっと実現できたのでそのメモです。ただし、例によってIEは無視してます。ご了承ください。
