今回お客様の反応型の広告を1ヶ月に、実現された多くの情報とヒントは、蜂蜜の運転 (GKKmon) は、この不思議な部分の解決法を通知する。
まず一番最初に必要な情報は反応型サイトに関連する情報でした。救済せずに1つの広告を画面に表示される水平方向のサイズいっぱいにきれいに実装したいと思った。この回の失敗を重ねて完成したコードは、これ
コード Code
<style></style> .custom_ad_1{height:280px;width:100%} @media(max-width:768px){.custom_ad_1{height:250px;width:100%}} <script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- 반응형 광고 가로 꽉 차게 커스텀 --> <ins class="adsbygoogle custom_ad_1" class="adsbygoogle custom_ad_1"></ins class="adsbygoogle custom_ad_1"> style="display:inline-block" data-ad-client="ca-pub-xxxxxxxxxxxxxxx" data-ad-slot="xxxxxxxxxxx"> <script></script> (adsbygoogle = window.adsbygoogle ||[]).push({});
赤部分は自分の広告コードを
赤い線を打った部分には、サイト > 広告 > 新しい広告ユニット > では、広告のサイズの反応型を選択した後に生成されたコードの data-ad-client = ca-pub-数字と data-ad-slot = 「図」の数値を代入するとされる。
<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 반응형 광고 -->
<ins class="adsbygoogle" class="adsbygoogle"></ins class="adsbygoogle">
style="display:block"
Data-ad-client = ca-pub-この部分
Data-ad-slot = この部分
data-ad-format="auto"
data-full-width-responsive="true">
<script></script>
(adsbygoogle = window.adsbygoogle ||[]).push({});
青色の円は、任意の Class 名
青色の部分には本人が希望する任意の class 名となり、互いのようにする。場合同じように広告を追加するには、以前に使用した class 名は異ならなければならない。この2つだけ変更してそのまま貼り付けると、すぐに使用可能な最大サイズを水平方向の反応型のサイトの広告が出力される。本文上部に広告がデスクトップでは、水平方向の範囲が800px、800px の広告が出て、携帯電話から300px、300px の広告が出てくることである。
画面ごとに高さを設定する
高さまた世話をする、最適化されたサイズに戻りたくても、残念ながら、現在の実装が不可能である。ので高さは固定サイズを使用しなければならない。上記のコードのままだとデスクトップに height: 280px か280px の高さ、800x280 の広告が出て、768未満の携帯電話の画面 @ media (max-width: 768px) では、height: 250px だ 300 x 250 の広告が出ている。
つまり .custom_ad_1 {height: 280px; width: 100%} の部分にテキスト広告のサイズ、PC、デスクトップの表示サイズ、@media (max-width: 768px) {.custom_ad_1 {height: 250px; width: 100%}} この部分が768px 以下の携帯電話で表示サイズを設定することである。
モバイルに規定する幅や、本人が希望するようにいくつかの水平方向のサイズで異なる設定を適用するカスタムすることもある。@Media (max-width: 768px) は768px で適用するという意味であり、@media (min-width: 768px) は768px 以上で適用するという意味である。次のように連続して使用することもある。
<style></style>
.custom_ad_1{height:280px;width:100%}
@media(max-width:1200px){.custom_ad_1{height:260px;width:100%}}
@media(max-width:768px){.custom_ad_1{height:250px;width:100%}}
上記のように設定すると、768px 以下の携帯電話のラインの高さが250px、768px ~ 1200px のサイズでライン260px の高さ、1200px 以上でライン280px の高さで表現される。
コード門外漢のユーザーでも理解できるように詳しくリリースについて説明したが、余りに困難ではなく、ステップバイステップで私のようにカスタムするとされる。特定サイズで広告を非表示にしたい場合は、上記のように設定したり、幅と高さをクリアし、display: none を入力するとされる
.custom_ad_1{display:none}
上記を変更する方法は反応型の広告コードを変更するサイトの公式ヘルプにも推薦している方法だから、変更するサイトの規約やポリシーに抵触しないか心配する必要はありません。
追加機能
そして追加機能の中で data-full-width-responsive = true を使用すると、携帯端末、携帯電話の画面では、親要素の幅を無視し、水平方向のサイズで出てくる設定可能なために、以上にこの機能を使用すると、上記で設定した高さを食べてなかったので、メモしておきたい。Data-full-width-responsive = false は、逆に、全体の幅を無視しないように設定する。
タグのパラメーターを使用する方法のサイトの公式ヘルプには、親要素を無視し、全体の幅を使用することが潜在的な収益面で有利であると言っている。突然フレームを実現してしまうので、目の間か、当然の結果ですが、この広告に分類されて表示される場合があり、美観を損なう場合がある。読みやすさを重視し、美観を害を与える不要な場合は false を、傷や読みやすさよりもクリック率と収益をする場合は true を使用することですが、個人的には、コンテンツの内部は、false が自然で、一番上や一番下のようなコンテンツの先頭と末尾では true が、より自然であることを考える。
では、最も効率的な高さは何 px か。
にふれると、設定は私のサイトとの調整はほぼ終了するわけである。最後の高さは何 px に設定することがマッチを効率的にすることですが、実験の結果、広告サイズに水平方向のバナー ' の項目の高さを設定するとディスプレイ広告の比率が高くなり、使用可能な広告がない場合は漸減する。
サイトを正常に作動し、테스트해본のユーザーであれば知っている明白な事実が文字の蜂蜜のヒントは、サイトで公式に言われる事実とは別の方法で、ほとんどの状況では、テキストと広告が表示されます ' より、' ディスプレイ広告 ' のクリック率、広告単価、収益などのすべての面で優れているのである。
すべての広告主が適切なクオリティの画像を提供しないために、テキストを含んだ広告を表示する時に多くの広告主たちが競争を与えられるのためにより高い単価が価格であることの公式の記入項目のために、実際に試してみると、まったくではない。もほとんどのコンテンツがテキストから成っている、テキスト広告に特化しているサイトでは、' ディスプレイ広告 ' の出現により収入が高かった。
ので無条件で大きい高さを設定することよりも、サイトに既定で設定されている水平方向のバナーの高さである250px、100px、90px、60px、50px に設定することがさらに多くのディスプレイ広告を配信し、収益の増加につながることができる。
つ蜂蜜運転 (GKKmon) は250px または280px に設定した時に큼지막한の広告の画像クオリティが良く、テキストに出てくる、昔のように安価なティナは広告ではなく、一見すると、ディスプレイ広告など、美観的に悪くない人が現れたので250px の高さを選択した。ユーザーの方も自分の好み、サイトやブログの性質、利益率を考慮してサイズを調節して、自分のサイトに最適なサイズを見つける願っています。