アドセンスの自動広告のズレを微調整するマークアップ 結城永人 - 2023年2月8日 (水) アドセンスの自動広告は最初の頃と比べると出方が良くなってサイトのデザインを崩すことが少なくなって来た。それでも偶に突き抜けたりして修正てきるにしても使い辛い面がないわけではない。しかしながら最も多いのはコンテンツとの隙間がおかしくなる。近過ぎたり、遠過ぎたりする。気にするかしないかの微妙なズレではあるだけれども個人的に止めて欲しいと思うし、そのせいで、アドセンスの自動広告を最初の頃は使わないでいた。 目次自動広告の微妙なズレが悩ましいCSSで微調整を行うことができる自動広告の微調整に役立つ二つのCSS要素自動広告の微調整のためのCSSの指定先 自動広告の微妙なズレが悩ましい 今は相当に改善されているけれどもブログで又出たのが一つ見付かった。 ページャーに寄ってこれでは誤クリックを誘発し兼ねないほどの不味い位置にある。 自動広告にとってデザインのバランスが取り難い場所があるのか、他は大丈夫なのにズレを起こしてしまう。 ブログの表示をカスタマイズしてBloggerの画像と動画の遅延読み込みのために記事全体が僅かに止まって出るのが普通よりも遅れているせいもあるのかも知れない。 アドセンスの管理画面のプレビューで確認できない場所なにのに出ている自動広告で挙動もおかしい。プレビューで確認できないから簡単に外して表示しないように止めることもできなくて困ってしまう。 昔は何個もズレて自動広告自体を使いたくないと思ったけれども一つくらいならば何とか微調整して使って行きたいとも思うんだ。 CSSで微調整を行うことができる サイトのデザインを付けるCSSでやってみたら上手く行った。ページャーに寄ったのを引き離して十分な隙間を取れたし、配置の全体的なパランスも良くなった。これならば自動広告を使い付けることができると笑う。 自動広告の微調整に役立つ二つのCSS要素 僕が使い易いと思ったCSSの要素は二つで、どちらも自動広告に指定するだけで、位置取りの微調整を行うことができるのが簡単だし、規約違反の恐れのある自動広告のソースコードの変更も伴わない。 marginコンテンツに外側の余白を付ける。周りのコンテンツは連動する。translateコンテンツを他の場所へ移動する。周りのコンテンツは連動しない。 自動広告を動かして近過ぎたり、遠過ぎたりするのを微調整して改善することができる。 marginによるCSSのマークアップについて marginはコンテンツの外側の余白を増やして他のコンテンツから引き離したり、減らして近付けたりすることができる。 margin:値 引き離すにしても近付けるにしても動かしたい方の値を指定する。 marginはそれ自体では上下左右の値を一括で指定するもので、値の数によって方向を決めることができる。 一つの値上下左右二つの値上下 左右三つの値上 左右 下四つの値上 右 下 左 複数の値は半角スペース（ ）で区切って記載する。数値は0以外ならば「px」や「em」などの単位を必ず付ける。 marginは方向を別々に指定することもできる。 margin-top上の外側の余白margin-right右の外側の余白margin-bottom下之外側の余白margin-left左の外側の余白 外側の余白を一つの方向で指定するから値も一つしか記載しない。 自動広告の微調整ならばおよそ一つの方向で指定して済むと思うから個別のものが適しているだろう。 参考サイトmargin - CSS translateによるCSSのマークアップについて translateはコンテンツを他の場所へ移動して、そのまま、他のコンテンツから引き離したり、近付けたりすることができる。 translate:値 座標系で横／X軸は左から右へ、縦／Y軸は上から下、奥行き／Z軸は奥から手前へ数を増やすように動かしたい方の値を指定する。 translateはそれ自体で縦横奥行きの値を一括で指定するもので、値の数によって方向を決めることができる。 一つの値縦横二つの値 横 縦三つの値横 縦 奥行き 複数の値は半角スペース（ ）で区切って記載する。数値は0以外ならば「px」や「em」などの単位を必ず付ける。 縦と奥行きはそれだけで指定できなくて縦は横と、奥行きは横と縦と共に指定しなくてはならないので、一つだけにしたいときはその他の値を「0」にして記載する。 translateはCSSのtransform:translate()と同じで、この場合は縦横奥行きを個別に指定することもできる。 横の移動transform:translateX(値)縦の移動transform:translateY(値)奥行きの移動transform:translateZ(値) コンテンツの移動を一つの方向で指定するから値も一つしか記載しない。 自動広告の微調整ならばおよそ一つの方向で指定して済むと思うから個別のものが適しているだろう。 参考サイトtranslate - CSS marginとtranslateの使い分けについて marginとtranslateを微調整で使うときの最も大きな違いは周りのコンテンツが連動するかどうかで、marginは連動するからサイトの全体のバランスは変わらず、translateは連動しないから全体のバランスが変わる。 自動広告を動かす場合は反対側との位置取りも考慮しなくてはならない。 一つのコンテンツとのバランスを取っても他のコンテンツとのバランスが崩れたら又直さなくてはならなくなる。 ズレが小さい場合は周りのコンテンツとのバランスが変わらないmargin、ズレが大きい場合はその中でバランスを取り直せるtranslateを使うのが良いと思う。 自動広告の微調整のためのCSSの指定先 アドセンスの自動広告をCSSで動かす場合に重要なのはCSSの要素だけではく、指定先にも注意しなくてはならない。 アドセンスの自動広告のHTMLタグ <div class="google-auto-placed">自動広告</div> 現時点で個々の自動広告のソースコードは「google-auto-placed」のclassが付いたdivタグが親要素になっている。 CSSのmarginやtranslateをそれに対して指定すれば自動広告を動かすことができるんだ。 div.google-auto-placed {微調整用のCSS} 自動広告は全て同じ親要素が付いているから動かしたいものが一つだけか全て動かすならばCSSの指定先は「div.google-auto-placed」か他のHTML要素に同じclassを使わなければ「.google-auto-placed」だけでも大丈夫なんた。 複数の自動広告の一部のためのセレクター 自動広告の微調整で厄介なのは、複数、出て来て、一部たけズレている場合にどうするか。 親要素は全て同じだからもっと絞り込んだセレクターが必要になる。 アドセンスの規約規約に注意して自動広告のソースコードを変えずにやるには個々の自動広告が出現する順番や周りのコンテンツとの関係からセレクターを考えなくてはなならない。 :nth-child()兄弟要素を順番で指定できる疑似クラス。+隣接兄弟結合子、二つのセレクターを繋ぐ。 CSSの詳細度を高めることによって同じ親要素を持つ自動広告の一部に絞り込んで微調整を行うことができる。 :nth-child()によるCSSの指定について ズレる自動広告の順番が一定ならば絞り込んで微調整できる。 div.google-auto-placed:nth-child(値) {微調整用のCSS} 値によって様々な順番を入力できる。 odd奇数番目（1, 3, 5…）even偶数番目（2, 4, 6…）A*n+B計算式Aは整数の刻み値、Bは整数の加算値、nは0から続く全ての正の整数。AかBを0とすればその部分と「+」は省略できる。Aが1ならばnの倍数はnと等しいからAは省略できる。nはそのままでも使えて一つずつの順番を示す。nを「-n」とするとnの順番まで（一つずつ引いて）示す。 キーワードの「odd」と「even」はそのままで記載する。 計算式はn以外はそのままでは使えない。Aは1以上の整数で、nの倍数を作って次の要素まで飛べるようになり、Bは1以上の整数で、前の数字（A*n）に足して次の要素まで間隔を取れるようになる。 三番目の自動広告を指定するならば： div.google-auto-placed:nth-child(3) {微調整用のCSS} 一つの数値ならば兄弟要素の順番を示す。計算式としては「0*n+3」という内容になる。nがどれだけ進んでも「0」がかかっていてBの「3」しか残らない。 二番と四番目の自動広告を指定するならば： div.google-auto-placed:nth-child(2n) {微調整用のCSS} Aを「2」、Bを「0」で省略すれば「2n」となり、「2」の倍数（2, 4, 6…）の兄弟要素をnが一つずつ示す。 三番目以降の自動広告を指定するならば： div.google-auto-placed:nth-child(n+3) {微調整用のCSS} Aを「1」で省略し、Bを「3」とするとnの最初の「0」から一つずつ加算されて最小の三番目以降の全て（3, 4, 5…）の要素を示す。 その他にも似た使い方の疑似クラスが幾つかある。 :first-child兄弟要素の最初のもの:last-child兄弟要素の最後のもの:nth-of-type(値)特定の兄弟要素の順番のもの:nth-last-of-type(値)特定の兄弟要素の後ろからの順番のもの:first-of-type特定の兄弟要素の最初のもの:last-of-type特定の兄弟要素の最後のもの ※値が必要なものは:nth-child()と共通の計算式を使う。 微調整したい自動広告の順番が分かれば:nth-child()や似た疑似クラスが役立つ。ベージ毎に出方が変わったり、必ずしも一定ではないかも知れないけど、しかし最初と最後が周りの状況が変わって特にズレ易い場合がある。 僕が悩まされたのはブログの記事の本文の最後の一つで、ページャーのところで、余白が取れなくなっていたので、他の場所とはデザインが違っていたせいだ。 参考サイト:nth-child() - CSS +によるCSSの指定について ズレる自動広告を直前の兄弟要素との関係で絞り込める。 直前の兄弟要素のセレクター+div.google-auto-placed {微調整用のCSS} 使い方の注意点としては親要素の直下の子要素を指定する「>」の子結合子と間違え易い。「+」は一つの要素を直前の兄弟要素との関係で捉えるものだから使うときにその親要素を、直接、考慮する必要はない。ある親要素の中に含まれる二つの子要素が兄弟要素として連続する場合にセレクターとして使うことができる。 自動広告がズレるのは周りの状況が影響しているから直前の要素が同じだと、毎回、やられるみたいなこともあり得る。 例えば見出しのh2タグの後、画像のimgタグの後など、サイトによってマークアップは様々だけど、とにかく特定のタグによって自動広告がズレるということは昔ならば当たり前のようにあったと思う。 直前の兄弟要素が影響していると分かれば「+」が最も使い易い。 僕が使ったのも「+」で、ズレる自動広告の直前のページャーのタグがその他になかったから簡単に指定できた。 直前の兄弟要素と同じタグの要素が他にも、沢山、あると被るからさらに特定するには:nth-child()の方法と組み合わせると良いと思う。 直前の兄弟要素がpで三番目の自動広告を指定するならば： p+div.google-auto-placed:nth-child(3) {微調整用のCSS} 普通に「+」を使った最後に:nth-child()を付け加えて順番を指定する。 同じ要素の後に出て来る自動広告が幾つもあって一部のものだけがズレているときでも順番が分かりさえすれば微調整することができる。 参考サイト隣接兄弟結合子 - CSS コメント 新しい投稿 前の投稿
結城永人
結城永人
コメント