親父の選択

自分勝手に書きながら価値を提供したい親父のブログです

[Simplicityカスタマイズ]トップ記事一覧中のアドセンス表示をfloat解除で調整する

   

以前Simplicityのトップページ記事一覧にアドセンスを設置したのですが、PCで見たときに問題点があったのでそれを修正しました。

設置時の記事です。

http://oyaji-choice.com/2015/02/4207/

この時「記事一覧にアドセンスを設置する」ことだけに執着しててCSSの調整など全く気にしていませんでした。まさに、木を見て森を見ず状態。。

結果どうなっていたかというと、以下の通りアドセンスは左に寄るしスポンサーラベルは上の記事エントリーのdivの影響を受けて中途半端にずれていました。本来はきちんと真ん中に置きたかったんですけどね^^

simplicity_list_adsense1

さすがに見た目が悪いので修正しました。これらの要因は私がCSSを気にしていなかったことに尽きます。

floatをclearにして回り込みを解除する

Simplicityの記事一覧中の個別記事表示は複数のdivから出来ています。

コンテンツボックスの左側にはマージンが大きくとってあってそこにサムネイルが表示されるようになってる。タイトルの長さによってエントリー全体のdiv表示が可変になっています。

一方でサムネイルは固定、サムネイルのサイズは150*150、マージンも設定されているので実際のボックスザイスはもうひと周り大きい。ここで記事タイトルとエントリーコンテンツの高さ合計が左のサムネイルのボックス高さと同じでないとボックスのデコボコ、段差が発生します。

下がそのイメージ。

list_adsense1

何も設定しないとサムネイルボックスにfloat:left;が効いてあるので、その右側の空いた段差箇所に回り込んで表示されるんです。だから「スポンサーリンク」表示がサムネイルの右下に位置しちゃうんですね。

本来望む姿はこれ。

list_adsense2

スポンサーリンク

clera:both;

ラベルが回り込まないようにfloatをクリアにしました。style.cssに以下を追記します。※cssは子テーマ利用を推奨します。

.ad-center{
  clear:both;
}

ここで.ad-centerというのは親父が勝手に作ったclass名です。(意味は気にしないで下さい...)スポンサーラベルとアドセンスコードをひとまとめにdivにしてこのad-centerを指定しちゃっています。

clear:both;で左右floatの影響をdivが受けなくなりました。

結果どうなったかというと、

simplicity_list_adsense2

ちゃんとサムネイルdivの右余白を除けて真下に表示されましたね。

これでトップページの記事一覧中に綺麗にアドセンスが表示されまっせ~。Simplicityを使っている人、是非ご参考まで~。

おしまい^^

 - Google Adsense, Wordpress, 収益化