Blogger カスタマイズ方法のまとめ

１：見出しデザインの変更
２：引用のデザイン変更
３：行間設定の変更
４：プログラムソース表示
５：記事紹介追加
６：はてなボタン追加
７：タグのカテゴリリストをタイトルのみにする方法

モバイルヘッダーのアドセンス


          <div class='post-header'>

            <div class='post-header-line-1'/>
の下、（Bloggerモバイル1　320 x 50）

モバイルヘッダーの注意書き

          <div class='post-header'>
※下記に入れる
<span style='color:#666;margin-bottom:5px;font-size:50%;'>※PCで閲覧の場合はURLの『?m=1』以降を削除してください。</span><br/>
以上

            <div class='post-header-line-1'/>

記事下へのアドセンス 15/07/20

　PC 

        <data:post.body/> ２個目の下
（参考）http://toumaswitch.com/blogger-adsense/
（参考）http://www.memorou.com/2013/12/blogger.html
注意書き挿入
<span style='color:#666;margin-bottom:5px;'>スポンサーリンク</span><br/>

Mobile 
（参考）http://www.memorou.com/2013/12/blogger.html
（参考）http://www.sunabox.net/2012/10/blogger-google-adsense.html

注意書き挿入
<span style='color:#666;margin-bottom:5px;'>スポンサーリンク</span><br/>
（これは変換不要）

『 <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='articleBody'>
            <data:post.body/>』
の下、ここへ、アドセンスコード（変換済み）を挿入
モバイルは『Blogger_Mobile_bottom』（非同期 320x100）
           <div style='clear: both;'/> <!-- clear for photos floats -->

アドセンスコード　変換　空白は変換不要
http://labs.m-logic.jp/html2text/

人気の投稿　モバイル　サムネイルに文字を回り込み変更
http://p--q.blogspot.jp/2013/09/blogger7pc.html

検索向け説明をONにするとPC記事下アドセンスが消える問題
（参考）http://sekirarablog.blogspot.jp/2015/12/bloggeradsense.html
（参考）http://memotori.blogspot.jp/2016/04/bloggeradsense.html
二つあるPC用のタグの両方に挿入する
<data:post.body/>
今までは上のほうだけだった（説明ONにすると消える）
違いは直前のdescription（説明）の有無（articleは記事）
itemprop='description articleBody'>
itemprop='articleBody'>

Feedly buttonのつけ方（モバイル）

http://www.feedly.com/factory.html#
でボタン作成

Step 2: Insert your feed URL
はURLではなくRSSフィールドのURL

Atom 1.0
http://ブログ名.blogspot.com/feeds/posts/default
RSS 2.0
http://ブログ名.blogspot.com/feeds/posts/default?alt=rss
参考：今すぐ知りたい人へ！RSSフィードのURLを確認する方法
http://www.blogger-customize.com/2013/11/rss.html


 <b:if cond='data:top.showMobileShare'>
を探す。

忍者おまとめボタン
<div class='ninja_onebutton'>
<script src='http://omt.shinobi.jp/b/da5ddc2d34fdb24dacf5e3435611ac84' type='text/javascript'/>
<span class='ninja_onebutton_hidden' style='display:none;'><data:post.url/></span><span class='ninja_onebutton_hidden' style='display:none;'><data:post.title/></span>
</div>
ここに（ボタンの変換したものを挿入）
&lt;a href='http://cloud.feedly.com/#subscription%2Ffeed%2Fhttp%3A%2F%2Fkato19.blogspot.jp'  target='blank'&gt;&lt;img id='feedlyFollow' src='http://s3.feedly.com/img/follows/feedly-follow-rectangle-flat-medium_2x.png' alt='follow us in feedly' width='71' height='28'&gt;&lt;/a&gt;

関連記事　Milliard

http://ikisakianco.com/blogger-relatedpost-milliard

モバイル反映
<b:widget id='CustomSearch1' locked='false' title='このブログ内を検索' type='CustomSearch'>
以降がウィジットなので出したいウィジットに mobile='yes'　を挿入する

ツイッターカードtwitter　以下コピペ
http://www.kuribo.info/2013/06/twitter-cards-on-blogger.html

Bloggerで記事に最終更新日を付ける方法【2018年更新】
https://blog2.k05.biz/2013/05/blogger-last-modified.html

==========赤字挿入部分／上部挿入順序によりフォントが統一される
       <b:if cond='data:post.dateHeader'>
          <h2 class='date-header'><span><data:post.dateHeader/></span>

<span class='updated post-timestamp' id="last-modified" itemprop='dateModified' expr:title='"Post was updated on " + data:post.lastUpdatedISO8601'><!-- PC用更新日 -->
   <data:post.lastupdatedISO8601/><!-- 右側に表示される -->
</span>

</h2>
        </b:if>

<script>
// 投稿日
var published=new Date("<data:post.timestampISO8601/>");
// 最終更新日  
var updated =new Date("<data:post.lastUpdatedISO8601/>");
</script>
続く〜
==========