Bloggerの記事を読みやすくするカスタマイズまとめ｜目次・コード表示・ブログカード・吹き出し

<!-- Google-code-prettifyを追加 -->
<script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js"></script>
<!-- /Google-code-prettify -->

<pre class="prettyprint">ソースコード</pre>

<pre class="prettyprint linenums">ソースコード</pre>

<style type="text/css">
  pre.prettyprint.linenums li {
    list-style-type: decimal;
  }
</style>

<!-- Google-code-prettifyを追加 -->
<script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js?skin=sunburst"></script>
<!-- /Google-code-prettify -->

<pre class="prettyprint lang=python">pythonのソースコード</pre>

<pre class="prettyprint linenums" style="overflow: auto; word-wrap: normal;">

<style>
pre.prettyprint {
  overflow: auto;
  word-wrap: normal;
}
</style>

/* 吹き出し スタート */
.balloon-left, .balloon-right {
  width: 100%;
  margin: 5px 0;
  overflow: hidden;
}
.faceicon {
  width: 80px;
  text-align:center;
  margin-top: 0;
  margin-bottom: 0;
}
.balloon-left .faceicon {
  float: left;
  margin-left: 5px;
}
.balloon-right .faceicon {
  float: right;
  margin-right: 5px;
}
.faceicon img{
  width: 100%;
  height: auto;
}
.img-caption {
  font-size: 12px;
}
.says {
  display: inline-block;
  position: relative;
  font-size: 14px;
  border-radius: 12px;  
  background: white;
  -webkit-filter:drop-shadow(2px 2px 2px rgba(0,0,0,0.5));
}
.balloon-left .says {
  margin: 5px 0 0 20px;      /* 吹き出し(左)の位置を調整 */
  padding: 20px 15px;
  border:2px solid #aef26a;  /* 吹き出し(左)の色を調整 */
}
.balloon-right .says {
  float: right;
  margin: 5px 10px 0 0;      /* 吹き出し(右)の位置を調整 */
  padding: 20px 15px;
  border:2px solid #fda1f1;  /* 吹き出し(右)の色を調整 */
}
.says:before {
  content: "";
  display: inline-block;
  position: absolute;
  border: 10px solid transparent;
  z-index: 2;
}
.balloon-left .says:before {
  top: 17px;
  left: -19px;
  border-right: 10px solid #FFF;
}
.balloon-right .says:before {
  top: 20px;
  right: -20px;
  border-left: 10px solid #FFF;
}
.says:after {
  content: "";
  display: inline-block;
  position: absolute;
  border: 12px solid transparent;
  z-index: 1;
}
.balloon-left .says:after {
  top: 15px;
  left: -26px;
  border-right: 12px solid #aef26a;  /* 吹き出し(左)の色を調整 */
}
.balloon-right .says:after {
  top: 18px;
  right: -26px;
  border-left: 12px solid #fda1f1;  /* 吹き出し(右)の色を調整 */
}
/* 吹き出し エンド */

<!--吹き出しはじまり--><span class="balloon-left"><span class="faceicon">★<img>タグを設定★<span class="img-caption">★イメージの下の説明を設定</span></span><span class="says">★吹き出しの言葉を設定</span></span><!--吹き出し終わり-->

<!--吹き出しはじまり--><span class="balloon-right"><span class="faceicon">★<img>タグを設定★<span class="img-caption">★イメージの下の説明を設定</span></span><span class="says">★吹き出しの言葉を設定</span></span><!--吹き出し終わり-->

<!-- JQuery -->
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js'/>

<!-- 「トップへ戻る」用アイコンフォント Font Awesome -->
<link href='https://use.fontawesome.com/releases/v5.6.4/css/all.css' rel='stylesheet'/>

   <!-- topへ戻る ここから -->
    <script>
    jQuery(function() {
        var pagetop = $('#page_top');
        pagetop.hide();
        $(window).scroll(function () {
            if ($(this).scrollTop() > 100) {  //100pxスクロールしたら表示
                pagetop.fadeIn();
            } else {
                pagetop.fadeOut();
            }
        });
      $('a[href^="#"]').click(function(){
        var time = 500;
        var href= $(this).attr("href");
        var target = $(href == "#" ? 'html' : href);
        var distance = target.offset().top;
        $("html, body").animate({scrollTop:distance}, time, "swing");
        return false;
      });
    });
    </script>
 
    <div id='page_top'><a href='#'/></div>
    <!-- topへ戻る ここまで -->

/* トップに戻る ここから */
    #page_top{
      width: 50px;
      height: 50px;
      position: fixed;
      right: 0;
      bottom: 0;
      background: #a3e386; /* ボタンの色を指定 */
      opacity: 0.6;
    }
    #page_top a{
      position: relative;
      display: block;
      width: 50px;
      height: 50px;
      text-decoration: none;
    }
    #page_top a::before{
      font-family: 'Font Awesome 5 Free';
      font-weight: 900;
      content: '\f102';
      font-size: 25px;
      color: #fff;
      position: absolute;
      width: 25px;
      height: 25px;
      top: 0;
      bottom: 0;
      right: 0;
      left: 0;
      margin: auto;
      text-align: center;
    }
/* /トップに戻る ここまで */