最近、サブのノートパソコンで記事をアップすると、高確率でデザインが壊れてしまうことが続きました。ただ、その後で数回リロード更新すると治った（実際には治ってなかったのですが）ように見える時もあったので、あまり気にしていませんでしたが、ようやく原因が分かりましたので、今更ですが記載しておきます。
参考リンク（墓場ネット）
デザインの崩れと当サイトのデザインについて
当サイトはワードプレスで制作し、そしてthe thorという有料テーマを使用しています。そのうえで2カラムで作成していたのですが、前に一度、デザインが崩れているのを発見しました。この時は、カラム幅の設定などを追加CSSで設定していたこともあり、それが原因なのかとも考えましたが、特に考えることなくデザインの崩れない1カラムに設定し直して、そのまま最近まで使用していました。
さて、画像がメインコンテンツとなるようなページですと、1カラムの方が良いような気がしていましたが、モニターサイズによっては文字を追って左右に視線を動かすのが大変な時もあります。そういうのもあって、改めて2カラムに戻したですが、やはりデザインの崩れが出て来ました。正確にはデザインが崩れていたことを忘れていました…。
崩れの具体例として、左側に変なスペースが出来て、左のメインカラムが右にずれる結果、右側のサイドバー部分が縮小されてしまうのです。なんでだろうと色々考えていくうちに、プラグインかアドセンス側か分かりませんが、広告設定にあると分かりました。
参考リンク（AdSence ヘルプ）
広告設定の変更も
少し話が遡りますが、サイト作成当時からしばらくはHTMLでアドセンスコードを張り付けていました。個人的に好きだったのが、レクタンダルのサイズをちょっと変更して、それを左右に並べたもの。このコードを一つの記事に1～3セットくらい張り付けていました。
そしてthe thorに変更した頃あたりに、長い帯状の広告に憧れましたが、色々と設定できることが分からなかったので、自動設定が出来るプラグインで広告設定をしていました。合わせてアドセンス側も自動設定になるように（このあたり、更に分かっていませんが）して、それでとりあえず目標の広告体制になったので、しばらくはそれで進めた、という経緯があります。
自動設定にすると、かなりサイトがスタイリッシュというか、他サイトでも見慣れたようなものになり、なんかレベルアップしたような気にあるんですよね。加えて、今まで記事内にコードで一つ一つ作成していた広告が、何も考えずに色んな位置に出るのは楽でした。
プラグインの設定変更
画像転載元（pixabay）
まあ、本来なら始めにしっかり設定しろ、というそれだけの話でした。結論から言えば、ここで全く自分で設定をせずに、あくまで自動設定だけに任せていたので、変な隙間に広告が出て、それでデザインが崩れていた、というのが先の原因でした。
そこで今回、一旦プラグインを停止して、グーグルアドセンスの自動広告設定も外し、まずはアドセンス側でスクエアと横長タイプを新規作成しました。
次にプラグイン「Advanced Ads」にて広告を設定します。先に作成した広告コードを設定し設定します。記事内に、横長タイプを全部で4つ設定（2つめと4つめと7つめのH2タグの前と、後は記事の下）、及びサイドバーに3つ程です。ちょっと多めかなとも思いましたが、当サイトはそこそこ一つの記事の文字数も多いので、とりあえずはこれで進めてみようと思います。
こんな広告目的は嫌だ
スケッチブックが頭に浮かんでしまいますが、ネタとかではなく…。さて、まず筆頭に挙げられるのが、やはり細切れに分割されているものですね。人によって、もしくは内容によって違うと思いますが、私は4ページ目以上に分割されているとそっと閉じることが多いです。
あとは最近よく見るようになって来たのが、ページが一旦暗転して、そして広告が画面一杯に出るもの。これは一回一回バツ印を押していかなければならないので、これも面倒ですよね。
広告の数が多すぎるのも問題ですが、スクロールでさっと飛ばせるものだったり、変に固定されているものでなければ、ある程度は許容できます。もっともこれはPCの話で、スマホの場合は間違ってタップしてしまうこともありますので、その場合は面倒ですね。スマホの広告は全般的にタップミスが考えられますので、あんまりいい印象には繋がりませんね。
久しぶりにアドセンス広告の設定を見直してみた～まとめ～
広告収入自体は微々たるものではありますが、それでもモチベというか、励みになる部分はあります。ですが、広告の為にデザインを崩すのか、という悩みがこれまでありました。今回はそれを無事に解決することができ、久しぶりに満足できました。面倒がらずにしっかりと原因を突き止めていく姿勢は大事ですね。
以上、最後までお読みいただきありがとうございました。当記事が何らかの参考になりましたら幸いです。
※後日、さらに設定を変更しました。
- アドセンスの自動広告を復活
- Advanced Adsはそのまま、広告を増やしたり減らしたり位置を変えたり
- the thorの広告設定にて、アーカイブのPC三か所を全削除
以上でスマホ、PCの投稿ページは改善し、特に見ていておかしな崩れはなくなりました。
ただ、PCのトップページがたまに広告が左側に入り込みます。ですがこれはまたいつかの課題として、とりあえず投稿ページで、特に画像がメインとなる投稿で崩れなくなったのでこれで良しとします。