Top Ad unit 728 × 90

Pick UP

recent

[広告]


BloggerのCSS設定 | TIPS


比較的に設定の自由度が高いGoogleのBlogサービス:Bloggerのカスタマイズ記録。

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' ,"MS Pゴシック" ,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' ,"MS Pゴシック" ,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>


関連コンテンツ

All Rights Reserved by KoM note blog © 2014 - 2016
Powered By Blogger, Designed by Sweetheme

Contact Us

名前

メール *

メッセージ *

copyright kota MISHIMA. Powered by Blogger.