【WordPress】スマホ表示でアフィリエイトリンクの表示を見やすく

楽天やAmazonの商品にリンクを貼るときは、楽ちんなのでリンクツールで生成されたテーブルのコードを使用しています。
何度か使ってみた結果、ブログ記事内で読みやすいよう、「大きめの商品画像が左に、商品説明が右」というレイアウトにして、テーブルの横幅指定を削除して記事の幅に合わせています。

すると、問題発生。スマホで見たとき（といっても私はスマホを持っていないので、正しくはipod touchで見たときですが）、左のセルの画像に、右のセルの商品説明の字が被ってしまう！

横幅を指定していないので、記事の幅にテーブルをおさめようとして、こうなっちゃうみたいです。

テーブルの横幅を指定してうまく表示する手もあると思いますが、そもそも、スマホの狭い画面なら、画像の下に商品名などのテキストがあるほうが読みやすそう。
そこで、PC画面ならそのままテーブルで横並び、スマホなら縦並びになるように工夫してみました。

スマホ用のCSSを編集

現在使用中のテーマ「Stinger」はスマホ用のCSS「smart.css」が用意されているので、管理画面の「外観＞テーマの編集」から「smart.css」を選択し、ファイルの末尾に

と追加しました。

商品リンク以外でテーブルを使う予定がない場合は、これだけでテーブルのセルが縦並びになります。

ただし、これだと他の目的で使っているテーブルもまとめて縦並びになってしまいます。
それを避けるには、ちょっと面倒ですが広告のタグをdivで囲んでクラス指定をして、そのクラスに対して上記の指定をするのが良さそうです。

スマホの狭い画面でもずいぶん読みやすくなるので、おすすめです！

ブログランキングです。参考になりましたら → にほんブログ村 WordPress