記事抜粋の長さを短くするために行ったこと

2015年7月1日

トップ記事に<data:post.snippet>で抜粋を表示させていますが、140文字とちょっと長いため短くする方法を紹介します。

英語の記事がすでにあります

　スクリプトを作成しようと思いましたが、既に英文記事で紹介されているスクリプトをちょっと変更するだけで簡単にできます。

　参照記事：SUMMARY & EXCERPT POST FORMAT (BLOGGER)

　この記事で紹介されているスクリプトは、イメージ規定サイズで生成して指定文字数で記事の抜粋を作成してくれます。

　タイトルを並べて配置しようとしていますのでそのままではちょっと都合がよくありません。

　そこで、スクリプトをちょっと変更してイメージを生成することと、抜粋を生成することに分けてそれぞれを呼び出して配置させるようにすると呼び出しだけ変えれば今のまま使えます。

function createSummaryAndThumbをfunction createSummaryとcreateThumbとしてsummary = imgtagだけを戻すようにしただけの簡単修正です。

<script type='text/javascript'>
img_thumb_width = 180; // Image Thumbnail Width
img_thumb_height = 180; // Image Thumbnail Height
summary_noimg = 53; // Length of Summary Text if no image is Used
summary_img = 53; // Length of Summary Text if post has Image Thumbnail
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="overflow:hidden; border: none; margin:0 15px 10px 0; float:left; max-height:'+img_thumb_height+'px;width:auto;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="auto"/></span>';
summ = summary_img;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}

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

function createThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="overflow:hidden; border: none; margin:0 15px 10px 0; float:left; max-height:'+img_thumb_height+'px;width:auto;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="auto"/></span>';
summ = summary_img;
}
div.innerHTML = imgtag;
}

テンプレート中の</head>の前にコピペしてサムネイルと抜粋する部分を変更します。

以前に追加・変更した部分からの違いは黄色でマーキングしました。

<b:if cond='data:blog.url != data:post.url'>
<div class='topindexContainer'>

<div expr:id='"thumbnail" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createThumb("thumbnail<data:post.id/>");
</script>

<b:if cond='data:post.title'>
<div class='topIndexText'>
<div class='topIndexTitle'>
<h3 class='topIndexTitle' itemprop='name'><a expr:href='data:post.link ? data:post.link : data:post.url'><data:post.title/></a></h3>
</div>
<b:if cond='data:post.link or (data:post.url and data:blog.url != data:post.url)'>
<div class='topIndexSnippet'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummary("summary<data:post.id/>");
</script>
<span class='jump-link' style='float:right;padding-top:20px;'><a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a></span>
</div>
<b:else/>
<h3 class='topIndexTitle' itemprop='name'><data:post.title/></h3>
</b:if>
</div>
</b:if>
</div>

サムネイル画像（アイキャッチ画像）のサイズ指定と抜粋文字指定

img_thumb_width = 180; // Image Thumbnail Width
img_thumb_height = 180; // Image Thumbnail Height
summary_noimg = 53; // Length of Summary Text if no image is Used
summary_img = 53; // Length of Summary Text if post has Image Thumbnail

画像サイズの指定と抜粋文字数はスクリプトの最初の部分で指定します。

・画像サイズを180pxサイズ
・抜粋文字数は53文字（２行に収まる文字数）

としました。

　基本パターンは、タイトル１行と抜粋２行で「もっと読む」を加えて表示するような設定としています。

　タイトルが長くなった場合は少し下に伸びます。

タイトルの文字色を変更

タイトル文字色は#33333（かなり濃いグレー）としています（黒に見えますが）。

メリハリがでたとおもいますよ。