賢威8のサイトの横幅を変更してアドセンス広告をスッキリ収める方法

Googleアドセンスやアフィリエイトの広告で、「300×250」と「728×90」はよく使われているサイズですよね。

私も多用しているのですが、賢威8の初期状態では、横幅300pxの広告がサイドバーからはみ出たり、横幅728pxの広告がメインコンテンツの左側に片寄ったりと、とても気持ち悪い。。。

そこで、「300×250」と「728×90」の広告がスッキリ収まるように、賢威8の横幅をカスタマイズしました。

賢威8のサイドバーやサイト全体の横幅を変更したい方は、ぜひ参考にしてください!

>>>2万人を超えるユーザーが選んだSEOテンプレート【賢威】


賢威8の初期状態ではアドセンス広告がすっきり収まらない

賢威8の初期状態では、サイドバーの横幅が300px、メインコンテンツが900px、サイト全体が1200pxと設定されています。

余白を除くと、実際の横幅はサイドバーが280px、メインコンテンツが860px、サイト全体が1180px。

そのため、「300×250」の広告はサイドバーからはみ出てしまい、「728×90」の広告はメインコンテンツ内で左寄りに表示されてしまいます。

賢威8の初期状態ではアドセンス広告がすっきり収まらない


 

そこで、当サイトは「300×250」と「728×90」の広告が真ん中に表示されるように、サイドバーの横幅を360px、サイト全体の横幅を1188pxにカスタマイズしています。

すると、このように「300×250」と「728×90」の広告が真ん中に表示されるようになります。

「300×250」と「728×90」の広告が真ん中に表示されるように、賢威8の横幅をカスタマイズ


 

これから賢威8の横幅をカスタマイズする手順を解説しますので、ぜひ参考にしてください!


賢威8のカスタマイズを始める前の準備

賢威8の子テーマをインストールする

まず、賢威のカスタマイズを始める前に、必ず「子テーマ」をインストールしておいてください。

親テーマを直接カスタマイズしてしまうと、テーマのバージョンアップをした時に、せっかくカスタマイズした内容が消えてしまいます。

子テーマなら、テーマをバージョンアップしても、カスタマイズした内容を保持できるので、賢威8のカスタマイズは必ず子テーマを使用しましょう。

【関連記事】賢威8の子テーマをインストールする方法

スマホでの表示が崩れないようにする

子テーマをインストールできたら、「base.css」に以下のコードを貼り付けてください。

これは、横幅768px以上のディスプレイで表示した時にだけ、カスタマイズ内容を適用させるためのコードです。

賢威8は、ディスプレイのサイズに応じてサイトの見た目が変わる、レスポンシブデザインを採用しています。

今回のカスタマイズはPCでの表示を変更したいので、スマホでの表示が崩れないようにする必要があります。

そのため、必ず「@media (min-width : 768px){ }」の中に、カスタマイズしたコードを入れるようにしましょう。

スマホでの表示が崩れないよう賢威8をカスタマイズする


賢威8のサイドバーの横幅を変更する方法

まずは賢威8のサイドバーの横幅を、300pxから360pxに変更します。

賢威8のサイドバーの横幅を変更する手順

①右サイドバーの場合は5961~5972行目、左サイドバー(2カラムリバース)の場合は5975~5986行目をコピーして、子テーマの「base.css」に貼り付けます。

賢威8のサイドバーの横幅を変更する手順1


 

②子テーマでwidthを300pxから360pxに変更します。

賢威8のサイドバーの横幅を変更する手順2


 

③すると、「300×250」の広告がサイドバー内の真ん中に表示されるようになります。

賢威8のサイドバーの横幅を変更する手順3

サイドバーのカラム落ちを修正する

しかし、これだけではサイドバーがメインコンテンツの下にカラム落ちしてしまいます。

その理由は、メインコンテンツ右側の余白が300pxと設定されており、横幅360pxのサイドバーが収まらないからです。

そのため、メインコンテンツ右側の余白を、子テーマで360pxに変更します。

賢威8のサイドバーの横幅を変更する手順4


 

すると、サイドバーがメインコンテンツの横に表示されるようになります。

賢威8のサイドバーの横幅を変更する手順5


賢威8のメインコンテンツの横幅を変更する方法

メインコンテンツの横幅は、サイト全体の横幅からサイドバーの横幅を引いた長さとなっております。

そのため、サイト全体の横幅を変更することで、メインコンテンツの横幅も変更されます。

「728×90」の広告がメインコンテンツの真ん中に表示されるようにするには、メインコンテンツの横幅が740pxから728pxになるように、サイト全体の横幅を1200pxから1188pxに変更します。

賢威8のメインコンテンツの横幅を変更する方法

賢威8のサイト全体の横幅を変更する手順

①右サイドバーの場合は5909~5923行目、左サイドバーの場合は5925~5939行目をコピーして、子テーマの「base.css」に貼り付けます。

賢威8のサイト全体の横幅を変更する手順1


 

②max-widthを1188pxに変更します。

賢威8のサイト全体の横幅を変更する手順2


 

③以上で、「728×90」の広告がメインコンテンツの真ん中に収まるようになりました。

賢威8のメインコンテンツの横幅を変更する方法3


賢威8のコンテンツ前後のウィジェットの余白を変更する方法

賢威8では、コンテンツの前と後にウィジェットでフリースペースを設置することができます。

ここに「728×90」のアドセンス広告を掲載したいのですが、現時点では左右の余白(padding)が20pxであるため、左寄りに表示されてしまいます。

そのため、コンテンツ前後のウィジェットの余白を40pxに変更して、「728×90」の広告を真ん中に表示させます。

賢威8のコンテンツ前後のウィジェットの余白を変更する手順

①5823~5825行目をコピーして、子テーマの「base.css」に貼り付けます。

賢威8のコンテンツ前後のウィジェットの余白を変更する手順1


 

②子テーマでpaddingを「20px 40px」に変更します。

賢威8のコンテンツ前後のウィジェットの余白を変更する手順2


 

③以上で、コンテンツ前後のウィジェット内でも、「728×90」のアドセンス広告が真ん中に表示されるようになりました。

賢威8のコンテンツ前後のウィジェットの余白を変更する手順3

まとめ

賢威8の横幅を当サイトと同じように変更する場合は、以下のコードを子テーマの「base.css」にコピペすればOKです。

サイドバー、サイト全体の横幅、余白を調整して、賢威8をあなた好みのレイアウトに整えましょう!

>>>2万人を超えるユーザーが選んだSEOテンプレート【賢威】