Google Adsenseの表示設定のカスタマイズ

（2014.10.01実施）

スマホやケータイなどでBlog表示時に、Google Adsenseの広告を、最下部に固定して表示させる方法。よくある情報系サイトのような感じに。

1. Google Adsenseでレスポンシブ型の広告コードを取得

2. Bloggerの設定で、テンプレート＞htmlの編集で、以下のコードを追加
　黒字は広告コードをそのままコピペ。
　※エラー表示のため、「async」を消去。


<b:if cond="data:blog.isMobile">
    <div style="bottom: 0; clear: both; display: block; float: none; left: 0; margin: 0; padding: 0; position: fixed; width: 100%; z-index: 1;">
    <script src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js">
    </script>
    <!-- XXXX_respo_size -->
    <br />
    <ins class="adsbygoogle" data-ad-client="ca-pub-XXXX" data-ad-format="auto" data-ad-slot="XXXX" style="display: block;">
    <script>
        (adsbygoogle = window.adsbygoogle || []).push({});
    </script>
    </div>
<b:else>
</b:else>

blockquoteタグの表現変更

（2014.08.03実施)

標準に使うと、以下のように引用かどうかわかりにくい、<blockquote>タグ使用時の表現を

以下のように変更

(CSSコード)


blockquote.orgkmstyle{
    background-color:#ddd;
    padding:3em 1em;
    position:relative;
    z-index: 1;
}

blockquote.orgkmstyle:before{
    content:"''";
    font-size:600%;
    line-height:1em;
    color:#FFFFFF;
    font-family: 'Times New Roman' ,"ＭＳ Ｐゴシック" ,sans-serif;
    position:absolute;
    left:0;
    top:0;
    z-index: 2;
}

blockquote.orgkmstyle:after{
    content:"''";
    font-size:600%;
    line-height:0em;
    color:#FFFFFF;
    font-family: 'Times New Roman' ,"ＭＳ Ｐゴシック" ,sans-serif;
    position:absolute;
    right:0;
    bottom:0;
    z-index: 2;
}

blockquote.orgkmstyle p  {  
    margin-bottom: 12px;  
    z-index: 3;
}  

blockquote.orgkmstyle p.origin    {  
    text-align: right;  
    padding-top: 8px;  
    margin-bottom:0; 
    font-size:small;  
    z-index: 3;
}

(htmlでの使い方)


<blockquote class="orgkmstyle">
<p>
「家庭というものの持つ、おそるべきべき魔力。<br />
<br />
まさに、典型的なホームドラマだ」
</p>
<p class="origin">背中の音、「夜のかくれんぼ」、星新一</p>
</blockquote>

h1タグの表現変更

（2014.08.03　実施)

標準に使うと、以下のようにただ文字が大きいだけの<h1>タグ使用時の表現を

以下のように変更

(CSSコード)


h1.orgkmstyle{
    padding:3px 5px;
    border-color:#777777;
    border-width:0 0 1px 7px;
    border-style:solid;
    font-size:large;
}

(htmlでの使い方)


　<h1 class="orgkmstyle">　搭乗回数編</h1>

KoM 10/01/2014 Tags : Blogger設定 , TIPS

BloggerのCSS設定 | TIPS

Google Adsenseの表示設定のカスタマイズ

blockquoteタグの表現変更

h1タグの表現変更

No Comments