ブロガーでブログを書いていて追記を自動で挿入してくれたらいいのになぁと思っている人は意外に多いのではないでしょうか。もしくは、「だいだい何文字で追記を入れて欲しい」などなど。今回はサムネイルの自動表示と記事冒頭での強制追記の方法について参考になったサイトがあったので補足しながらお教えします 今まではＨＴＭＬとＣＳＳを駆使して記事冒頭に画像を用意し、自分で冒頭文を書いたのちに追記コードを挿入していました。
しかし今回ご紹介する方法ではそれらの手間がなくなり、ブログＴＯＰページに統一感が生まれます。
参考にしたサイトはこちらです。
記事リンクBloggerでReadMoreを自動でつける
記事リンクbloggerに自動readmore(もっと読む)を導入して読み込み速度を上げる
※茄子さんのＨＴＭＬを挿入したらエラーが発生したのでこの記事内で修正しております。
自動で続きを読むを入れよう
まずはお決まりのウィジェットテンプレートを展開します。続いて</head>を検索、そのすぐ前にスクリプトをいれます。<script type='text/javascript'>var thumbnail_mode = "no-float" ;
summary_noimg = 200;
summary_img = 120;
img_thumb_height = 200;
img_thumb_width = 200;
</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="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>
次に参考サイトでは”<data:post.body/>を検索、2つ目の方に下記コードを置換”とありましたが、私のブログでは色々いじりすぎて <data:post.body/>が大量にありました。それに３つか４つ目の <data:post.body/>を置換しても上手くいかなかったので
<div style='clear: both;'/> <!-- clear for photos floats -->の手前にある
<data:post.body/> を下記コードに置換しました。
<!--readmore-->
<b:if cond='data:blog.pageType == "static_page"'>
<br/>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'>
<data:post.body/>
</div>
<script type='text/javascript'>
createSummaryAndThumb("summary<data:post.id/>");
</script>
<span class='rmlink' style='float:right;padding-top:20px;'>
<a expr:href='data:post.url'>続きを読む>></a>
</span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
</b:if>
<!--readmore end-->
<data:post.body/>を消してその位置に上記コードを入れれば完了です。
<!--readmore-->
<b:if cond='data:blog.pageType == "static_page"'>
<br/>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'>
<data:post.body/>
</div>
<script type='text/javascript'>
createSummaryAndThumb("summary<data:post.id/>");
</script>
<span class='rmlink' style='float:right;padding-top:20px;'>
<a expr:href='data:post.url'>続きを読む>></a>
</span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
</b:if>
<!--readmore end-->
<data:post.body/>を消してその位置に上記コードを入れれば完了です。
さらに編集したい
サムネイルの大きさや文字の量などを調整したい場合には以下の箇所を変更すればいいです。
summary_noimg = 200;
summary_img = 120;
img_thumb_height = 200;
img_thumb_width = 200;
このへんの数字を適当にいじくりまわしたら色々変更できました。
summary_img = 120;
img_thumb_height = 200;
img_thumb_width = 200;
このへんの数字を適当にいじくりまわしたら色々変更できました。
画像をサムネイルで表示したい
上記のようにカスタマイズすれば自動で左端に表示されるようになります。記事冒頭に画像を用意しなくても自動でやってくれるので便利です。
ちなみにこのブログでは今まで手動で入力していた追記タグを除去していないため、続きを読むが二重表示されていますが気になる人は地道に消してください。
<span class='rmlink' style='float:right;padding-top:20px;'>
続きを読むの配置などを編集したい場合は上記青地の箇所を変更してください。
<a expr:href='data:post.url'>続きを読む>></a>
続きを読むを画像にしたい場合などは上記青地の箇所にＩＭＧタグなどで装飾すればいいと思います。
summary_img = で検索すればもっと詳しく解説してくれているサイトがゴロゴロあるので検索してみてください。
