記事下の広告とシェアボタン周辺をスッキリさせるカスタマイズ！simplicity2対応

時給アップ研究室にご来室頂きありがとうございます。

新しくsimplicity2でブログを作ってみて気になる部分をカスタマイズしてみました。

ダブルレクタングル広告とVA Social Buzzとシェアボタンの周辺、
記事下の部分のレイアウトが気になりましたのでユニットにしてみました。

記事下のウィジェットは使用しないという想定です。
記事下ウィジェットを使用すると表示が崩れるカスタマイズですので
その点だけご注意ください。

simplicity2の部分はシェアボタンの部分になります。
simplicity2の記事にはなっていますが、他のテーマでも同じことができると思います。

ただし広告のコードはショートコードで表示させています。

記事内の一番下になるようにしていますので
広告表示にプラグインや記事下ウィジェットを使用するとレイアウトが崩れます。

wordpressのカスタマイズ備忘録として書き留めておく記事です。

Contents

1. VA Social Buzzの表示設定
- 1.1. VA Social BuzzのCSS
2. ダブルレクタングル広告設定
- 2.1. アドセンスコードへの追記
- 2.2. CSSの表記
3. 最終的なレイアウト

VA Social Buzzの表示設定

記事下のブロックはいろいろな要素を入れたくなりますので
場合によってはバラバラの感じになりがちです。

VA Social Buzzや記事下ウィジェット、
「AdSense Integration WP QUADS」での広告挿入など、
広告やシェボタンがあっち行ったりこっち行ったりと…

なんとか記事下のエリアをスッキリしたいと思ったりしませんか？

こんな感じに！

という画像は一番下にあります。

先に見たかったですね？

VA Social BuzzのCSS

VA Social Buzzの周辺をスッキリするためにはカスタマイズが必要です。

まずFacebookとtwitterボタンは「simplicity2」のものを使用します。
VA Social Buzzと既存のシェボタンの空間の空きなどを調節します。

/************************************
VA Social Buzz表示設定
************************************/
/* シェア・フォローエリアの非表示 */
.va-social-buzz .vasb_share {
display:none;
}
/* VA Social Buzzとシェアボタンの間隔 */
.sns-group {
margin-top:-60px;
margin-bottom: auto;
margin-left: auto;
}

VA Social Buzzとシェアボタンの間隔を指定します。

現状は記事下ウィジェットを挿入しないので極端に隙間を詰めています。

ダブルレクタングル広告設定

ウィジェットを使わずダブルレクタングルで表示するためにカスタマイズします。
ウィジェットを利用するとレイアウトが変わります。

PCで見るとダブルレクタングルが表示され、
モバイルで見るとシングルで表示されるという分岐にします。

モバイルで見た時に縦にふたつ並んで表示されるのを防いでいるわけですね。

<div id="my-footer">
<p style="text-align: center; font-size: 75%;">スポンサー</p>
<table class="table-css">
<tr>
<td class="td-css">１個目のアドセンスコード</td>
<td class="td-css">２個目のアドセンスコード</td>
</tr>
</table>
モバイル表示のアドセンスコード
</div>
<script>
var myFooter=document.getElementById("my-footer");
var temp=myFooter.cloneNode(true);
myFooter.parentNode.removeChild(myFooter);
document.getElementsByClassName("entry-content")[0].appendChild(temp);
</script>

アドセンスコードへの追記

取得したアドセンスのコードを見ると「ins class」の表記があります。
その部分に下記のようにそれぞれ追記します。

アドセンスの広告ユニットの種類は色々ありますので
どれが適切かはご自身で判断してください。

少なくとも指定幅より広いものは指定しないと思いますので…

スマホ部分の修正
ins class="adsbygoogle"
↓

ins class="adsbygoogle widedisplay"

PC部分の修正
ins class="adsbygoogle "
↓

ins class="adsbygoogle mobile"

CSSの表記

スタイルシートに追記します。

/************************************
ダブルレクタングル アドセンスのスマホ対応
************************************/
/* PCかモバイルか？ */
@media screen and (max-width: 680px) {
.mobile{
display: none !important;
}
}@media screen and (min-width: 680px) {
.widedisplay{
display: none !important;
}
}
/* テーブル線の非表示とセンタリング */
.table-css, .td-css {
border-style:none !important;
margin:0 auto;
}

↓参考にさせていただいた記事
[【Adsense】記事下広告をPCはダブルレクタングル、スマホはレスポンシブにする方法]