STINGER5 WordPress

Stinger5とiPad Air横向きダブルレクタングル表示


スポンサーリンク

Adsense336

縦並びになってしまうGoogle Adsense

Google Adsenseの表示が縦並びになってしまうサイトは、よく見る解説ブログのやり方の#wrapperのmax-widthの値を変更しただけではないでしょうか。それだけでは問題はいつまでも解決しません。きちんと横並びにするにはどうすればいいのかを見てまいりましょう。

iPad Air 横向き1024pxの落とし穴

実はこれ、Stinger5のタブレットのサイズを超えて、PCの大きさになってしまうんです。Google Adsenseのダブルレクタングルは記事下表示で336pxの大きさが主流。しかしmainのpaddingが左右で多目に取られていたのでは、#wrapperをいくら大きくしても変わらずに縦並びになる訳です。筆者はここでmax-widthに加え、あまり手を加えられていないmainも変更する事にしました。

サイトの横幅と文字の幅を広げる

#wrapperの値ですが、iPad Airの横向きだと1024pxが上限なので、それより多くはできません。それでは、例を交えながら実際のコードを見てみましょう。

#wrapper {max-width: 1004px;}の場合

左右に余白が10pxずつとってあるので、1004pxとします。なので先程求めた値から右カラムの300pxを引いた704pxでレイアウトするようになります。アドセンスの横幅は336pxなので336*2pxの幅など諸々差し引くと、iPad Airでは残る12pxが余白に使えるスペースとなります。 


/* @charset "UTF-8" ;の要素に記述 */
main {
	padding: 20px 4px;
}

拍子抜けするほど簡単でしたね。恥ずかしながら筆者はここに辿り着くまでに、ドメイン取得から2ヶ月もかかりました。あとはアドセンス左右のそれぞれのmarginを8px以下に設定すれば、きちんと横並びの表示になります。

問題はレイアウト

ご覧のようにダブルレクタングル重視をするあまり、レイアウトが二の次となっております。記事の余白がこれでは、もはやborder並みの細さですね。美しいレイアウトを好むサイトさんの望むところではないとは思いますが、背に腹は変えられないということで。いっそ余白を全て削ぎ落とすような、Stingerらしからぬ作りにしていかなければならないなと感じます。

別の選択肢としては、300pxのAdsenseでダブルレクタングルか、CSSでPCの条件分岐を1025px以上に変更してみる。またはCLASSを使ってmainの中にもう一つコンテナを作成して<DIV>タグで囲うというのもアリですね。このブログではiPad Air表示に重きを置いているので、しばらくはこのレイアウトでやっていきます。

記事中アドセンスでCSSのセレクタが機能しない時は

親テーマへの修正すらも弾かれてしまい、記事中のスマートフォン用広告が中央寄せにならない時があります。レイアウトはCSSのみで行うのが好ましいところではありますが、どうしても出来ない場合は<DIV>タグ内に直接STYLEを記述します。念の為にこの記述に関する変更した部分のソースを掲載します。

  • CSS
    • 
/* @charset "UTF-8" ; 要素の中に以下を記述*/

/* サイト横幅 */
#wrapper {
	max-width: 1004px;
	padding: 0px 10px;
	margin: 0 auto;
}

/* 記事の横幅 */
main {
	padding: 0px 4px;
}

/* アドセンス記事中 */
.ad_center {
	margin: 20 auto;
	text-align: center;
}

/* アドセンス記事下 */
#adsense-bottom {
	padding: 20px 0px;
}
#adsense-left {
	float:left;
	margin-right:4px;
	margin-top:8px;
}
#adsense-right {
	margin-top:8px;
}
  • functions.php

    • 記事中アドセンスを表示させたい場所に、[adsense]と記述します。バックアップ必須です。

    
function showads() {
    return '

    スポンサーリンク
    

    
//この行の全てとアドセンスのソースコードを置き換える

    ';
}
add_shortcode('adsense', 'showads');
  • single.php

    • バックアップは必ずとりましょう。
  • ウィジェット336pxアドセンス
    •

    蛇足ではありますが、個別にスポンサーリンク表記をするのであれば補足します。floatをCSSで使っているのでdisplay:inline-block;を使っていますが、この値が使われた<P>タグは下手に終了してしまうと、狙った表示ができなくなってしまいます。</P>は省略可能なので終了タグは書かないで下さい。

参考URI

Adsense336

-STINGER5, WordPress

© 2024 タブカン Powered by AFFINGER5