整頓された本棚の画像

Googleアドセンス自動広告によるサイトレイアウト崩れを防ぐ方法【CSS一行で解決】

こんにちは、渋木です。

今日はまた少し暖かくなったように思いますね。有難い限りです。決して冒頭のあいさつで話すことがないので、毎度馬鹿の一つ覚えのように天気の話をしているわけではありませんよ、ええ、はい。

さて、今日はブログのレイアウトについてのお話です。以前から気になっていたことなんですが、

「Googleアドセンスの自動広告で、サイドコンテナーの要素のデザインが崩れる」

というトラブルの解決策を発見しましたので、今回も忘れぬうちに記事にしておこうと思います。

ちなみにGoogleアドセンスの登録・申請方法については、是非↓の記事を読んでみてください!

別の記事でも何度か話題にしていますが、当ブログはGodios.という無料テーマデザインをインストールして使っています。このGodios.では「ウィジェット」という機能を使ってサイドコンテナー(「カテゴリー」「プロフィール」「カレンダー」「広告」といった、PCサイズでサイトを見た場合の右側の項目全般)の内容を設定しています。

「ウィジェット」自体はWordPressの標準機能です。私はGodios.以外のテーマファイルを試したことがないので詳細はわかりませんが、おそらくGodios.と同様、「外観」というメニューの中に「ウィジェット」という項目がありますので、そこで編集できると思います。

Godios.のサイドコンテナーのブロック要素は「.widget-wrap」というクラスが割り振られていました。そしてこのクラスには「display: table-cell;」というcssプロパティが付与されていました。

この「display: table-cell;」、たとえばサイトにテーブルを使って表を実装する際には、そのtableのtdなどのcssとして追加しておくと、widthの可変性を持たせることができるので、使いようによってはたしかに便利なんです(個人的にはテーブルそのものが好きじゃないのであまり使うこともありませんが・・・サイトリデザインなどの仕事や既存サイトへのウィジェットの追加作業などでテーブル関係の要素を弄ることは、フロントエンドエンジニアであればよくあることだと思いますので、初耳!という方は覚えておいて損はないと思います)。

ただし、今回の要素はtableでもなんでもなく、単なるdiv要素です。今のところ「display: table-cell;」に固執するような特別な理由も見当たりません。そして「display: table-cell;」にはデメリットとして、指定された要素がすべて横並びになってしまう、という非常に面倒且つ、サイトのレイアウトデザインを簡単に崩してしまいがちな厄介な効果をもたらしてしまうのです。

実際に当ブログでもGoogleアドセンスの自動広告を導入して以降、サイドコンテナーに広告が自動で挿入される度に、

レイアウト崩れの画像1

こんな感じだったり、、、


レイアウト崩れの画像2

こんな感じの残念なレイアウトに!恐ろしい!

そんなこんなで、せめてサイドコンテナーの横幅(width)くらいは(PCやスマホといった各デバイスに対してレスポンシブ対応ではありつつも)固定化しておきたいなーと思ったわけです。

さて、解決するにはどうすればいいでしょうか。
察しの良い方はもうお判りでしょうが、「display: table-cell;」を上書きしてしまえばいいんです!

上書きするにはcssの編集が必要です。WordPressにおけるcssの編集は「子テーマ」、もしくはお使いのテーマによって「外観」の中にある「カスタマイズ」というメニューの中に、CSSを追加する項目(Godios.なら「追加CSS」)がありますので、必ずこのいずれかの方法で編集してください!

もし自作以外のテーマファイルを使ってWordPressを利用している場合、絶対に親テーマのcssを編集してはいけません。テーマ配布元でアップデートがある度に、お使いの親テーマファイルも更新されてしまうので、あなたが編集・追加した内容はすべて消え失せてしまいます。これまた恐ろしい!

お使いの子テーマファイルの確認方法とその編集方法については、↓の記事が参考になると思うのでご参照ください。

さて、肝心の上書きの内容ですが、該当のブロック要素(当ブログの場合だと「.widget-wrap」というクラスのdiv要素)に対して

「display: block;」

こちらを追加しましょう!

追加したcssの内容
.widget-wrap {
  display: block;
}

たったこれだけでGoogleアドセンスの自動広告の挿入が起きても、横幅だけは保たれます。実際の画像が↓です!

レイアウト崩れが直った画像1
レイアウト崩れが直った画像2

いかがでしたか?当ブログだけでなく、大抵のWordPressサイトに応用できる知識だと思うので、Googleアドセンスの自動広告によるレイアウトデザイン崩れにお困りの方は、この方法をぜひお試しくださいね!