保守

個別記事の中に広告を

投稿日:2014年9月18日 更新日:

adovaまにはこのサイトの作業をネタを書きます。このサイトはWordPressで稼動してますが、テーマはHuemanを使っています。STINGER3でも良いんですが、いまのところHuemanです。ユーザー数が少ないのでたまに同テーマの方から問い合わせが来たりします。
今日の記事はGoogle Adsenseに関してですが、当サイトは3カラムで左や右カラムにGoogle Adsenseを表示させる場合はウィジェットより箱を作りソースを貼り付けて箱を表示したいところへドラックでいけるのですが、本日の作業は個別記事の下部にGoogle Adsenseの広告を表示させたいと思います。
今回の広告のタイプはレスポンシブ広告ユニットと言う閲覧する人の画面のサイズに合わせて大きさを変えて表示させると言うのをはります。
padding主にiPhoneで320pxの広告をパソコンでそれ以上の横幅を表示させたいと思います。この可変する大きさはサイトのデザイン全体のイメージを損なわず綺麗に配置できたら素晴らしいのですが、そのためには少しソースをいじる必要があります。今日はそのあたりを忘れないように自分への忘却録もかねて。
まずGoogle Adsenseよりレスポンシブ広告を選びスマートサイズ(推奨)を。
次に個別記事のsingle.phpを開けます。
/www/○○/wp-content/themes/huemanの中にあります。○○はWordPressをインストールしたディレクトリ名
ここに先ほどのソースをはりますが、CSSをいじる為に何でもいいのでclass名を決めて挿入します。
[html autolinks="true"]
<div class="△△△">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- バルキリー -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-4535533030942492[1]"
data-ad-slot="3613342161[2]"
data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
[/html]
[1][2]ご自身のアカウントの数字に変更してください。
この状態ではiPhoneで見るとこのテーマHuemanの空間(padding)がありますので、それを埋めます。
[html autolinks="true"]
@media screen and (min-width: 321px) {
.△△△ {
position: initial;
width: initial;
}
}

.△△△ {
position: relative;
left: -15px;
width: 320px;
margin: 0 0 20px 0;
text-align: center;
}
[/html]
これでiPhoneで綺麗に表示されます。
レスポンシブ広告はスマートサイズ(推奨)だとパソコンで見るとテキスト広告が多いです。アドバンス(コード変更が必要)を選んで468pxで表示させるとディスプレイ広告がでます。
text-align: center;
で468pxでも中央揃えになってますので空白も気になりません。
※全部の環境でクロスブラウザテストをしたわけではありません。表示が崩れる等あれば是非教えてくださいませ。
あっこの記事FTPできるユーザーでないといじれません。業者さんに作ってもらってWordPressを管理画面からでないとのぞけない権限しかもらってないユーザーの方はできませんのであしからず。

The following two tabs change content below.
平井 裕三(管理人)
大阪市北区に住む梅田の北の住民。北区内の情報だけでなく、北区民が移動する範囲でみつけた面白いもん、歴史的価値があるものをできる限り調べて発表。元鉄ちゃんなので鉄分も多め。北区発行のフリーペーパーつひまぶの編集にも参加している。

スポンサーリンク


にほんブログ村 地域生活(街) 関西ブログ 大阪キタ情報へ
にほんブログ村

-保守
-,

Copyright© 梅田の北っかわ!(うめきた) , 2017 AllRights Reserved Powered by micata2.