アダルトアフィリエイト実践記

テーマをカスタマイズする際はレスポンシブデザインにも注意が必要

 


ここ最近、SEO効果を狙ってワードプレステーマのスタイルシートやPHPをカスタマイズしてきました。

私はこういったことに全く知識がないので一つずつ手探りで作業をしていき、なんとかきれいに表示できるようになりました。

「うまくいった~」と満足していると、ある時ふと「スマホでの表示ってどうなってるの?」と気になりました。

早速チェックしてみると、、、案の定デザインが乱れている、、、、orz。

ワードプレスのほとんどのテーマがスマートフォンやタブレットPCでも見やすいように自動で表示を切り替えてくれる「レスポンシブデザイン」になっていますが、テーマを自分でカスタマイズする場合には、レスポンシブデザインの表示も注意しなければいけないことがわかりました。

その簡単なチェック方法をご紹介します。

FirefoxでスマホやタブレットPCの表示に切り替える方法

レスポンシブデザインがどのように表示されているか、サイトをチェックする必要があります。

Firefoxをご使用の方は、

Ctrl+Shift+M

を押すだけで、簡単にスマートフォンでのプレビュー画面に切り替えることができます。

これまで、ワードプレスプラグインの「Responsive Post Preview」を使用してきましたが、この方法の方が簡単で便利です。

Firefoxでのスマートフォンプレビュー

customize-responsive 04

customize-responsive 05

customize-responsive 06

iPhoneの基本サイズ「320×480」やiPadの「768×1024」など選択することもできますし、それを横にして表示することもできます。

表示サイズを任意で指定することもできるので、どんなサイズでも表示可能です。

Responsive Checker | レスポンシブデザイン検証サービス

こんなサイトもあるんですね。

チェックしたいサイトのURLを入力するだけで、「iPhone」「iPad」「Galaxy」「Xperia」などのプレビューを表示してくれます。

Responsive Checker | レスポンシブデザイン検証サービス

スマートフォンとタブレットPCのスタイルシートにも注意する

テーマによって異なるかもしれませんが、テーマのデザインをカスタマイズする際は、

  • スマートフォン用スタイルシート(smart.css)
  • タブレット用スタイルシート(tablet.css)

など、レスポンシブ用のスタイルシートの調整も必要です。

まとめ

ワードプレスには無数のテーマがあり、PCでもスマホでもタブレットでもきれいに表示されるように調整されていて、レスポンシブデザインになっているテーマが多いです。

私の場合、見出しタグなどを変更してみたかったのでやるしかなかったのですが、カスタマイズをしてみるとあっちこっちに不具合が出て大変なことになってしまいました、、、orz。
おかげでCSSに少し詳しくなりましたが。

今のところ、なんとかきれいに表示されているので、しばらくはカスタマイズしないようにします(笑)。

 

SEO対策   0

この記事に関連する記事一覧

コメントフォーム

名前

 

メールアドレス

 

URL

 

 

コメント

トラックバックURL: