テンプレートをちょっと修正しようとしたところ、抜粋表示がなかなか気に入らないのでいろいろとテストしました。

　今日は、Bloggerの使い方というよりも、javascriptの試行錯誤の記録です。

トップページの「抜粋」を変更したいです

Bloggerで抜粋を表示させるには、<data:post.sinppet>が一番簡単な方法ですが１４０文字固定というのがちっと使いにくいと思いますので程よく表示できるように試行錯誤していました。

Bloggerのトップページに抜粋表示で出来たこと

　どうやっても完璧な文字数カウントが動かないため「記事の抜粋」は記事によって多少の差がでてしまいます。

「記事の抜粋」を追加した

どのように行ったかというと

「記事の抜粋」は、javascriptをつかって<data:post.snippet>を短くするようにしています。　同時に同じ方法でアイキャッチ画像も大きめにしました。

文字数を切り詰めるスクリプト

function truncate(str, size, suffix) {
 if (!str) str = '';
 if (!size) size = 53;
 if (!suffix) suffix = '...';
 var b = 0;
 for (var i = 0;  i < str.length; i++) {
   b += str.charCodeAt(i) <= 255 ? 1 : 2;
   if (b > size) {
     return str.substr(0, i) + suffix;
   }
 }
 return str;
}

substrを使って文字数を切り詰めていますが、ドキュメントによるとsubstringの方が良いようでしたのでテストしてみたところ切り詰められた文字数がかなり変化してしまったので、substrのままとしました。

テキスト切り詰め処理を細工してみた

function createSummary(pID){
 var div = document.getElementById(pID);
 var summ = summary_noimg;
 var index = div.innerHTML.indexOf('。');
 /* var summary =  '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>'; */
 var summary =  '<div>' + truncate(div.innerHTML, index, '....') + '</div>'

 div.innerHTML = summary;
}

最初に見つかった「。」を抜粋に表示する区切りとしたかったです。　そこで、indexOfを使い位置を検出してから切り詰めしたところ、テキストによっては位置が合なかったりします。

HTMLコード：

<div class='topIndexSnippet'>
<div expr:id='&quot;summary&quot; + data:post.id'>  <data:post.snippet/></div>
<script type='text/javascript'>createSummary(&#39;summary<data:post.id/>&#39;);
</script>
<span class='jump-link' style='float:right;padding-top:20px;'><a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a></span>
</div>

HTMLコードは、<data:post.snippet>を表示させ、javascriptで表示させたい文字数分だけ切り出ししています。

入力テキストに<data:post.body>と使用する方法を元記事の著者は使用していたが、アイキャッチ画像の生成と抜粋の２回処理を行うと読み込みが少し遅くなりましたので「抜粋」を生成する部分はsnippetから生成させています。


the_exruptなどで簡単に取り出せるWordPressとかですともっと簡単なんですが。。。