【Simplicity2】トップページのアドセンス広告の位置を直す方法

スポンサーリンク

 

 

WordPressの人気無料テーマ「Simplicity2」のカスタマイズ

トップページのアドセンス広告の位置を直す方法

です。

 

どういうことかといいますと、

ブログのサイドバーウィジェットの最上部にアドセンス広告を貼っている人は多いと思いますが、Simplicity2でそれをやるとトップページのアドセンス広告が以下のようになってしまう場合があります。

 

 

なんか、赤枠のところに絶妙に空白ができてしまっていますよね…。

今回は、この空白を無理やり直す方法をご紹介します。

スポンサーリンク

完成イメージ

 

 

本当は、こうであってほしい。

記事一覧の上部と位置を合わせる。

 

トップページのアドセンス広告の位置を直す方法

 

手順

 

では、実際に直していきましょう。

 

まずは、テーマの更新があった時に上書きされないように子テーマを利用すべく、以下のファイルを子テーマフォルダにコピーしてください。

  • header.php

 

今回は、この「header.php」のみを修正していきます。

 

コピーができたら、以下のコードを「header.php」の「<style>タグ」の中にコピペしてください。

 

広告の高さが合わない場合は、「top: -60px;」の個所を修正して調整してください。

 

あとは、保存すれば完了です。

確認の際は、スーパーリロードなどでキャッシュの削除を忘れないようにしてください。

 

コードの説明

 

軽く、先ほどのコードを説明しておきます。

 

<?php if(is_home() || is_archive()): ?>

追加したコードを適用するページを制限しています。

このコードでは、「トップページ」と「アーカイブ(カテゴリのトップみたいなの)」の二つのみに適用しています。

 

理由は、他の「投稿」・「固定ページ」といったページはすでにアドセンス広告の位置がいい感じのところに表示されていますので、今回のコードの適用範囲から除外します。

 

@media screen and (min-width: 768px)

このコードは「メディアクエリ」といって、ページを表示する媒体(PC・スマホ・タブレット等)によってCSSのコードを適用するか制御することができます。

今回の場合は、サイドバーウィジェットなので「PCとタブレットの横向き」のみに設定しておきます。

 

#sidebar { overflow: hidden; }
はみ出した部分を非表示にしています。
#sidebar-widget { position: relative; top: -60px; }

表示する位置を、最初の位置から上に60px移動させています。

 

まとめ

 

トップページのアドセンス広告の位置を直す方法

でした。

 

気にしすぎかもしれませんが、できれば合わせたい。

参考にしてみてください。

コメント