Blogger(ブロガー)のトップページや一覧ページをカスタマイズ

2019年04月08日 (月)

Blogger(ブロガー)のトップページや一覧のページでは
記事が全て表示されます。

内容が多い記事が複数あると、すごくスクロールが長くなってしまいます。
表示させる最大件数を少なくすれば良いのですが、最低でも５件くらいは表示させたいです。

とりあえずベストな方法が見つかるまで、jQueryで記事内のコンテンツ表示を少なくすることにしました。

ヘッダーの最後に下記のコードを挿入すれば、ＯＫです。

テーマによっては、このままでは動作しない可能性があります。
私が導入したテーマは、「Awesome Inc.」です。
「Awesome Inc.」のテーマならば、問題なくどうさすると思います。

このブログサイトにも導入しています。

</head> を探して、その上に挿入します。

<script src='https://code.jquery.com/jquery-3.3.1.slim.min.js'/>
<b:if cond='data:blog.pageType != "item"'>
<script type='text/javascript'>
//<![CDATA[
jQuery(function() {
 if ($('.entry-content').length > 0) {
  let content_length = 200;
  let content = '', body = '', set_img = '';
  $('.entry-content').each(function(key, val) {
   body = '';
   set_img = '';
   content = $(val).html();

   body += content.replace(/<("[^"]*"|'[^']*'|[^'">])*>/g, '');

   if (body.length > content_length) {
    body = body.substr(0, content_length) + ' ...'; 
   }

   $(val).html('<div>' + set_img + body + '</div>');
        });
    }
});
//]]>
</script>
</b:if>
</head>

これで、トップページと一覧ページのみの記事のコンテンツ表示を短くしてみました。

以上です。