カスタマイズメモ

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

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

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

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

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


2019/1/25 追記
このページでの旧バージョンのシンプルテーマのカスタマイズに関する更新は終了させて頂きました。
今後はカスタマイズメモ 2にて、新バージョンのテーマのカスタマイズに関して記録していきます。
尚、コメントは今後も引き続き受け付けます。

INDEX

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



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

    HTML<link href='https://use.fontawesome.com/releases/v5.6.3/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. 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>

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

  11. 最新記事ウィジェット。
  12. カード全体がリンクになるように改変済み。
    参照元サイト → 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を非表示*/
    }



  13. 関連記事ウィジェット
  14. カード全体がリンクになるように改変済み。
    参照元サイト → 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;
    }


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

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




  19. スマホ版のスワイプページ遷移を無効化
  20. これはシンプルテーマ等、スマホ専用画面のあるテーマでの仕様だと思われます。
    参照元サイト → 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>


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

  23. コメント欄の吹き出し表示化
  24. 関連記事 → 吹き出し風
    参照元サイト → 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;
    }


  25. ページナビウィジェット
  26. 関連記事 → ページナビ
    参照元サイト → 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;
    }



  27. 「次の投稿」「前の投稿」を記事タイトルに置き換えるスクリプト (jQuery 使用)
  28. 参照元サイト → Blogger の小枝: Blogger の「前の投稿」「次の投稿」を記事タイトルに変更する

    20は最大表示文字数です。

    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 + " .post-title: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 + " .post-title: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>



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

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

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

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

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




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

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



    日本語仕様のスクリプトファイルを当方管理のGoogleサイトに置きました。
    ※外部ファイルを読み込むため多少表示が遅くなる可能性もあります。
    サイトマップ用の固定ページを作成し、HTML編集画面にて以下のコードをコピペして下さい。
    HTML <div id="bp_toc"></div>
    <script src="//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>
    "blogspot.com" 以外の独自ドメインのサイトの場合、スクリプトが読み込まれず動作しない可能性があります。そのような時は、以下のコードを直接インラインで記述して下さい。
    ※「作成」画面に切り替えるとコードが壊れて表示・動作されなくなってしまうので注意。その場合、もう一度コピペし直してください。

    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;
    }



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

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

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

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

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

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



  55. 複数のYouTube動画を一つのプレーヤーで切替再生させるスクリプト (jQuery 使用)
  56. 関連記事1 → ジュークボックス (ふじろぐ。音楽館)
    関連記事2 → プレイリスト12 - 1979年セレクション (ふじろぐ。音楽館)
    参照元サイト → 複数の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>


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

  59. 記事のタイトルとURLをコピーするボタンの導入
  60. 詳細は以下の関連記事をご参照下さい。
    記事のリンクをコピーするボタンを付けてみた

  61. ページトップに戻るリンクを固定メニューバーに設置
  62. スクリプト等は一切不使用の超シンプル軽量な機能です。

    このカスタマイズは、当ブログの様に下にスクロールしても上部に固定されているメニューバー(「ページ」ガジェット)が設置されている事が前提となります。
    また、一部のサードパーティ製テーマ(無印ZELOやVaster2等)では適用・動作できない場合があります。

    以下のCSSを追記する事でメニューバーが最上部に固定された状態になります。
    CSS.PageList {
        top: 0;
        position: fixed;
        z-index: 10;
    }

    上記で効かない場合やレイアウトが崩れる場合はこちらを試してみて下さい。
    CSS.tabs-outer {
        top: 0;
        position: fixed;
        z-index: 10;
    }

    レイアウト画面にて「ページ」ガジェットを次のように編集します。

    1. 「+ 外部リンクを追加」をクリック。


    2. ページタイトルを入力(「上に戻る」でも何でも構いません)。
    3. URL欄は「#」(半角シャープ)のみでOKです。
    4. 「リンクを保存」をクリック


    5. ドラッグ & ドロップで好きな位置に来るように並べ替えたら「保存」を押して完了です。



    メニューバーの「↑PAGE TOP」をクリックすると一瞬で最上部に飛びます。
    ブラウザの「戻る」で元の位置に戻ります。



  • COPY
    LINK

コメント

Chico M さんの投稿…
こんにちは。BLOGGERLABさんのサイトマップウィジェットを使用していましたが、ぶじやんさんが日本語対応されていることを本記事で知りました!日本語対応版のコードを利用させていただきました!
ふじやん。 さんの投稿…
Chico Mさん、コメントありがとうございます。
このページがお役に立てたようで嬉しいです!
nikki さんの投稿…
こんにちは、コメント欄吹き出し化参考になりましたありがとうございます。
最後にある「リアクション」はどうやっているのですか。
ふじやん。 さんの投稿…
nikkiさん、コメントありがとうございます。
Google+の初心者の集いから辿ってブログ拝見いたしました。早速吹き出しを使われていたようで、お役に立てて何よりです!
リアクションに関してはこちらをご覧下さいませ。→
https://fujilog3.blogspot.com/2018/06/customized-reaction-widget.html
nikki さんの投稿…
リアクション参考になりましたありがとうございます。
ここまでカスタマイズできて、無料利用できるのは珍しいと思います。
ふじやん。 さんの投稿…
nikkiさん、リアクションも早速導入されたようで、他所のブログでも問題なく使えることが分かって私も安心しました(いいね✓させていただきました)。
Bloggerさんは無料でしかも広告もないし、カスタマイズの自由度も高いので最高ですよね(^^)