2015年12月27日日曜日

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

1:見出しデザインの変更
2:引用のデザイン変更
3:行間設定の変更
4:プログラムソース表示
5:記事紹介追加
6:はてなボタン追加
7:タグのカテゴリリストをタイトルのみにする方法

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


          <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/> 2個目の下
(参考)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>
続く〜
========== スポンサーリンク


0 件のコメント:

コメントを投稿

お気軽にコメントどうぞ!古い記事でも一言でも嬉しいです。