IE9/10で突然WordPressのレスポンシブデザインが崩れたときは、互換表示になっている

心当たりがないのに、突然Internet Explorer 9/10(IE9/10)でWordPressのレスポンシブデザインが崩れた場合は、IE9が互換表示になっているか確認すること。

Continue reading

Google Chromeの「DirectWrite」機能でArial Blackが表示されなくなった

米国時間8月26日に公開されたGoogle Chrome 37から実装された「DirectWrite」によるテキストレンダリング機能。フォントをスムーズに表示させるものだが、これによりWebサイト上でArial Blackに指定していたフォントが、普通のArialになってしまった(Windows 7 Professional SP1、64/32ビット両方で確認)。

Continue reading

IE8へのバージョンアップで、Google AdSenseやWordPressのスタイルシート反映が不安定になった場合の対応

遅まきながら、Internet Explorerを7から8にバージョンアップした。私の動作環境はWindows XP SP2なので、このままPCが朽ち果てるまでIE7でよいと思っていたが、最近はIE7をサポート終了するサイトが増えてきたし、閲覧中に固まる頻度も激しくなったので、最後のバージョンアップということでIE8にした。IE9以上はWindows 7を買うことになる。

Continue reading

リスト要素でカッコ付き数字や丸囲み数字を使うには「text-indent」をマイナスにする

「富士通館林システムセンターの電源装置故障はUPSの切替動作障害」で引用したソニー銀行リリース文中で、リスト要素がカッコ付き数字になっている。これはどうやって表現しているのか。ソースとスタイルシートを見ると、カッコ付き数字はそのまま本文に書き、text-indentプロパティをマイナスにして、その分だけpadding-leftプロパティをプラスにしていた。なるほど、これでマーカーなしにすれば、カッコ付き数字や丸囲み数字のリストが出来る。

Continue reading

WordPressで一定期間経過した過去記事に、古い記事であることのメッセージを自動表示する

ネット上では過去記事がそのまま残っている。内容が時代遅れになっているものや、リンク先が切れて意味不明になっていることも多い。記事には掲載年月日が書かれているので、それを意識して読んでくれればいいのだが、表示が小さかったり、見落とすこともあるだろう。そうした読者に注意を促すため、記事の先頭に古い記事であることを自動的に表示したい。

Continue reading

リストの間隔を調整するのは「line-height」ではなく「margin」

HTMLタグのリスト(<ul><ol><li>)で行間を調整したいと思うことがある。行間なので、スタイルシートのline-heightプロパティが思い浮かぶが、これは文章全体の行間であって、リストの行間とは違う。

Continue reading

Twitterのリニューアルでデザインが変わった公式ツイートボタンを、以前の雰囲気に近づける

Twitterのリニューアルに伴い、公式ツイートボタンが12月9日から変わってしまった。以前のデザインのほうがよかったが、仕方がないので出来るだけ以前の雰囲気に近づけるようにする。

Continue reading

フロートの解除は「clear:all;」ではなく「clear:both;」

HTML上でのフロートの解除をずっと、

<br style="clear:all;" />

にしていた。非推奨になった

<br clear="all" />

からの発想でそうしていたのだ。

IEではこれで意図どおり表示されていたので気づかなかったが、

<br style="clear:both;" />

にしないとfirefoxでは有効にならない。そもそも、clearプロパティの値にallはない。