Cocoonでタイトルとメニューの間に広告を貼る方法

スポンサーリンク

 

新しく作成したブログのテーマを「Cocoon」にすることにしました。

それで広告を貼ろうと思ったのですが、「サイトのタイトル」と「メニュー部分」の間に広告が貼れない・・・ということで、私がやったことを書いておきます。

現状は、PC表示の時だけ下記のように【メニュー上の部分に広告が表示される】ようになっています。

以下手順です。

①ダッシュボードを開きテーマの編集から親テーマの「cocoon」にアクセスします。

②PC・スマホ、どちらから見ても同じように広告を表示させたい場合は、下記のように設定します。

書き込む場所は header-container.php (tmp/header-container.php)の、</header>の上の部分ですね。

ーーーー以下を追加するーーーーーーーーーー

<div class=”tuika”>
<center>
アドセンスのレスポンシブ広告コード
</center>
</div>

ーーーーーーーーーーーーーーーーーーーーー

今回class名は適当にtuikaにしました(あとで広告とメニューの間にCSSで空白部分を作るため)。これでOKです。

ちなみにスマホでTOP画面に広告を表示させたくない。PCでのみ表示させたい場合は下記のようにします。

ーーーー以下を追加するーーーーーーーーーー

<?php if(wp_is_mobile()): ?>

<?php else: ?>

<div class=”tuika”>
<center>
アドセンスのレスポンシブ広告コード
</center>

</div>
<?php endif; ?>

ーーーーーーーーーーーーーーーーーーーーー

最後に広告とメニューの間にCSSでスペースをとります。※スペースをとらないと合体するため規則に反すると思います

手順は、ダッシュボード>外観>カスタマイズ>追加CSSに下記を記入します(上記の通りclass名がtuikaの場合は上下に10px 横はautoですね)。

ーーーーーー以下を追加するーーーーーーー

.tuika{
margin:10px auto;
}

ーーーーーーーーーーーーーーーーーーーー

これでOK、以上です。