カスタマイズメモ

当ブログのカスタマイズの概要です。
基本的に自分用の覚書きとして記録しているため、詳細な説明等は記載しておらず、殆どが参照記事のリンクだけとなっております。
各参照先の記事をご覧になるのが一番確実で手っ取り早いとは思いますが、もしご質問等ありましたら、コメントの方へどうぞ。

当ブログは開設時より旧バージョンであるシンプルテーマを使い続けております。最新バージョンのBloggerテーマにはそのままでは適用できない場合もあるかもしれません。

Font Awesome は Version 5 を使用しています。それ以前のバージョンとはタグや一部のクラス名が異なります。

各コード内の赤文字部分やCSSは適宜変更して下さい。

固定ページにスクリプトをインラインで記述する場合、必ず編集モードを「HTML」にして下さい。「作成」モードに切り替えると余計な改行が入ってしまい、コードが壊れて表示・動作しなくなってしまいます。その様な時は再度スクリプトをコピペし直してみて下さい。

2018/12/11 更新

INDEX

  1. Font Awesome の導入準備
  2. ページトップボタン
  3. 最新コメントウィジェット
  4. 検索窓のデザインカスタマイズ
  5. アクセス解析で自分のアクセスをカウントしない
  6. 特定ページにのみhtmlコードを適用させる
  7. 最新記事ウィジェット
  8. 関連記事ウィジェット
  9. 埋め込みYouTube及びBlogger投稿動画のレスポンシブ化
  10. トップページにて同一日複数投稿記事全てに投稿日を表示
  11. スマホ版のスワイプページ遷移を無効化
  12. デフォルトではフッターに表示されるラベルをヘッダーに移動
  13. コメント欄の吹き出し表示化
  14. ページナビウィジェット
  15. 「次の投稿」「前の投稿」を記事タイトルに置き換えるスクリプト
  16. 「トップページのサムネイル(アイキャッチ)画像を任意のものに設定
  17. トップページを概要+アイキャッチ画像表示化
  18. バンドルcssのインライン化
  19. Twitterカードの設定
  20. パンくずリスト
  21. 検索結果やラベルページで表示されるメッセージを非表示に
  22. サイトマップウィジェット
  23. オリジナルのSNSシェアボタンを設置
  24. シンプルテーマを一部レスポンシブ化
  25. ラベルウィジェットをプルダウンメニュー化
  26. 見出し構造の改善
  27. お問い合わせ用ページにGoogleフォームを設置
  28. Twitterタイムラインウィジェットの設置とカスタマイズ
  29. 複数のYouTube動画を一つのプレーヤーで切替再生させるスクリプト
  30. リアクションウィジェットをカスタマイズして記事内に埋め込む



  1. Font Awesome の導入準備
  2. 以下のコードをテーマの HTML編集画面にて </body>の上に置いて下さい。

    HTML<link href='https://use.fontawesome.com/releases/v5.5.0/css/all.css' rel='stylesheet' type='text/css'/>

    具体的な使用方法はサルワカさんの記事が分かりやすいので、そちらをご参照下さい。
    【保存版】Font Awesomeの使い方:Webアイコンフォントを使おう (サルワカ)


  3. ページトップボタン (jQuery 使用)
  4. 当ブログではスマホ版では使用していません。
    ボタンは Font Awesome のアイコンを使用しています。


    HTML <script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
    $(function() {
        var pagetop = $('#pagetop');
        $(window).scroll(function () {
            if ($(this).scrollTop() > 1300) {//ボタン出現位置(px)
                pagetop.fadeIn();
            } else {
                pagetop.fadeOut();
            }
        });
        pagetop.click(function () {
            $('body, html').animate({ scrollTop: 0 }, 1000);//ページトップヘの到達時間(ミリ秒)
            return false;
        });
    });
    </script>
    <p id="pagetop"><i class="fas fa-chevron-circle-up"></i></p>


    CSS #pagetop {
        display: none;
        position: fixed;
        bottom: 10px;
        right: 20px;
        color: #42a5f5;
        opacity: 0.4;
        z-index: 1;
    }
    #pagetop:hover {
        color: #42a5f5;
        cursor: pointer;
        opacity: 0.8;
    }
    #pagetop .fa-chevron-circle-up {
        font-size: 50px;
    }


  5. 最新コメントウィジェット。
  6. 投稿者名とコメント概要のみのシンプル表示。

    参照元サイト → Simple Recent Comment Widget for Blogger (Sneeit)


    HTML <noscript id="sneeit-srcbw-exclude"></noscript>
    <script type="text/javascript">
    var sneeit_srcbw_count = 6; //表示件数
    var sneeit_srcbw_summary_length = 100; //概要文字数
    var sneeit_srcbw_icon_comment = 'fa-comment';
    var sneeit_srcbw_icon_arrow = 'fa-angle-right';
    _s7GpE = ['link','href','font-awesome','link','text/css','stylesheet','','sneeit-srcbw-exclude','\n','string','undefined','feed','entry','表示できるコメントがありません。',' ...','','','alternate','self','#','/','#c','<a class="sneeit-srcbw" href="','"><i class="sneeit-srcbw-icon-comment far ','"></i><span class="srcbw-color"><strong>',': </strong></span>','<i class="sneeit-srcbw-icon-arrow fa ','"></i></a>','<span class="sneeit-srcbw-credit">Powered by <a href="http://sneeit.com/simple-recent-comment-widget-blogger/" target="_blank">Sneeit</a></span>','<script type="text/javascript" src="/feeds/comments/summary?alt=json-in-script&max-results=','&callback=_fCiE"><\/script>'];var _vHpF=document.getElementsByTagName(_s7GpE[0]);for(var _vLbB=0;_vLbB<_vHpF.length;_vLbB++){if(_s7GpE[1] in _vHpF[_vLbB]&&_vHpF[_vLbB].href.indexOf(_s7GpE[2])!=-1){break;}}if(_vLbB>=_vHpF.length){var _vLbJ=document.createElement(_s7GpE[3]);_vLbJ.type=_s7GpE[4];_vLbJ.rel=_s7GpE[5];_vLbJ.href=_s7GpE[6];document.head.appendChild(_vLbJ);}var _vRqN=document.getElementById(_s7GpE[7]).innerHTML;var _vSbX=sneeit_srcbw_count;_vRqN=_vRqN.trim();if(_vRqN){_vRqN=_vRqN.split(_s7GpE[8]);_vSbX=_vSbX*(_vRqN.length+2);}function _fCiE(json){if(typeof(json)==_s7GpE[9]||typeof(json)==_s7GpE[10]||!(_s7GpE[11] in json)||!(_s7GpE[12] in json.feed)||!json.feed.entry.length){document.write(_s7GpE[13]);return;}var _vQbX=0;for(var _vLbB=0;_vLbB<json.feed.entry.length&&_vQbX<sneeit_srcbw_count;_vLbB++){var _vOlU=json.feed.entry[_vLbB];var _vQjW=_vOlU.author[0].name.$t;var _vRcD=_vOlU.summary.$t;if(_vRqN.indexOf(_vQjW)!=-1){continue;}_vQbX++;if(_vRcD.length>sneeit_srcbw_summary_length){_vRcD=_vRcD.substring(0,sneeit_srcbw_summary_length)+_s7GpE[14];}var _vVgK=_s7GpE[15];var _vVeS=_s7GpE[16];for(var _vIlN=0;_vIlN<_vOlU.link.length;_vIlN++){var _vLbJ=_vOlU.link[_vIlN];if(_s7GpE[17]==_vLbJ.rel){_vVgK=_vLbJ.href;}else if(_s7GpE[18]==_vLbJ.rel){_vVeS=_vLbJ.href;}}if(!_vVgK){continue;}if(_vVgK.indexOf(_s7GpE[19])==-1){_vVeS=_vVeS.split(_s7GpE[20]);_vVeS=_vVeS[_vVeS.length-1];_vVgK+=(_s7GpE[21]+_vVeS);}document.write(_s7GpE[22]+_vVgK+_s7GpE[23]+sneeit_srcbw_icon_comment+_s7GpE[24]+_vQjW+_s7GpE[25]+_vRcD+_s7GpE[26]+sneeit_srcbw_icon_arrow+_s7GpE[27]);}document.write(_s7GpE[28]);}document.write(_s7GpE[29]+_vSbX+_s7GpE[30]);
    </script>


    CSS a.sneeit-srcbw {
        color: #222;
        font-size: .9em;
        line-height: 1.6em;
        font-weight: normal;
        border-bottom: 1px solid #ddd;
        display: block;
        padding: .5em .5em 1.5em 1.5em;
        position: relative;
    }
    a:hover.sneeit-srcbw {
        background: #eef;
        text-decoration: none;
    }
    .sneeit-srcbw:last-of-type {
        border: none;
    }
    .sneeit-srcbw-icon-comment {
        position: absolute;
        left: 0;
        top: 0.7em;
        color: #888;
    }
    .sneeit-srcbw-icon-arrow {
        display: none;/*矢印アイコンを非表示*/
    }
    .sneeit-srcbw-credit {
        display: none;
    }
    #sneeit-srcbw-exclude {
        display: none!important;
    }
    .srcbw-color {/*投稿者名の文字色*/
        color: #42a5f5;
    }

  7. 検索窓のデザインカスタマイズ
  8. 検索機能自体はBloggerデフォルトのものです。
    参照元サイト → Simple Style Official Search Box Widget for Blogger (Sneeit)



    HTML <div id="_bcd_141013" style="display:none"></div>
    <form action='/search' id='_bcd_141013_search_form' method='get'>
    <input id='_bcd_141013_search_text' name='q' placeholder="ブログ内検索" data-placeholder-end="" type='text'/>
    <button type="submit" id="_bcd_141013_search_submit" title="検索"><span class="fas fa-search"></span></button><!--endofsearsubmit-->
    </form>

    <script type="text/javascript">
    var ss = document.getElementsByTagName('link');
    for (var i = 0; i < ss.length; i++) {
    var href = ss[i].getAttribute('href');
    if (href && href != null && href.indexOf("font-awesome/") != -1) {
            break;
    }
    }
    if (i >= ss.length) {
    var link = document.createElement("link");
    link.rel = "stylesheet";
    link.href = "";
    }
    document.getElementsByTagName("head")[0].appendChild(document.createTextNode("link"));

    </script>


    CSS form#_bcd_141013_search_form {
        position: relative;
        display: block;
        clear: both;
        float: none;
        border: 1px solid #ccc;
        padding: 4px 4px 4px 10px;
        font-size: 12px;
        background-color: #fff;
        border-radius: 20px;
        margin-right: -1.1em;
        margin-left: -1.1em;
        box-shadow: 2px 2px 5px -3px #aaa;
    }

    input#_bcd_141013_search_text {
        width: 88%;
        border: none;
        margin: 0;
        padding: 0;
        line-height: 2em;
        height: 2em;
        outline: none;
        background: transparent;
        color: #333;
    }
    button#_bcd_141013_search_submit:hover {
        opacity: 0.8;
    }
    button#_bcd_141013_search_submit {
        height: 100%;
        width: 35px;
        padding: 0 5px;
        margin: 0;
        position: absolute;
        right: 0;
        top: 0;
        text-align: center;
        cursor: pointer;
        border: none;
        color: #42a5f5;
        font-size: 18px;
        background: transparent;
        outline: 0;
        transition: .3s;
        border-radius: 20px;
    }


  9. アクセス解析で自分のアクセスをカウントしない
  10. jpドメインに関する部分は除外しました。
    参照元サイト → Blogger:ページビュー設定(7)どのブラウザでも同じ方法で設定するページを作る (p--q)



    専用の固定ページを作成し、「HTML」編集画面にて以下のコードを記述。
    ※「作成」画面に切り替えるとコードが壊れて表示されなくなってしまうので注意。その場合、もう一度コピペし直してください。

    HTML <script>
    var domain=location.hostname;
    var domain_TLD_nashi=domain.slice(0,domain.lastIndexOf(".")+1);

     if(navigator.cookieEnabled){
       if(document.cookie.match("_ns=2")){
          document.write("<h3>この "+domain+" はページビューを追跡していません。</h3><br/>");
          document.write("<ul><li><a href=\'javascript:document.cookie=\"_ns=2;expires=Sun, 09 Aug 2000 11:53:58 GMT;domain=."+domain+";path=/;\";location.reload();\'>自分のページビューを追跡に変更する。</a></li><br/>");
          document.write("<li><span style=\'opacity: 0.5\'>自分のページビューを追跡しないに変更する。</span></li></ul><br/>");
       }else{
          document.write("<h3>この "+domain+" はページビューを追跡しています</h3><br/>");
          document.write("<ul><li><span style=\'opacity: 0.5\'>自分のページビューを追跡に変更する。</span></li><br/>");
          document.write("<li><a href=\'javascript:document.cookie=\"_ns=2;expires=Sun, 09 Aug 2030 11:53:58 GMT;domain=."+domain+";path=/;\";location.reload();\'>自分のページビューを追跡しないに変更する。</a></li></ul><br/>");
       }
     }else{
       document.write("cookieが使用できません。");
     }
    </script>

  11. 特定ページにのみhtmlコードを適用させる
  12. スマホ版にて、コメントウィジェットはトップページのみ、最新記事ウィジェットは記事ページのみに表示させています。
    このページのシェアボタンもこの方法で表示させています。
    参照元サイト → GoogleブログBlogger: 特定ページのみにhtmlソースコードを記述する方法 @ コンピュータ系サラリーマンブログ

  13. 最新記事ウィジェット。
  14. カード全体がリンクになるように改変済み。
    参照元サイト → Recent Posts Widget for Blogger (Blogger's Origin)


    HTML <script type='text/javascript'>
    //<![CDATA[
        var numfeed = 5;
        var startfeed = 0;
        var urlblog = "https://fujilog3.blogspot.com/";
        var charac = 30;
        var urlprevious, urlnext;
    function arlinafeed(e,t){for(var n=e.split("<"),r=0;r<n.length;r++)-1!=n[r].indexOf(">")&&(n[r]=n[r].substring(n[r].indexOf(">")+1,n[r].length));return n=n.join(""),n=n.substring(0,t-1)}function showrecentpostsae(e){var t,n,r,a,i,s="";urlprevious="",urlnext="";for(var l=0;l<e.feed.link.length;l++)"previous"==e.feed.link[l].rel&&(urlprevious=e.feed.link[l].href),"next"==e.feed.link[l].rel&&(urlnext=e.feed.link[l].href);for(var d=0;d<numfeed&&d!=e.feed.entry.length;d++){t=e.feed.entry[d],n=t.title.$t;for(var l=0;l<t.link.length;l++)if("alternate"==t.link[l].rel){r=t.link[l].href;break}i="content"in t?t.content.$t:"summary"in t?t.summary.$t:"",a="media$thumbnail"in t?t.media$thumbnail.url:"https://3.bp.blogspot.com/-BHuXHny1kOk/VXrkSyxKCjI/AAAAAAAACas/pZLJAEUDtds/s1600/no-image.png",s+="<a href='"+r+"' title='"+n+"'><div class='recentposarea'>",s+="<img src='"+a+"' />",s+="<h3&gt"+n+"</h3>",s+="<p>"+arlinafeed(i,charac)+"...</p>",s+="</div></a>"}document.getElementById("borpbox").innerHTML=s,s="",s+=urlprevious?"<a href='javascript:navigasifeed(-1);' class='previous' title='次の5件'>‹ Prev</a>":"<span class='noactived previous'>‹ Prev</span>",s+=urlnext?"<a href='javascript:navigasifeed(1);' class='next' title='前の5件'>Next ›</a>":"<span class='noactived next'>Next ›</span>",s+="<a href='javascript:navigasifeed(0);' class='home' title='最新5件'>Home</a>",document.getElementById("rpnavigation").innerHTML=s}function navigasifeed(e){var t,n;-1==e?(t=urlprevious.indexOf("?"),n=urlprevious.substring(t)):1==e?(t=urlnext.indexOf("?"),n=urlnext.substring(t)):n="?start-index=1&max-results="+numfeed+"&orderby=published&alt=json-in-script",n+="&callback=showrecentpostsae",incluirscript(n)}function incluirscript(e){1==startfeed&&removerscript(),document.getElementById("borpbox").innerHTML="<div id='loadrecentpost'></div>",document.getElementById("rpnavigation").innerHTML="";var t=urlblog+"/feeds/posts/default"+e,n=document.createElement("script");n.setAttribute("type","text/javascript"),n.setAttribute("src",t),n.setAttribute("id","arlinalabel"),document.getElementsByTagName("head")[0].appendChild(n),startfeed=1}function removerscript(){var e=document.getElementById("arlinalabel"),t=e.parentNode;t.removeChild(e)}onload=function(){navigasifeed(0)};
    //]]>
    </script>
    <div id="borpbox"></div>
    <div id="rpnavigation"></div>


    CSS #recentpostnav {
        width: 100%;
        margin: 0 auto;
    }
    #HTML1{ /*当ブログでのIDです*/
        height: 520px;/*ウィジェットの高さを固定*/
    }
    .recentposarea {
        display: block;
        height: 72px;
        margin: 0;
        padding: 7px;
    }
    a .recentposarea {
        transition: .3s;
    }
    a .recentposarea:hover {
        background: #eef;
        color: #42a5f5;
    }
    .recentposarea img {
        float: left;
        margin-right: 7px;
        width: 64px;
        z-index: 2;
    }
    .recentposarea img:hover {
        opacity: .7;
    }
    .recentposarea h3 {
        margin: 0;
        font-size: 13px;
    }
    .recentposarea h3 a:hover {
        text-decoration: underline;
    }
    .recentposarea p {
        text-align: left;
        font-size: 12px;
        margin: 0 0 3px;
        line-height: 1.4em;
        color: #333;
        font-weight: normal;
    }
    #borpbox a {
        text-decoration: none;
    }
    #loadrecentpost {
        background: url(https://2.bp.blogspot.com/-60aISBQLRY0/VFBMqzLfzGI/AAAAAAAABgM/GInmVTvEzkc/s1600/loader.gif) 50% 50% no-repeat;
        height: 500px;
    }
    #rpnavigation {
        text-align: center;
        margin-top: 1em;
    }
    #rpnavigation a {
        color: #888;
        border: 1px solid #ddd;
        font-size: 14px;
        display: block;
        padding: 4px 7px;
        box-shadow: 1px 1px 5px -2px #999;
        border-radius: 20px;
        transition: .1s;
    }
    #rpnavigation a:hover {
        background: #42a5f5;
        text-decoration: none;
        color: #fff;
    }
    #rpnavigation .next {
        float: right;
        margin-right: .5em;
    }
    #rpnavigation .previous {
        float: left;
        margin-left: .5em;
    }
    #rpnavigation .home {
        text-align: center;
        display: inline-block;
        padding: 4px 20px;
    }
    #rpnavigation span {
        padding: 5px 10px;
    }
    #rpnavigation span.noactived {
        visibility: hidden;/*1ページ目のNextと最終ページのPrevを非表示*/
    }



  15. 関連記事ウィジェット
  16. カード全体がリンクになるように改変済み。
    参照元サイト → Custom Related Post Widget For Blogger – With Thumbnail (Blogger's Origin)


    ①まず </head> より上の所に以下のコードを挿入。
    24は記事タイトルの最大表示文字数です。

    HTML <!-- Related Posts widget with Thumbnails Code Before Head Start-->
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <script type='text/javascript'>
    //<![CDATA[
    var borelatedTitles=new Array();var rboTitlesNum=0;var relatedUrls=new Array();var thumburl=new Array();function related_results_labels_thumbs(json){for(var i=0;i<json.feed.entry.length;i++){var entry=json.feed.entry[i];borelatedTitles[rboTitlesNum]=entry.title.$t;try{thumburl[rboTitlesNum]=entry.gform_foot.url}catch(error){s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl[rboTitlesNum]=d}else thumburl[rboTitlesNum]='https://4.bp.blogspot.com/-F002tFjL7uc/WBnyVY0GMQI/AAAAAAAAD9k/TOBMkutnQmUw4mQ8qkJrFUAhA2qaWW8nQCLcB/s1600/bo-related-post-no-thumbnail.png'}if(borelatedTitles[rboTitlesNum].length>24)borelatedTitles[rboTitlesNum]=borelatedTitles[rboTitlesNum].substring(0,24)+"...";for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){relatedUrls[rboTitlesNum]=entry.link[k].href;rboTitlesNum++}}}}function removeDuplicate_thumbs(){var tmp=new Array(0);var tmp2=new Array(0);var tmp3=new Array(0);for(var i=0;i<relatedUrls.length;i++){if(!contains_thumbs(tmp,relatedUrls[i])){tmp.length+=1;tmp[tmp.length-1]=relatedUrls[i];tmp2.length+=1;tmp3.length+=1;tmp2[tmp2.length-1]=borelatedTitles[i];tmp3[tmp3.length-1]=thumburl[i]}}borelatedTitles=tmp2;relatedUrls=tmp;thumburl=tmp3}function contains_thumbs(a,e){for(var j=0;j<a.length;j++)if(a[j]==e)return true;return false}function printRelatedLabel_thumbs(){for(var i=0;i<relatedUrls.length;i++){if((relatedUrls[i]==findcurrentposturl)||(!(borelatedTitles[i]))){relatedUrls.splice(i,1);borelatedTitles.splice(i,1);thumburl.splice(i,1);i--}}var r=Math.floor((borelatedTitles.length-1)*Math.random());var i=0;if(borelatedTitles.length>0)document.write('<h2><span>'+titleofrelatedpost+'</span></h2>');document.write('<sl class="related-posts-list">');while(i<borelatedTitles.length&&i<20&&i<maxpost){document.write('<a href="'+relatedUrls[r]+'" title="'+borelatedTitles[r]+'"><ci><span class="rthumb"><img class="related_img" src="'+thumburl[r]+'"/></span><p><span class="related-title">'+borelatedTitles[r]+'</span></p></ci></a>');if(r<borelatedTitles.length-1){r++}else{r=0}i++}document.write('</sl>');relatedUrls.splice(0,relatedUrls.length);thumburl.splice(0,thumburl.length);borelatedTitles.splice(0,borelatedTitles.length)}//]]></script>
    </b:if>
    <!-- Related Posts widget with Thumbnails Code Before Head Ends-->

    ②次に <div class='post-footer'> のすぐ上に以下のコードを挿入。※2箇所あります。上の方はスマホ、下の方がPC用です。

    HTML <!-- Related Posts widget Start-->
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div id='related-posts'>
    <b:loop values='data:post.labels' var='label'>
    <b:if cond='data:label.isLast != &quot;true&quot;'>
    </b:if>
    <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=1000&quot;' type='text/javascript'/>
    </b:loop>
    <script type='text/javascript'>
    var findcurrentposturl=&quot;<data:post.url/>&quot;;
    var maxpost=6;
    var titleofrelatedpost=&quot;Related Posts&quot;;
    removeDuplicate_thumbs();
    printRelatedLabel_thumbs();
    </script>
    </div>
    </b:if>
    <!-- Related Posts widget End-->


    CSS #related-posts {
        width: 100%;
    }
    .related-posts-list ci {
        width: 30%;
        float: left;
        margin: 0 8px 8px 0;
        padding: 5px;
        box-shadow: 2px 2px 5px -3px #aaa;
        background: #fff;
        border-radius: 7px;
        transition: .3s;
    }
    .related-posts-list ci:hover {
        background: #eef;
    }
    .related-title {
        color: #333;
    }
    #related-posts sl ci p {
        margin: 0;
        line-height: 1.1em;
    }
    #related-posts .related_img {
        height: 75px;
        margin: 0 -5px -5px 0;
        width: 75px;
        object-fit: cover;
        border-radius: 7px;
    }
    .rthumb {
        float: left;
        margin-right: 10px;
    }


  17. 埋め込みYouTube及びBlogger投稿動画のレスポンシブ化
  18. 参照元サイト → How To Make YouTube Videos Responsive In Blogger (Blogger's Origin)

  19. トップページにて同一日複数投稿記事全てに投稿日を表示
  20. Blogger はデフォルトでは最新記事以外に投稿日が表示されない仕様。
    参照元サイト → 日付ヘッダーを必ず表示させる方法 (p--q)




  21. スマホ版のスワイプページ遷移を無効化
  22. これはシンプルテーマ等、スマホ専用画面のあるテーマでの仕様だと思われます。
    参照元サイト → Happy-Go-Lucky: [Blogger] モバイルテンプレートでスワイプによるページ遷移を無効にする方法【改】

    ※</body>の直前に以下のスクリプトを挿入

    HTML <b:if cond='data:blog.isMobile'><script type='text/javascript'>
    (function() {
      var c = document.getElementById(&quot;main&quot;);
      c.addEventListener = null;
    })()
    </script>
    </b:if>


  23. デフォルトではフッターに表示されるラベルをヘッダーに移動
  24. 参照元サイト → 記事のラベルを記事の下部だけではなく上部にも表示できるようにした (Dr.ウーパのコンピュータ備忘録)

  25. コメント欄の吹き出し表示化
  26. 関連記事 → 吹き出し風
    参照元サイト → CSSで作る!吹き出しデザインのサンプル19選 (サルワカ)


    デザイン A

    アイコンを左側に配置し、名前や日付、ボタン類を含めたコメント要素全体を囲っています。
    CSS .comment-block {
        background: #fff;
        padding: 1em;
        border-radius: 10px;
        position: relative;
        border: solid 2px #ccc;
    }
    .comment-block::before {
        content: "";
        position: absolute;
        top: 21px;
        left: -20px;
        margin-top: -8px;
        border: 10px solid transparent;
        border-right: 12px solid #fff;
        z-index: 2;
    }
    .comment-block::after {
        content: "";
        position: absolute;
        top: 21px;
        left: -23px;
        margin-top: -8px;
        border: 10px solid transparent;
        border-right: 12.2px solid #ccc;
        z-index: 1;
    }
    /*アイコン位置調整*/
    .avatar-image-container {
        margin-top: 5px;
    }


    デザイン B

    アイコンを上に置き、コメント本文のみを囲うパターン。
    CSS .comment-content {
        background: #fff;
        padding: 1em;
        border-radius: 10px;
        position: relative;
        border: solid 2px #ccc;
        margin-left: -2.8em!important;
    }
    .comment-content::before {
        content: "";
        position: absolute;
        top: -20px;
        left: 1.8em;
        margin-left: -16px;
        border: 8px solid transparent;
        border-bottom: 12px solid #fff;
        z-index: 2;
    }
    .comment-content::after {
        content: "";
        position: absolute;
        top: -24px;
        left: 1.8em;
        margin-left: -17px;
        border: 9px solid transparent;
        border-bottom: 13px solid #ccc;
        z-index: 1;
    }
    /*アイコン位置調整*/
    .avatar-image-container {
        margin: -.5em 0 0 .5em;
    }


  27. ページナビウィジェット
  28. 関連記事 → ページナビ
    参照元サイト → How To Add Next & Previous Numbered Pagination in Blogger (Mr.Blogger Tricks)

    HTML <script>
    var postperpage=10;
    var numshowpage=5;
    var upPageWord="<";
    var downPageWord=">";
    var home_page="/";
    var urlactivepage=location.href;

    eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('6 I;6 i;6 f;6 n;1f();C 1g(15){6 5=\'\';J=K(N/2);4(J==N-J){N=J*2+1}A=f-J;4(A<1)A=1;d=K(15/j)+1;4(d-1==15/j)d=d-1;D=A+N-1;4(D>d)D=d;5+="<3 7=\'1y\'>1z "+f+\' 1A \'+d+"</3>";6 16=K(f)-1;4(f>1){4(f==2){4(i=="o"){5+=\'<3 7="1B"><a 9="\'+B+\'">\'+O+\'</a></3>\'}b{5+=\'<3 7="g"><a 9="/r/s/\'+n+\'?&c-k=\'+j+\'">\'+O+\'</a></3>\'}}b{4(i=="o"){5+=\'<3 7="g"><a 9="#" v="L(\'+16+\');w x">\'+O+\'</a></3>\'}b{5+=\'<3 7="g"><a 9="#" v="M(\'+16+\');w x">\'+O+\'</a></3>\'}}}4(A>1){4(i=="o"){5+=\'<3 7="g"><a 9="\'+B+\'">1</a></3>\'}b{5+=\'<3 7="g"><a 9="/r/s/\'+n+\'?&c-k=\'+j+\'">1</a></3>\'}}4(A>2){5+=\'...\'}1h(6 l=A;l<=D;l++){4(f==l){5+=\'<3 7="1C">\'+l+\'</3>\'}b 4(l==1){4(i=="o"){5+=\'<3 7="g"><a 9="\'+B+\'">1</a></3>\'}b{5+=\'<3 7="g"><a 9="/r/s/\'+n+\'?&c-k=\'+j+\'">1</a></3>\'}}b{4(i=="o"){5+=\'<3 7="g"><a 9="#" v="L(\'+l+\');w x">\'+l+\'</a></3>\'}b{5+=\'<3 7="g"><a 9="#" v="M(\'+l+\');w x">\'+l+\'</a></3>\'}}}4(D<d-1){5+=\'...\'}4(D<d){4(i=="o"){5+=\'<3 7="g"><a 9="#" v="L(\'+d+\');w x">\'+d+\'</a></3>\'}b{5+=\'<3 7="g"><a 9="#" v="M(\'+d+\');w x">\'+d+\'</a></3>\'}}6 17=K(f)+1;4(f<d){4(i=="o"){5+=\'<3 7="g"><a 9="#" v="L(\'+17+\');w x">\'+1i+\'</a></3>\'}b{5+=\'<3 7="g"><a 9="#" v="M(\'+17+\');w x">\'+1i+\'</a></3>\'}}6 E=y.1D("E");6 18=y.1E("1F-1G");1h(6 p=0;p<E.P;p++){E[p].1j=5}4(E&&E.P>0){5=\'\'}4(18){18.1j=5}}C 1a(Q){6 R=Q.R;6 1k=K(R.1H$1I.$t,10);1g(1k)}C 1f(){6 h=u;4(h.e("/r/s/")!=-1){4(h.e("?S-c")!=-1){n=h.F(h.e("/r/s/")+14,h.e("?S-c"))}b{n=h.F(h.e("/r/s/")+14,h.e("?&c"))}}4(h.e("?q=")==-1&&h.e(".5")==-1){4(h.e("/r/s/")==-1){i="o";4(u.e("#G=")!=-1){f=u.F(u.e("#G=")+8,u.P)}b{f=1}y.1l("<m T=\\""+B+"U/V/W?c-k=1&X=Y-Z-m&11=1a\\"><\\/m>")}b{i="s";4(h.e("&c-k=")==-1){j=1J}4(u.e("#G=")!=-1){f=u.F(u.e("#G=")+8,u.P)}b{f=1}y.1l(\'<m T="\'+B+\'U/V/W/-/\'+n+\'?X=Y-Z-m&11=1a&c-k=1" ><\\/m>\')}}}C L(H){12=(H-1)*j;I=H;6 13=y.1m(\'1n\')[0];6 z=y.1o(\'m\');z.1p=\'1q/1r\';z.1s("T",B+"U/V/W?1t-1u="+12+"&c-k=1&X=Y-Z-m&11=1b");13.1v(z)}C M(H){12=(H-1)*j;I=H;6 13=y.1m(\'1n\')[0];6 z=y.1o(\'m\');z.1p=\'1q/1r\';z.1s("T",B+"U/V/W/-/"+n+"?1t-1u="+12+"&c-k=1&X=Y-Z-m&11=1b");13.1v(z)}C 1b(Q){1c=Q.R.1K[0];6 1w=1c.1x.$t.F(0,19)+1c.1x.$t.F(1L,1M);6 1d=1N(1w);4(i=="o"){6 1e="/r?S-c="+1d+"&c-k="+j+"#G="+I}b{6 1e="/r/s/"+n+"?S-c="+1d+"&c-k="+j+"#G="+I}1O.9=1e}',62,113,'|||span|if|html|var|class||href||else|max|maksimal|indexOf|nomerhal|showpageNum|thisUrl|jenis|postperpage|results|jj|script|lblname1|page|||search|label||urlactivepage|onclick|return|false|document|newInclude|mulai|home_page|function|akhir|pageArea|substring|PageNo|numberpage|nopage|nomerkiri|parseInt|redirectpage|redirectlabel|numshowpage|upPageWord|length|root|feed|updated|src|feeds|posts|summary|alt|json|in||callback|jsonstart|nBody||banyakdata|prevnomer|nextnomer|blogPager||hitungtotaldata|finddatepost|post|timestamp|alamat|halamanblogger|loophalaman|for|downPageWord|innerHTML|totaldata|write|getElementsByTagName|head|createElement|type|text|javascript|setAttribute|start|index|appendChild|timestamp1|published|showpageOf|Page|of|showpage|showpagePoint|getElementsByName|getElementById|blog|pager|openSearch|totalResults|20|entry|23|29|encodeURIComponent|location'.split('|'),0,{}))
    </script>


    CSS .showpageNum a,
    .showpage a {
        font-size: 14px;
        width: 20px;
        padding: 6px;
        margin: 0 2.5px;
        color: #fff;
        background: #42a5f5;
        border-radius: 50%;
        display: inline-block;
        box-shadow: 1px 1px 8px -2px #999;
    }
    .showpagePoint {
        padding: 6px!important;
        width: 20px;
        font-size: 14px;
        font-weight: bold;
        padding: 6px;
        margin: 0 2.5px;
        text-decoration:none;
        color: #666;
        border-radius: 50%;
        display: inline-block;
        box-shadow: 1px 1px 8px -2px #999;
        background: #f5f5ff;
    }
    .showpageNum a:hover,
    .showpage a:hover {
        font-size: 14px;
        font-weight: bold;
        padding: 6px;
        margin: 0 2.5px;
        text-decoration:none;
        color: #fff;
        border-radius: 50%;
        display: inline-block;
        box-shadow: 1px 1px 8px -2px #999;
        opacity: .6;
    }
     .showpageOf {
        display: none;
    }



  29. 「次の投稿」「前の投稿」を記事タイトルに置き換えるスクリプト (jQuery 使用)
  30. 当ブログではスマホ版の方にはこのスクリプトは適用してません。
    参照元サイト → Blogger の小枝: Blogger の「前の投稿」「次の投稿」を記事タイトルに変更する

    HTML <script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
    <script type = 'text/javascript' >
        var olderLink = $("a.blog-pager-older-link").attr("href");
    $("a.blog-pager-older-link").load(olderLink + " h1:first", function() {
        var olderLinkTitle = $("a.blog-pager-older-link:first").text();
        if (olderLinkTitle.length > 20) {
            olderLinkTitle = olderLinkTitle.substr(0, 20) + "...";
        }
        $("a.blog-pager-older-link").text(olderLinkTitle);
    });
    var newerLink = $("a.blog-pager-newer-link").attr("href");
    $("a.blog-pager-newer-link").load(newerLink + " h1:first", function() {
        var newerLinkTitle = $("a.blog-pager-newer-link:first").text();
        if (newerLinkTitle.length > 20) {
            newerLinkTitle = newerLinkTitle.substr(0, 20) + "...";
        }
        $("a.blog-pager-newer-link").text(newerLinkTitle);
    }); </script>



  31. トップページのサムネイル(アイキャッチ)画像を任意のものに設定
  32. 参照元サイト → 目から鱗!Bloggerのアイキャッチを任意の画像にする方法 (いろいろぐ)

  33. トップページを概要+アイキャッチ画像表示化
  34. 関連記事 → 色々改良しました
    参照元サイト → 記事をサムネイル・要約表示にして、Readmoreを自動化する方法 (Blogger Labo)

  35. Bloggerバンドルcssのインライン化
  36. 参照元サイト → Bloggerの表示速度を高速化するためbundle.cssを内部化してみた | 日々のメモ帖 by holidaybuggy1980

  37. Twitterカードの設定
  38. 参照元サイト → BloggerにTwitter Cardsを設定する方法 - Blogger101@ブロギングライフ

  39. パンくずリスト
  40. 当ブログでは階層表示ではなく簡易的な用途で、検索結果、ラベルページ、アーカイブページでページタイトルのみ表示させてます。
    参照元サイト → Bloggerにパンくずリストを表示する方法 | 日々のメモ帖 by holidaybuggy1980




  41. 検索結果やラベルページで表示されるメッセージを非表示に
  42. ※検索結果の日時順に並べ替えるオプションが使えなくなります。
    参照元サイト → Bloggerでステータスメッセージをエラー時以外表示させない方法 | 日々のメモ帖 by holidaybuggy1980

  43. サイトマップウィジェット
  44. 日本語仕様に改変済み。
    参照元サイト → How to Add an HTML Sitemap Page in Blogger ~ My Blogger Lab



    日本語仕様のスクリプトファイルを当方管理のGoogle サイトに置きました。
    ※外部ファイルを読み込むため多少表示が遅くなる可能性もあります。
    サイトマップ用の固定ページを作成し、HTML編集画面にて以下のコードをコピペして下さい。

    HTML <div id="bp_toc"></div>
    <script src="https://sites.google.com/site/fujiloghouse/home/sitemap_ja.js"></script>
    <script src="/feeds/posts/default?alt=json-in-script&amp;max-results=9999&amp;callback=loadtoc"></script>

    コードを弄りたい場合やスクリプトコードを直接インラインで記述したい場合は、以下のコードをご利用下さい。
    ※「作成」画面に切り替えるとコードが壊れて表示・動作されなくなってしまうので注意。その場合、もう一度コピペし直してください。

    HTML <div id="bp_toc"> </div>
    <script type="text/javascript">
    // ---------------------------------------------------
    // BLOGTOC
    // ---------------------------------------------------
    // BlogToc creates a clickable Table Of Contents for
    // Blogger Blogs.
    // It uses the JSON post feed, and create a ToC of it.
    // The ToC can be sorted by title or by date, both
    // ascending and descending, and can be filtered by
    // label.
    // ---------------------------------------------------
    // Author: Syed Faizan Ali
    // Url: http://www.mybloggerlab.com
    // Version: 2
    // Date: 2007-04-12
    // ---------------------------------------------------
    // Japanese Localization by Fujiyan.
    // Url: https://fujilog3.blogspot.com/p/customize.html#sitemap
    // ---------------------------------------------------
    // global arrays

       var postTitle = new Array();     // array of posttitles
       var postUrl = new Array();       // array of posturls
       var postDate = new Array();      // array of post publish dates
       var postSum = new Array();       // array of post summaries
       var postLabels = new Array();    // array of post labels

    // global variables
       var sortBy = "datenewest";         // default value for sorting ToC
       var tocLoaded = false;           // true if feed is read and ToC can be displayed
       var numChars = 250;              // マウスオン時にツールチップ表示する概要文字数
       var postFilter = '';             // デフォルトで表示するラベル名
       var tocdiv = document.getElementById("bp_toc"); //the toc container
       var totalEntires =0; //Entries grabbed till now
       var totalPosts =0; //Total number of posts in the blog.

    // main callback function

    function loadtoc(json) {

       function getPostData() {
       // this functions reads all postdata from the json-feed and stores it in arrays
          if ("entry" in json.feed) {
             var numEntries = json.feed.entry.length;
             totalEntires = totalEntires + numEntries;
             totalPosts=json.feed.openSearch$totalResults.$t
             if(totalPosts>totalEntires)
             {
             var nextjsoncall = document.createElement('script');
             nextjsoncall.type = 'text/javascript';
             startindex=totalEntires+1;
             nextjsoncall.setAttribute("src", "/feeds/posts/summary?start-index=" + startindex + "&max-results=500&alt=json-in-script&callback=loadtoc");
             tocdiv.appendChild(nextjsoncall);
             }
          // main loop gets all the entries from the feed
             for (var i = 0; i < numEntries; i++) {
             // get the entry from the feed
                var entry = json.feed.entry[i];

             // get the posttitle from the entry
                var posttitle = entry.title.$t;

             // get the post date from the entry
                var postdate = entry.published.$t.substring(0,10);

             // get the post url from the entry
                var posturl;
                for (var k = 0; k < entry.link.length; k++) {
                   if (entry.link[k].rel == 'alternate') {
                   posturl = entry.link[k].href;
                   break;
                   }
                }

             // get the post contents from the entry
             // strip all html-characters, and reduce it to a summary
                if ("content" in entry) {
                   var postcontent = entry.content.$t;}
                else
                   if ("summary" in entry) {
                      var postcontent = entry.summary.$t;}
                   else var postcontent = "";
             // strip off all html-tags
                var re = /<\S[^>]*>/g;
                postcontent = postcontent.replace(re, "");
             // reduce postcontent to numchar characters, and then cut it off at the last whole word
                if (postcontent.length > numChars) {
                   postcontent = postcontent.substring(0,numChars);
                   var quoteEnd = postcontent.lastIndexOf(" ");
                   postcontent = postcontent.substring(0,quoteEnd) + '...';
                }

             // get the post labels from the entry
                var pll = '';
                if ("category" in entry) {
                   for (var k = 0; k < entry.category.length; k++) {
                      pll += '<a href="javascript:filterPosts(\'' + entry.category[k].term + '\');" title="ラベル 「' + entry.category[k].term + '」 の記事を表示">' + entry.category[k].term + '</a>,  ';
                   }
                var l = pll.lastIndexOf(',');
                if (l != -1) { pll = pll.substring(0,l); }
                }

             // add the post data to the arrays
                postTitle.push(posttitle);
                postDate.push(postdate);
                postUrl.push(posturl);
                postSum.push(postcontent);
                postLabels.push(pll);
             }
          }
          if(totalEntires==totalPosts) {tocLoaded=true;showToc();}
       } // end of getPostData

    // start of showtoc function body
    // get the number of entries that are in the feed
    //   numEntries = json.feed.entry.length;

    // get the postdata from the feed
       getPostData();

    // sort the arrays
       sortPosts(sortBy);
       tocLoaded = true;
    }



    // filter and sort functions


    function filterPosts(filter) {
    // This function changes the filter
    // and displays the filtered list of posts
      // document.getElementById("bp_toc").scrollTop = document.getElementById("bp_toc").offsetTop;;
       postFilter = filter;
       displayToc(postFilter);
    } // end filterPosts

    function allPosts() {
    // This function resets the filter
    // and displays all posts

       postFilter = '';
       displayToc(postFilter);
    } // end allPosts

    function sortPosts(sortBy) {
    // This function is a simple bubble-sort routine
    // that sorts the posts

       function swapPosts(x,y) {
       // Swaps 2 ToC-entries by swapping all array-elements
          var temp = postTitle[x];
          postTitle[x] = postTitle[y];
          postTitle[y] = temp;
          var temp = postDate[x];
          postDate[x] = postDate[y];
          postDate[y] = temp;
          var temp = postUrl[x];
          postUrl[x] = postUrl[y];
          postUrl[y] = temp;
          var temp = postSum[x];
          postSum[x] = postSum[y];
          postSum[y] = temp;
          var temp = postLabels[x];
          postLabels[x] = postLabels[y];
          postLabels[y] = temp;
       } // end swapPosts

       for (var i=0; i < postTitle.length-1; i++) {
          for (var j=i+1; j<postTitle.length; j++) {
             if (sortBy == "titleasc") { if (postTitle[i] > postTitle[j]) { swapPosts(i,j); } }
             if (sortBy == "titledesc") { if (postTitle[i] < postTitle[j]) { swapPosts(i,j); } }
             if (sortBy == "dateoldest") { if (postDate[i] > postDate[j]) { swapPosts(i,j); } }
             if (sortBy == "datenewest") { if (postDate[i] < postDate[j]) { swapPosts(i,j); } }
          }
       }
    } // end sortPosts

    // displaying the toc

    function displayToc(filter) {
    // this function creates a three-column table and adds it to the screen
       var numDisplayed = 0;
       var tocTable = '';
       var tocHead1 = '記事タイトル';
       var tocTool1 = '名前順に並べ替え';
       var tocHead2 = '投稿日';
       var tocTool2 = '投稿日順に並べ替え';
       var tocHead3 = 'ラベル';
       var tocTool3 = '';
       if (sortBy == "titleasc") {
          tocTool1 += ' (降順)';
          tocTool2 += ' (昇順)';
       }
       if (sortBy == "titledesc") {
          tocTool1 += ' (昇順)';
          tocTool2 += ' (昇順)';
       }
       if (sortBy == "dateoldest") {
          tocTool1 += ' (昇順)';
          tocTool2 += ' (昇順)';
       }
       if (sortBy == "datenewest") {
          tocTool1 += ' (昇順)';
          tocTool2 += ' (降順)';
       }
       if (postFilter != '') {
          tocTool3 = '全ての記事を表示';
       }
       tocTable += '<table>';
       tocTable += '<tr>';
       tocTable += '<td class="toc-header-col1">';
       tocTable += '<a href="javascript:toggleTitleSort();" title="' + tocTool1 + '">' + tocHead1 + '</a>';
       tocTable += '</td>';
       tocTable += '<td class="toc-header-col2">';
       tocTable += '<a href="javascript:toggleDateSort();" title="' + tocTool2 + '">' + tocHead2 + '</a>';
       tocTable += '</td>';
       tocTable += '<td class="toc-header-col3">';
       tocTable += '<a href="javascript:allPosts();" title="' + tocTool3 + '">' + tocHead3 + '</a>';
       tocTable += '</td>';
       tocTable += '</tr>';
       for (var i = 0; i < postTitle.length; i++) {
          if (filter == '') {
             tocTable += '<tr><td class="toc-entry-col1"><a href="' + postUrl[i] + '" title="' + postSum[i] + '">' + postTitle[i] + '</a></td><td class="toc-entry-col2">' + postDate[i] + '</td><td class="toc-entry-col3">' + postLabels[i] + '</td></tr>';
             numDisplayed++;
          } else {
              z = postLabels[i].lastIndexOf(filter);
              if ( z!= -1) {
                 tocTable += '<tr><td class="toc-entry-col1"><a href="' + postUrl[i] + '" title="' + postSum[i] + '">' + postTitle[i] + '</a></td><td class="toc-entry-col2">' + postDate[i] + '</td><td class="toc-entry-col3">' + postLabels[i] + '</td></tr>';
                 numDisplayed++;
              }
            }
       }
       tocTable += '</table>';
       if (numDisplayed == postTitle.length) {
          var tocNote = '<span class="toc-note"> ' + postTitle.length + ' 件の記事を表示中<br/></span>'; }
       else {
          var tocNote = '<span class="toc-note"> '+ postTitle.length + ' 件中 ラベル「<b>';
          tocNote += postFilter + '</b>」の ' + numDisplayed + ' 件を表示中<br/></span>';
       }
       tocdiv.innerHTML = tocNote + tocTable;
    } // end of displayToc

    function toggleTitleSort() {
       if (sortBy == "titleasc") { sortBy = "titledesc"; }
       else { sortBy = "titleasc"; }
       sortPosts(sortBy);
       displayToc(postFilter);
    } // end toggleTitleSort

    function toggleDateSort() {
       if (sortBy == "datenewest") { sortBy = "dateoldest"; }
       else { sortBy = "datenewest"; }
       sortPosts(sortBy);
       displayToc(postFilter);
    } // end toggleTitleSort


    function showToc() {
      if (tocLoaded) {
         displayToc(postFilter);
         var toclink = document.getElementById("toclink");

      }
      else { alert("Just wait... TOC is loading"); }
    }

    function hideToc() {
      var tocdiv = document.getElementById("toc");
      tocdiv.innerHTML = '';
      var toclink = document.getElementById("toclink");
      toclink.innerHTML = '<a href="#" onclick="scroll(0,0); showToc(); Effect.toggle('+"'toc-result','blind');"+'">» Show Table of Contents</a> <img src="https://chenkaie.blog.googlepages.com/new_1.gif"/>';
    }
    </script>
    <script src="/feeds/posts/default?alt=json-in-script&amp;max-results=9999&amp;callback=loadtoc" type="text/javascript"></script>

    CSS #bp_toc {
        color: #666;
        margin: 0 auto 1em;
        padding: 0;
        border: ;
        float: left;
        width: 100%;
    }
    span.toc-note {/*上部に表示されるステータスメッセージ*/
        display: none;
    }
    #bp_toc tr:nth-child(2n) {
        background: rgba(0,80,200,.1);
    }
    td.toc-entry-col1 a {
        font-weight: bold;
        font-size: 14px;
     }
    .toc-header-col1,
    .toc-header-col2,
    .toc-header-col3  {
        background:#aaa;
        text-align: center;
    }
    .toc-header-col1 {
        padding: 10px;
        width: 45%;
    }
    .toc-header-col2 {
        padding: 10px;
        width: 12%;
    }
    .toc-header-col3 {
        padding: 10px;
        width: 43%;
    }
    .toc-header-col1 a,
    .toc-header-col2 a,
    .toc-header-col3 a {
        font-size: 1em;
        text-decoration: none;
        color: #fff;
        font-weight: bold;
    }
    .toc-header-col1 a:hover,
    .toc-header-col2 a:hover,
    .toc-header-col3 a:hover {
        opacity: .6;
    }
    .toc-entry-col1,
    .toc-entry-col2,
    .toc-entry-col3 {
        padding: 5px;
        font-size: 12px;
    }
    .toc-entry-col1 a,
    .toc-entry-col2 a,
    .toc-entry-col3 a {
        color: #666;
        font-size: 13px;
        text-decoration: none;
    }
    .toc-entry-col1 a:hover,
    .toc-entry-col2 a:hover,
    .toc-entry-col3 a:hover {
        text-decoration:none;
        color: #1cb7ff
    }
    #bp_toc table {
        width: 100%;
        margin: 0 auto;
        counter-reset: rowNumber;
    }
    .toc-entry-col1 {
        counter-increment: rowNumber;
        line-height: 1.5em;
    }
    #bp_toc table tr td.toc-entry-col1:first-child::before {
        content: counter(rowNumber);
        min-width: 1em;
        min-height: 3em;
        float: left;
        border-right: 1px solid #ddd;
        text-align: center;
        padding: 0px 11px 1px 6px;
        margin-right: 1em;
    }
    td.toc-entry-col2 {
        text-align: center;
    }
    #bp_toc table {
        border-collapse:collapse;
    }
    #bp_toc table td {
        border: 1px solid #ddd;
    }



  45. オリジナルのSNSシェアボタンを設置
  46. 関連記事 → ゆるく開放
    参照元サイト → Bloggerに自作のSNS共有ボタンを設置する|アリスト戦記

  47. シンプルテーマを一部レスポンシブ化
  48. 関連記事 → レスポンシブ?
    参照元サイト → Bloggerの横幅を100%にする|アリスト戦記

  49. ラベルウィジェットをプルダウンメニュー化
  50. 関連記事 → フッター大改造!ビフォー・アフター
    参照元サイト → 【Blogger】ラベルのガジェットをプルダウン表示にする方法 - バナナのBloggerカスタマイズ日記

  51. 見出し構造の改善
  52. 参照元サイト → BloggerのSEO対策:見出しレベルを改善する|アリスト戦記

  53. お問い合わせ用ページにGoogleフォームを設置
  54. 参照元サイト → Bloggerにgoogleフォームでお問い合わせページを設置する - Bloggerなび

  55. Twitterタイムラインウィジェットの設置とカスタマイズ
  56. 参照元サイト → Twitterタイムラインの埋め込みとデザインカスタマイズの方法 | 創kenブログ
    ヘッダー(@〇〇さんのツイート)とフッター(埋め込む Twitterで表示)を非表示に。背景を透明にしてあります。
    フォローボタンをウィジェットタイトル内に埋め込みました。



  57. 複数のYouTube動画を一つのプレーヤーで切替再生させるスクリプト (jQuery 使用)
  58. 関連記事1 → ジュークボックス
    関連記事2 → プレイリスト7 - 眠いい音楽
    参照元サイト → 複数のYouTube動画をJavaScriptで切り替えて再生する方法 | Another Sky

    私はこのスクリプトを「ジュークボックス」と勝手に名付けて呼んでいます。
    タイトルリンクをクリックするだけで動画が切り替わり再生されます。上記の関連記事で実際に試してみて下さい。
    複数のYouTube動画を貼るとどうしても読込が重くなってしまいますが、このスクリプトを使えば動画プレイヤーが一つで済むので非常に軽くなります。

    HTML <div id="embed_movie"></div>
    <ul class="list-movie">
    <a href="https://youtu.be/動画ID①">動画タイトル①</a><br />
    <a href="https://youtu.be/動画ID②">動画タイトル②</a><br />
    <a href="https://youtu.be/動画ID③">動画タイトル③</a><br />
    </ul>
    <script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
    <script>
        var ytPlayer;
    (function(document) {
        var api = document.createElement("script"),
            script;
        api.src = "https://www.youtube.com/player_api";
        script = document.getElementsByTagName("script")[0];
        script.parentNode.insertBefore(api, script);
    }(document));

    function onYouTubePlayerAPIReady() {
        ytPlayer = new YT.Player("embed_movie", {
            width: "360px",
            height: "203px",
            videoId: "待機動画のID", //必ず指定すること。リスト以外の動画でも可。
            playerVars: {
                "rel": 0,
                "autoplay": 0,
            }
        });
    }
    $(function() {
        $(".list-movie").on("click", "a", function(e) {
            e.preventDefault();
            var videoId = $(this).attr("href").replace(/https?:\/\/[0-9a-zA-Z\.]+\//, "");
            ytPlayer.loadVideoById(videoId);
        });
    });
    </script>


  59. リアクションウィジェットをカスタマイズして記事内に埋め込む
  60. 詳細は以下の関連記事をご参照下さい。
    リアクションのススメ




6 件のコメント:

  1. こんにちは。BLOGGERLABさんのサイトマップウィジェットを使用していましたが、ぶじやんさんが日本語対応されていることを本記事で知りました!日本語対応版のコードを利用させていただきました!

    返信削除
    返信
    1. Chico Mさん、コメントありがとうございます。
      このページがお役に立てたようで嬉しいです!

      削除
  2. こんにちは、コメント欄吹き出し化参考になりましたありがとうございます。
    最後にある「リアクション」はどうやっているのですか。

    返信削除
    返信
    1. nikkiさん、コメントありがとうございます。
      Google+の初心者の集いから辿ってブログ拝見いたしました。早速吹き出しを使われていたようで、お役に立てて何よりです!
      リアクションに関してはこちらをご覧下さいませ。→
      https://fujilog3.blogspot.com/2018/06/customized-reaction-widget.html

      削除
    2. リアクション参考になりましたありがとうございます。
      ここまでカスタマイズできて、無料利用できるのは珍しいと思います。

      削除
    3. nikkiさん、リアクションも早速導入されたようで、他所のブログでも問題なく使えることが分かって私も安心しました(いいね✓させていただきました)。
      Bloggerさんは無料でしかも広告もないし、カスタマイズの自由度も高いので最高ですよね(^^)

      削除

Googleアカウントでのログイン推奨。
一部の環境や特定の条件にてエラーでコメント出来ない場合があります。
その様な時はTwitterGoogle+の方にお気軽にコメントくださいませ。