[Simplicityカスタマイズ]トップ記事一覧中のアドセンス表示をfloat解除で調整する
以前Simplicityのトップページ記事一覧にアドセンスを設置したのですが、PCで見たときに問題点があったのでそれを修正しました。
設置時の記事です。
この時「記事一覧にアドセンスを設置する」ことだけに執着しててCSSの調整など全く気にしていませんでした。まさに、木を見て森を見ず状態。。
結果どうなっていたかというと、以下の通りアドセンスは左に寄るしスポンサーラベルは上の記事エントリーのdivの影響を受けて中途半端にずれていました。本来はきちんと真ん中に置きたかったんですけどね^^
さすがに見た目が悪いので修正しました。これらの要因は私がCSSを気にしていなかったことに尽きます。
floatをclearにして回り込みを解除する
Simplicityの記事一覧中の個別記事表示は複数のdivから出来ています。
コンテンツボックスの左側にはマージンが大きくとってあってそこにサムネイルが表示されるようになってる。タイトルの長さによってエントリー全体のdiv表示が可変になっています。
一方でサムネイルは固定、サムネイルのサイズは150*150、マージンも設定されているので実際のボックスザイスはもうひと周り大きい。ここで記事タイトルとエントリーコンテンツの高さ合計が左のサムネイルのボックス高さと同じでないとボックスのデコボコ、段差が発生します。
下がそのイメージ。
何も設定しないとサムネイルボックスにfloat:left;が効いてあるので、その右側の空いた段差箇所に回り込んで表示されるんです。だから「スポンサーリンク」表示がサムネイルの右下に位置しちゃうんですね。
本来望む姿はこれ。
スポンサーリンク
clera:both;
ラベルが回り込まないようにfloatをクリアにしました。style.cssに以下を追記します。※cssは子テーマ利用を推奨します。
.ad-center{
clear:both;
}
ここで.ad-centerというのは親父が勝手に作ったclass名です。（意味は気にしないで下さい...）スポンサーラベルとアドセンスコードをひとまとめにdivにしてこのad-centerを指定しちゃっています。
clear:both;で左右floatの影響をdivが受けなくなりました。
結果どうなったかというと、
ちゃんとサムネイルdivの右余白を除けて真下に表示されましたね。
これでトップページの記事一覧中に綺麗にアドセンスが表示されまっせ～。Simplicityを使っている人、是非ご参考まで～。
おしまい^^