楽天やAmazonの商品にリンクを貼るときは、楽ちんなのでリンクツールで生成されたテーブルのコードを使用しています。
何度か使ってみた結果、ブログ記事内で読みやすいよう、「大きめの商品画像が左に、商品説明が右」というレイアウトにして、テーブルの横幅指定を削除して記事の幅に合わせています。
すると、問題発生。スマホで見たとき(といっても私はスマホを持っていないので、正しくはipod touchで見たときですが)、左のセルの画像に、右のセルの商品説明の字が被ってしまう!
横幅を指定していないので、記事の幅にテーブルをおさめようとして、こうなっちゃうみたいです。
テーブルの横幅を指定してうまく表示する手もあると思いますが、そもそも、スマホの狭い画面なら、画像の下に商品名などのテキストがあるほうが読みやすそう。
そこで、PC画面ならそのままテーブルで横並び、スマホなら縦並びになるように工夫してみました。
スマホ用のCSSを編集
現在使用中のテーマ「Stinger」はスマホ用のCSS「smart.css」が用意されているので、管理画面の「外観>テーマの編集」から「smart.css」を選択し、ファイルの末尾に
1 2 3 4 |
div.kizi table, div.kizi table td { display: block; } |
と追加しました。
商品リンク以外でテーブルを使う予定がない場合は、これだけでテーブルのセルが縦並びになります。
ただし、これだと他の目的で使っているテーブルもまとめて縦並びになってしまいます。
それを避けるには、ちょっと面倒ですが広告のタグをdivで囲んでクラス指定をして、そのクラスに対して上記の指定をするのが良さそうです。
スマホの狭い画面でもずいぶん読みやすくなるので、おすすめです!
ブログランキングです。参考になりましたら → にほんブログ村 WordPress