Simplicityの横ズレ、原因は改行設定とAdSenseそしてmargin

画像がありません

WordPressのテンプレート「Simplicity」を使用しているとき、ページ右横に謎の余白ができて困ったことはないでしょうか。ページ右横に余白が生じると、同時に横スクロール(いわゆる横ズレ)が発生し、モバイル端末でのレイアウトが大幅に崩れます。今回はSimplicityで「余白・横スクロール」が発生する原因と、その対処法をご紹介。

【原因1】文字の改行設定

Simplicityには、ダッシュボード→外観→カスタマイズ→レイアウト(投稿・固定ページ)の中に、「長い単語を必要に応じて改行する」という設定項目があります。この項目にチェックを入れておかないと、記事中に記載している長文URLが折返されず、そのままダダーッと右にはみ出ます。そしてはみ出た分だけ右横に余白が発生してしまいます。

ページ右横に余白が生じた場合はまず「Simplicityの改行設定」を確認し、未設定の場合はチェックを入れましょう。

Simplicityページ右横に余白と横スクロール6

「長い単語を必要に応じて改行する」にチェックを入れたら、念の為、記事の大見出し・小見出しの文字サイズも確認しておきましょう。大見出しの文字サイズが20pt以上だと、アルファベットやカギカッコで不自然に改行されてしまい、モバイル表示で大幅にレイアウトが崩れます。ちなみに、当ブログでは大見出しの文字サイズを18pt、小見出しを17ptに設定しています。

【原因2】AdSenseが表示領域からはみ出している

ページの右横に余白・横スクロールが発生する2つめの原因は「AdSenseのはみ出し」です。AdSenseがページからはみだしている場合、右横にはみ出した分の余白が生じます。

たとえば、当ブログで使用しているAdSenseコードはすべてレクタングル大(336×280)です。PCの場合は目次上に1つ、そして記事下に2つの計3つ。モバイルの場合は記事タイトル上に1つ、目次上に1つ、記事下ソーシャルボタンの上に1つの計3つを表示させています。

ブラウザの表示領域によってレクタングル大・中が表示されるようCSSでカスタマイズしているので、どの端末で記事を開いても画面内にadsense広告が収まっているはずです。

Simplicityページ右横に余白と横スクロール2
画像:ブラウザ表示領域にAdSenseと文字が収まっている状態

レクタングル大のコードは、ユーザー端末のブラウザ表示領域によって表示される広告サイズが変わります。表示領域が320×450のときはレクタングル中(300×250)、360×510ならレクタングル大(336×280)、といった具合。レクタングル大のコードは常時336×280が表示されるものと思われがちですが、ブラウザの表示領域によって、レクタングル中・大の2種類を切り替えているんですね。

AdSenseの広告コードを使用する場合は、AdSenseがページからはみ出さないよう、ブラウザ表示領域が320×450以下ならレクタングル中、320×450以上ならレクタングル大になるようCSSでカスタマイズする必要があります。

カスタマイズせず、レクタングル大のAdSenseコードをペタッとモジュールに貼り付けるだけでは、ブラウザ表示領域320×450の端末でもレクタングル大(336×280)が表示されてしまい、AdSense広告が画面から大幅にはみ出します。そして、はみ出した分だけページ右横に余白・横スクロールが発生します。前述した「改行設定」にチェックを入れていなければ、記事内の長文URLも折り返されず画面からはみ出すことになります。

Simplicityページ右横に余白と横スクロール4
画像:AdSenseと文字が表示領域からはみ出て余白ができる(青色部分)

ブラウザ表示領域によってAdSenseを切り替える方法は、以下記事が分かりやすいと思います。取得したAdSenseコードを一部削除し、クラス名を追加してからCSSでメディアクエリを書く。作業自体はとても簡単です。

参考【初心者向け】スマホでAdSenseレクタングル大が、画面からはみ出さないようにする

AdSense広告と「スポンサードリンク」ラベルの間に謎の余白ができてしまう場合は、以下記事を参考にコードを修正してください。広告とラベル間の余白はWordPressの自動改行機能によるものですが、改行を消すことで解決します。

関連AdSense広告とラベルの間に謎の余白ができたときの対処法(過去記事)

【原因3】AdSenseの全幅広告設定

AdSenseコードをカスタマイズしていると、AdSenseのレポート画面の最適化項目に「モバイル端末に全幅サイズの広告を表示」が表示されることがあります。

Simplicityページ右横に余白と横スクロール5
(実際の画面)

この設定を広告ユニットに適用してしまうと、ブラウザ表示領域320×450の端末でもレクタングル大が表示され、ページ右側に余白と横スクロールが発生します。レイアウト崩れの原因になるため、この設定は適用しないでください。

【原因4】見出しのmargin

次に考えられる原因は「見出しデザイン」です。私はSimplicityをインストールしたとき、記事内の見出し、関連記事の見出し、AdSenseの関連コンテンツユニットの見出しの3つをデバイス画面の横幅いっぱいに広がるようカスタマイズしました。CSSでh2要素に「margin: 0px -29px 0px;」と指定すると以下画像のような見出しになります。

Simplicityページ右横に余白と横スクロール8
こんな感じ

しかし見出しをカスタマイズしたあとブログ記事をスマホで確認してみると、メインコンテナの右側に余白ができ、スクロールの横ズレが生じていました。どう考えても先程の見出しカスタマイズが原因なので、CSSでh2のmarginを解除し見出しをコンテナ内に収まるよう修正。

Simplicityページ右横に余白と横スクロール7
修正後の見出しがこちら

見出しのCSSを修正して再度スマホで確認すると、先程まであった画面右の余白が完全に消えていました。画面右に余白ができたときは見出しに限らず、CSSでmargin-right、margin-leftを指定している箇所を確認してみると良いかもしれません。

【注意】overflowは使わない

「Simplicity 右側に余白」といったキーワードで検索すると、CSSのoverflowを使って右側の余白を消す方法がヒットします。CSSのoverflowプロパティは表示領域を指定するもので、要素に「overflow: hidden;」を指定すれば、はみだした部分を非表示にすることができます。

たとえば、Simplicityの個別記事ページの右側に余白・横スクロールが発生したとする。このとき、メインコンテナのid名にoverflowを追加すると、一応、余白と横スクロールは消えます。以下が、そのコード。

#container {
overflow: hidden;
}

しかし、overflowの使用は根本的な解決にはなりません。右横の余白は消えますが、長文URLは折り返されず画面からはみ出したまま、AdSense広告も右側が切れたままになります。記事の右横に発生した余白・横スクロールをなくすには、前述した「長文を折り返す設定
」と、AdSense広告サイズをPCとモバイルで切り替えるCSSカスタマイズが必要です。

余白と横スクロールを放置すると、アクセス減少や離脱率アップにも繋がります。最近のスマホは、ブラウザ表示領域360×510や380×550が主流。当ブログの訪問者もこの2つが全体の40%を占めています。ブラウザ表示領域320×450は、全体のたった3%。それでもユーザビリティを考慮し、どの端末でも余白・横スクロールなどのレイアウト崩れが起きないよう、改行やAdSense設定はこまめに確認しておきたいですね。