• Bloggerでリストページ時に記事サマリー＆画像サムネイル表示

Bloggerでリストページ時に記事サマリー＆画像サムネイル表示

投稿者 hyperhands 時刻: 水曜日, 3月 24, 2010 カテゴリー , ,
ホーム（Home）やラベルページでは複数記事がリストされ、無駄にページが伸びて読みずらい事があります。

@Bloggerの設定で1ページに表示する記事数を１件に設定してしまえば、個別ページをラベルやHomeなどのリストページの意味がなくなってしまいます。
リストページ表示時には、サマリーとして記事内容の先頭何文字かだけ抜粋し簡素化して表示にした方がターゲットの記事が探しやすいでしょう。

という事で、サマリー表示のコードをGoogle検索で探しだして導入しておりました。
しかし、適用したコードでは以下の問題が気になりました。

  • 改行タグまで消去されてしまい読みづらい。
  • サムネイル画像の縦横比によってサマリー位置のズレが気になる。


この問題を解決するために、コードを改良して適用すると以下の表示のようになります。
サムネイル画像が縦長・横長でも位置ズレしない



対応ブラウザ
  • @IE
  • @Chrome
  • @Safari
  • @Firefox
  • @Opera

※　残念ながら、「@IE・Opera」ブラウザでは改行が残らない不具合があります。
※　ブラウザによって改行タグが大文字に変換されていたようでコードを修正して対応しました。（2010/03/27）

改良コード

<style type="text/css">
/*枠あり＆影つき*/
.shadow{
 border: 0px;
}

.shadow img{
 max-width: 520px; 
 border: 1px solid #a9a9a9!important; /* 画像の枠線 */
 position: relative;
 left: -5px; /* 画像を左へ移動 */
 top: -5px; /* 画像を上へ移動 */
 padding: 5px; /* 画像枠 （枠あり）*/
  margin: 15px; /* 余白*/
 background-color: #E0E0E0; /* paddingを設定した場合の背景色 */
}

.thumbnail{
  margin: 15px; /* 余白*/
 max-width: 300px; 
}
</style>

<script type="text/javascript">
//-------------------------------------
// Copyright (C) 2010 Hyperhands.com
// This code Created by S.Kobayashi
// License agreement with GNU LGPL
//-------------------------------------
summary_noimg = 350;
summary_img = 250;
img_thumb_size = 144;

function extractEnclosedString(st,ed,target,exclusion){
  if(target.indexOf( st )==-1)
  {
    st=st.toUpperCase();
    ed=ed.toUpperCase();
  }
  if(target.indexOf( st )!=-1)
  {
    var s = target.split( st );
    for(var i=0;i<s.length;i++){
      if(s[i].indexOf( ed )!=-1){
        var execute = true;
        if( exclusion != undefined ){
          if( s[i].substring(0,exclusion.length).toLowerCase() == exclusion.toLowerCase()){
              s[i] = st + s[i];
            
            execute = false;
          }
        }
        if( execute ) s[i] = s[i].substring(s[i].indexOf( ed ) + ed.length , s[i].length);
      }
    }
    target = s.join("");
  }
  
  return target;
}

function removeHtmlTag(target, len){

  target = extractEnclosedString( "<pre ", "pre>",target);
  target = extractEnclosedString( "<", ">", target, "br");
  
  return target.substring( 0,len ) + '...';
}
function changeImageSize( imgSrc , size ){
  var paths = imgSrc.split("/");
  switch( size ){
   case "s72":
   case "s144":
   case "s288":
   case "s512":
   case "s576":
   case "s640":
   case "s720":
   case "s800":
   case "s912":
   case "s1024":
   case "s1152":
   case "s1280":
   case "s1440":
   case "s1600":
     paths[ paths.length -2 ] = size ;
     break;
  }
  return paths.join("/");
}

function createSummaryAndThumb(pID){
  var div = document.getElementById(pID);
  var imgtag = "";
  var img = div.getElementsByTagName("img");
  var summ = summary_noimg;
  if(img.length>0) {
    imgtag =  "<span style='float:left;'><table style='border:0px'>"
           + "<tr style='border:0px'><td style='"
           + "height:" + img_thumb_size  +"px;"
           + "width:" + img_thumb_size *1.5 + "px;"
           + "align:center;valign:middle;border:0px;text-align:center;'>"
           + "<span class='shadow'>"
           + "<img class='thumbnail' src='"
           + changeImageSize( img[0].src , ("s" + img_thumb_size) )
           + "' /></span></td></tr></table></span>";
    summ = summary_img;
  }
  var noTag = removeHtmlTag(div.innerHTML, summ ) +"..." ;
  //noTag += noTag.length;
  var summary = "<div class='entry-body'>" + imgtag + "<div>" + noTag +"</div></div>";
  div.innerHTML = summary;

}

function createShadow(pID){
 var div = document.getElementById(pID);
 var imgtag = "";
 var a = div.getElementsByTagName("a");

 for(var i=0;i<a.length;i++) {
  var img = a[i].getElementsByTagName("img");
  if( img.length >0){
   a[i].outerHTML = "<span class='shadow'>"
                  + "<a href='" + a[i].href + "' target='_blank'><img src='"
                  + img[0].src + "' /></a></span>";

  }
 }
}
</script>
適用の方法は、Blogger管理ツールで「レイアウト＞Htmlの編集」メニューから、テンプレートのHTMLを編集します。
※　ウィジェットのテンプレートを展開をチェックしておきます。

「</head>」を検索し、その前に上記コードをコピー＆ペーストします。

そして、「<data:post.body/>」を検索し、以下のコードに書き換えれば動作します。

  
  <div expr:id="&quot;summary&quot; + data:post.id">
    <data:post.body/>
  </div>
  <b:if cond="data:blog.pageType != &quot;item&quot;">
    <b:if cond="data:blog.pageType != &quot;static_page&quot;">
      <script type="text/javascript">
        createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
      </script>
    </b:if>
  <b:else/>
    <script type="text/javascript">
      createShadow(&quot;summary<data:post.id/>&quot;);
    </script>
  </b:if>
ちなみに、個別記事ページ(item)の画像は枠付きになります。

関数バージョンUp・・・2010/04/10

画像の枠表示から、影表示に切り替えるため以下の２つの関数だけバージョンUpしました。
ちなみに、サムネイル画像の位置合わせはテーブル方式から画像サイズをJavascriptで取得し縦横比とサムネイル画像サイズで算出した４方向のPaddingを自動設定する方式に変更してあります。 

function createSummaryAndThumb(pID){

  var div = document.getElementById(pID);
  var summ = summary_noimg;
  var image;
  var imgs = div.getElementsByTagName("img");
  if(imgs.length>0){
    summ = summary_img;// イメージ有りの場合の文字列長にする
    image = document.createElement( 'span' );
    image.setAttribute( 'class', 'thumbnail-span' );

    var img = document.createElement( 'img' );
    var height = parseInt(imgs[0].height * img_thumb_size /imgs[0].width);
    var width = parseInt(imgs[0].width * img_thumb_size /imgs[0].width);
    var vPadding = parseInt((img_outer_size - height )/2);
    var hPadding = parseInt((img_outer_size - width )/2);
    img.setAttribute( 'style', 'background: #e0e0e0;margin-top:' + vPadding + 'px;margin-bottom:' + vPadding  + 'px;'
          + 'margin-left:' + hPadding + 'px;margin-right:' + hPadding  + 'px;height:' + (height ) + 'px;width:' + (width) + 'px;');
 
    var src = changeImageSize( imgs[0].src, 's' + img_thumb_size );
    img.setAttribute( 'src', src );
    img.setAttribute( 'class', 'shadowThumbnail');

    image.appendChild( img );
  }

  var noTag = removeHtmlTag(div.innerHTML, summ ) +"..." ;
  div.innerHTML ="";
  var summary = document.createElement( 'div' );
  summary.setAttribute( 'class', 'entry-body' );
  if( image != undefined ) summary.appendChild( image );
  var sText = document.createElement( 'div' );
  sText.innerHTML = noTag;
  summary.appendChild( sText );
  div.appendChild( summary );

}

function createShadow(pID){
 var div = document.getElementById(pID);
 var imgtag = "";
 var a = div.getElementsByTagName("a");

 for(var i=0;i<a.length;i++) {
  var imgs = a[i].getElementsByTagName("img");
  if( imgs.length >0){
   imgs[0].setAttribute( 'class', 'shadowImage' );
  }
  a[i].setAttribute( 'target', '_blank');
 }

}

対応CSS
スクリプトをバージョンUpしたら、CSSも以下の内容にアップデートして影設定を適用すると良いと思います。 
<style type='text/css'>
/*枠あり&#65286;影つき*/

.shadowImage{
  -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.6);
  -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.6);
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.6);
 filter:progid:DXImageTransform.Microsoft.Shadow(color=#999999,direction=135,strength=5);
 border:1px solid #999999;
 margin:30px;
 max-width: 500px;
}

.shadowThumbnail{
 float:left;
  -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.6);
  -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.6);
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.6);
 filter:progid:DXImageTransform.Microsoft.Shadow(color=#999999,direction=135,strength=3);
border:1px solid #999999;
 max-width: 170px; 
 max-height:170px;
}

.thumbnail-span{
 float:left;
 width: 170px;
 height: 170px;
 margin: 15px;
 //background: white;
 //border:4px ridge skyblue;
}

</style>

コメント(0)

コメントを投稿

関連記事
Blogger
Javascript
サマリー表示