今春より、アマゾンのアフィリエイト用リンク作成ツールに「カエレバ風」を使わせていただいているが、WordPressの一部テーマで、スマートフォンで表示したときだけ画像の下におかしな空白が出来ているのに気づいた。赤枠の部分である。
レスポンシブデザインでアマゾン等のアフィリエイト画像下に空白が出来るときの対応
Tag Archives: スタイルシート
レスポンシブデザインでアマゾン等のアフィリエイト画像下に空白が出来るときの対応
IE9/10で突然WordPressのレスポンシブデザインが崩れたときは、互換表示になっている
心当たりがないのに、突然Internet Explorer 9/10（IE9/10）でWordPressのレスポンシブデザインが崩れた場合は、IE9が互換表示になっているか確認すること。
Google Chromeの「DirectWrite」機能でArial Blackが表示されなくなった
米国時間8月26日に公開されたGoogle Chrome 37から実装された「DirectWrite」によるテキストレンダリング機能。フォントをスムーズに表示させるものだが、これによりWebサイト上でArial Blackに指定していたフォントが、普通のArialになってしまった（Windows 7 Professional SP1、64/32ビット両方で確認）。
IE8へのバージョンアップで、Google AdSenseやWordPressのスタイルシート反映が不安定になった場合の対応
遅まきながら、Internet Explorerを7から8にバージョンアップした。私の動作環境はWindows XP SP2なので、このままPCが朽ち果てるまでIE7でよいと思っていたが、最近はIE7をサポート終了するサイトが増えてきたし、閲覧中に固まる頻度も激しくなったので、最後のバージョンアップということでIE8にした。IE9以上はWindows 7を買うことになる。
リスト要素でカッコ付き数字や丸囲み数字を使うには「text-indent」をマイナスにする
「富士通館林システムセンターの電源装置故障はUPSの切替動作障害」で引用したソニー銀行リリース文中で、リスト要素がカッコ付き数字になっている。これはどうやって表現しているのか。ソースとスタイルシートを見ると、カッコ付き数字はそのまま本文に書き、text-indentプロパティをマイナスにして、その分だけpadding-leftプロパティをプラスにしていた。なるほど、これでマーカーなしにすれば、カッコ付き数字や丸囲み数字のリストが出来る。
WordPressで一定期間経過した過去記事に、古い記事であることのメッセージを自動表示する
ネット上では過去記事がそのまま残っている。内容が時代遅れになっているものや、リンク先が切れて意味不明になっていることも多い。記事には掲載年月日が書かれているので、それを意識して読んでくれればいいのだが、表示が小さかったり、見落とすこともあるだろう。そうした読者に注意を促すため、記事の先頭に古い記事であることを自動的に表示したい。
リストの間隔を調整するのは「line-height」ではなく「margin」
HTMLタグのリスト（<ul><ol><li>）で行間を調整したいと思うことがある。行間なので、スタイルシートのline-heightプロパティが思い浮かぶが、これは文章全体の行間であって、リストの行間とは違う。
Twitterのリニューアルでデザインが変わった公式ツイートボタンを、以前の雰囲気に近づける
Twitterのリニューアルに伴い、公式ツイートボタンが12月9日から変わってしまった。以前のデザインのほうがよかったが、仕方がないので出来るだけ以前の雰囲気に近づけるようにする。
フロートの解除は「clear:all;」ではなく「clear:both;」
HTML上でのフロートの解除をずっと、
<br style="clear:all;" />
にしていた。非推奨になった
<br clear="all" />
からの発想でそうしていたのだ。
IEではこれで意図どおり表示されていたので気づかなかったが、
<br style="clear:both;" />
にしないとfirefoxでは有効にならない。そもそも、clearプロパティの値にallはない。