レスポンシブデザインでスマホから見ると表・アドセンス・余白などがはみ出してしまう問題を解決


Googleがスマホビューに対応していないサイトの順位を落とすモバイルフレンドリー・アルゴリズムを導入するということで、うちのブログでも、モバイルからの見た目を改善しました。

もともとこのブログはレスポンシブ・デザインを採用しているテーマを使っていて、スマホなど画面の小さな機器から閲覧すれば、サイドバーが記事の下方に移動するなど、ディスプレイサイズによってデザインが可変するようになっています。

だいたい、2010年代にWordPressなどを始めた方であれば、公式のテーマを使っていればレスポンシブには標準で対応していることが多いのではないでしょうか。

WordPressでなくても、無料ブログでは見栄えが今ひとつなものの、ほぼスマホビューには対応していて、Tumblrなど最新鋭のブログであれば見栄えも確保しているかと思います。

そんなわけで、うちのブログは、Googleのモバイルフレンドリーテストをやってみると、問題ないサイトと診断されます。

モバイル フレンドリー テスト - Google

ところが、機械的に問題ないと判断してもらっても、実際にスマホから見ると、表示が崩れている場所が多くありました。具体的には以下の三点。

■表がはみだす
表(<table>タグ)を使っている記事では、表がレスポンシブにならないので盛大にはみ出している

■広告がはみ出す
Googleアドセンスのレクタングル大を使っていると、記事本文の幅ではなく広告の幅に合わせて表示されてしまい、本文のカラムを一度クリックして拡大しないと読みにくい。

■本文の幅が狭すぎる
記事本文そのものはレスポンシブ対応しているものの、左右のムダな余白が広すぎて、スマホ縦持ちで見ると横幅が狭く、一行の文字数が少なくて読みにくい。

正直言って、どれも致命的な問題で、わたしなら、こんな読みにくいブログをスマホで読みたいとは思いません。やっぱりデザインがしっかり整っていないと、内容や書き手の印象が悪くなります。

というわけで、単にレスポンシブ対応するだけではなく、スマホからも読みやすい快適なデザインにすべく、対策を考えました。

スポンサーリンク

自分のサイトのスマホビューを確認する方法

まず、自分のサイトがスマホからどう見えているかを確認する必要があります。

スマホを持っている人はそれで確認すればいいですが、持っていない人、またはiOSかAndroidどちらかでしか見れない人は、Google Chromeのブラウザの便利機能を使えば、どんな環境からの見え方でもシミュレートすることができます。

Tech TIPS:Google Chromeブラウザでスマートフォンサイトをチェックする - @IT

この機能を使って、自サイトの様々なページ、ホームだけでなくて、色々な記事や固定ページ、カテゴリアーカイブなどもチェックして、表示がおかしくなっているところがないか調べます。

その結果、うちのサイトでは先に述べた3点でした。表の問題などは、表を使っている記事を見てみないと気づかなかったので、色々見て回ってチェックするのは大切です。

1.表がはみ出す

次にそれぞれの問題解決のためにとった解決策について。

まず、表がはみ出すことについては、調べてみると、WordPressで用いる表を、レスポンシブ対応にしてくれるプラグインがありました。

WordPress - テーブル実装プラグイン「TablePress」 + レスポンシブ対応

WordPress標準の表Tableをレスポンシブにする初歩的な方法 | デフよん

しかし、これは、今後の記事で使う表をレスポンシブ対応にしてくれるというだけで、これまでの記事の表はそのままです。過去の記事の表は、ひとつずつ手動で修正していく必要があります。

手動で修正する場合は、WordPressの投稿一覧の検索ボックスに「table」とでも入力すれば、HTML表示のテキストも含めて検索してくれるので、<table>タグの表を使っている記事を簡単に見つけることができます。

相当表を使いまくっている人でない限り、検索して探しても、それほど数は多くないと思うので、できる限り手動で修正するのがおすすめです。20記事くらいなら、30分もあれば終わるでしょう。

いちいち打ち直すのが面倒なら、表の部分をSkitchなどでスクショにとって、画像に差し替えてしまうのもありかもしれません。そうするとテキストとして検索に引っかからなくなって、コピペや修正もできなくなってしまいますが。

しかし、そもそも表を使っている記事があまりに多すぎて手動で修正するのが困難なら、一括修正でレスポンシブ対応してくれるプラグインも。

WordPress(ワードプレス)のテーブルを一括でスマホ対応にしてみよう | ワードプレスドクター

Responsive Scrolling Tables — WordPress Plugins

こちらで紹介されているResponsive Scrolling Tablesを入れると、表にスクロールバーが付加されて、はみだしてしまう部分が記事の中に収まるようにしてくれます。

このプラグインはしばらく更新されていないので、いつまで使えるかわからないという不安もありますから、使う場合でも、あくまで手動で修正し終わるまでの一時的な応急処置として使うほうがいいかもしれません。

そのほか、ちょっと専門的になりますが、こちらの記事の手法を使うという手も。

tableをレスポンシブでも破綻しないようにする簡易的な1手法 – WEBUTUBUTU

とはいえ、表形式は、レスポンシブ対応させた場合でも、表のセルがずれてまわりこむことで対応しているにせよ、自動的に表のセルの幅を変化させてディスプレイサイズに合わせるにせよ、どちらでも見にくくなってしまうのは間違いありません。

下手にレスポンシブ対応するより、途中に書いたようにResponsive Scrolling Tablesでスクロールバーをつけるか、スクショで画像形式にしてしまうほうが見やすい気さえします。

おそらく、スマートデバイスが普及している時代の流れで、表という表示形式がそぐわなくなっているのだと思います。うちのブログではこの機会に表を全部なくして、箇条書きに変更したり、画像に差し替えたりしてしまいました。

2.アドセンス広告がはみ出す

次に、Google AdSenseの広告がはみ出して、本文幅がそれに合わさってしまう問題について。

まず、近年ではレスポンシブ対応の新しい形式のアドセンスが登場しているので、設定を見直して貼り替えるのが一番いいでしょう。

数年前にアドセンスを始めた人は、当時はレスポンシブ広告がなく、おすすめされているレクタングルを選んだ人が多いでしょうが、この機会に最新のタイプに設定し直すことで、時代の流れについていくことができます。

昔はPCから見たときに広告が中央に表示されるよう<center>タグでくくったものですが、レスポンシブ対応の広告サイズを選んだ場合、その必要はなくなります。かえって中央寄せしていると表示が崩れるので注意してください。

あるいは、モバイル表示のときとデスクトップ表示のときとで表示を変えるという方式もあるようです。

レスポンシブルデザインなブログでGoogle Adsenseの広告をはみ出さないように表示する方法 - 酢ろぐ!

一方で、レクタングル広告を使っていると、本文そのものは読みやすい幅になるのに、アドセンス広告の右端がはみ出してちょん切れてしまう状態になることもあり、うちは今は、一部の広告がその状態です。

記事本文の読みやすさのには支障がないので、ほったらかしていますが、気になる人は、こちらの記事で説明されている手法を使うといいと思います。

Google Adsense広告の右側がはみ出しているのを調整する方法 | IT便利帳

3.左右の余白が広すぎて邪魔

最後に、ブログの左右の余白が広すぎて、記事本文のカラムの幅が狭くなり、一行の文字数が少なくなって読みにくくなる問題の解決策を。

これはプラグインなどではなく、テーマそのものを修正する必要があるので、子テーマのstyle.cssの記述に手を加えていきます。

WordPressの場合、余白の問題には、だいたい三種類あって、このブログでいうと、背景(青色の部分)の左右の余白、メインコンテンツエリア(この文章を書いている白いエリア)の左右の余白、そして引用文(<blockquote>タグでくくった部分)の左右の余白が関係しています。

まず、背景の余白については、具体的にはテーマによって異なりますが、このサイトではTwenty Elevenを使っているので、以下の情報が参考になりました。

WordPressでページ左右の余白を削除する

余白(margin padding)を削る-WordPress Twenty Elevenカスタマイズ

できれば「自分のテーマ名  左右 余白」といったキーワードで検索して情報を探してみるのがおすすめです。

レスポンシブデザインだと、背景の右側にだけ余白ができてしまうこともあるようです。

スマホのレスポンシブデザインで右側に余白ができる場合 | Web Design Leaves

レスポンシブデザインで右側に謎の空白ができたときの解決策 | koukiTips

本文メインコンテンツエリアの左右の余白については、以下のような情報が参考になりました。

WordPressで記事の左右の余白を調整 | 脳味噌はなまる

【Twenty Fifteen CSS編集メモ】メインコンテンツの左右の余白を狭くする - itkhoshi.com

情報がなかなかないテーマでも、style.cssを開いてページ内検索で#content、#Container、#wrapperあたりを探して、数値を調整すればなんとかなるかもしれません。バックアップをとってから試行錯誤してみるといいかもしれません。

最後に、背景の余白、本文の余白、引用文の余白は、全部入れ子状になっている都合上、それぞれすべての余白を減らしていかないと、一番内側に位置する引用文の中が異常に窮屈になりがちです。

引用文のデザインはstyle.cssのblockquoteのところで色々指定できて、余白も変えられます。おしゃれなデザインのcssを公開してくれているサイトも多いです。

どうせ調整するなら、テーマデフォルトの引用文よりも、見栄えのいいデザインを導入しつつ、ついでに余白も削減してしまうのがおすすめです。

blockquoteタグをCSSだけで格好良いデザインにする【画像不要】 | おーとえすとさいと

【CSS】引用符(blockquote)のカスタマイズ – ysklog

これで、うちのブログは、スマートデバイスからも十分見やすくなり、本当の意味でモバイルフレンドリーになったかと思います。

モバイルフレンドリーだけでなく、インターネットの閲覧環境は日々変化しているので、無料ブログはともかく、WordPressのような個人経営サイトでは、時代に合わせて表示を確認して修正していかないといけません。

毎度毎度かなり大変ではあるものの、自分の庭を手入れしているみたいなもので、うまくいくと達成感がありますね。

スポンサーリンク

スポンサーリンク
WordPress