Bloggerでサマリー表示をタイル形式（ネットショップ風）にする②

適用方法

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

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

<style type='text/css'>
/*Post*/
.entry-body-thumbnail{
 margin: 5px;
 border:1px solid gray;
 width: 200px;
 height: 300px;
 overflow: hidden;
 float: left;
}

.entry-body{
 margin: 0;
 border:0px solid gray;
 width: 100%;
 height: 100%;
 overflow: visible;
 float: left;
}

.post-header{
 height: 45px;
 padding: 3px;
 border-left: 5px solid #999999;
 border-right: 5px solid #999999;
 background-color:#aaaaaa;
 /* For WebKit (Safari, Google Chrome etc) */
 background: -webkit-gradient(linear, left top, left bottom, from(#eeeeee), to(#aaaaaa));
 /* For Mozilla/Gecko (Firefox etc) */
 background: -moz-linear-gradient(top, #eeeeee, #dddddd);
 /* For Internet Explorer 5.5 - 7 */
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#eeeeee, endColorstr=#aaaaaa);
 /* For Internet Explorer 8 */
 -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#eeeeee, endColorstr=#aaaaaa)";
}

.post-header h3 {
 padding-left: 10px;
 margin: 5px;
}

.post-header h3 a, .post-header h3 a:visited, .post-header h3 strong {
 display:block;
 text-decoration:none;
 color: white;
 text-shadow: 1px 1px 3px #000000; 

 font-size: 15px;
 font-family: Times New Roman, Georgia, Trebuchet MS;
 font-weight: bold;
}
/*枠あり&#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{
 display: block;
 margin: 10px;
 margin-left: auto;
 margin-right: auto;
  -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{
 width: 100%;
 border:1px solid blure;
}

.desc{
 margin: 10px;
 border:1px solid skyblure;
}

</style>
<script type='text/javascript'>
<!--
var isMSIE = /*@cc_on!@*/false;
summary_noimg = 350;
summary_img = 250;
img_thumb_size = 144;
img_outer_size = 170;
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, summary_noimgLen, summary_imgLen , sizeOuter, size ){

 try{
  var post = document.getElementById(pID);
  var div;
  var link;

  var children = post.getElementsByTagName( 'div' );
  for( var i=0; i < children.length; i++){
    var className = children[ i ].getAttribute( 'class' );
    switch( className ){
      case 'post-body':
        div = children[ i ];
        break;
      case 'post-header':
        link = children[ i ].getElementsByTagName( 'h3' )[0].getElementsByTagName( 'a' )[0].href;
        break;
    }
  }
  if( div == undefined ) return;

  if( summary_imgLen != undefined ) summary_img= summary_imgLen ;
  if( summary_noimgLen != undefined ) summary_noimg= summary_noimgLen;
  if( sizeOuter != undefined ) img_outer_size = sizeOuter;
  if( size != undefined ) img_thumb_size = size;

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

    var img = document.createElement( 'img' );
 
    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' );
  post.setAttribute( 'class', 'entry-body-thumbnail' );
  if( image != undefined ) summary.appendChild( image );
  var sText = document.createElement( 'div' );
  sText.innerHTML = noTag;
  sText.setAttribute( 'class', 'desc' );

  summary.appendChild( sText );
  div.appendChild( summary );
  
 }catch( e ){
  alert( e );
 }
}

function createShadow(pID){
  var post = document.getElementById(pID);
  var div;
  var children = post.getElementsByTagName( 'div' );
  for( var i=0; i < children.length; i++){
    if( children[ i ].getAttribute( 'class' ) == 'post-body' ){
      div = children[ i ];
      break;
    }
  }
  if( div == undefined ) return;
  post.setAttribute( 'class', 'entry-body' );

 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');
 }
}

-->
</script>

次に、タイトルと記事ボディ、フッターの階層構造を変えるために、「<b:includable id='post' var='post'>」を検索し、このタグの中身を以下のコードを参考に構造を書き換えます。
※　関連記事のコードは除外してありますので、他のサイトを参照して下さい。

  
<b:includable id='post' var='post'>
  <div class='post' expr:id='&quot;summary&quot; + data:post.id'>
    <div class='post-header' name='post-header'>
      <b:if cond='data:post.title'>
        <h3 class='post-title' name='post-title'>
          <b:if cond='data:post.url'>
            <a expr:href='data:post.url' name='post-link'><data:post.title/></a>
          <b:else/>
            <data:post.title/>
          </b:if>
        </h3>
      </b:if>
    </div>

    <div class='post-body'><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;, 150,60, 170, 144);
        </script>
      </b:if>
    <b:else/>
       <script type='text/javascript'>
         createShadow(&quot;summary<data:post.id/>&quot;);
       </script>
    </b:if>

    <div class='post-footer'>
      <span class='post-icons'>
        <!-- email post links -->
        <b:if cond='data:post.emailPostUrl'>
          <span class='item-action'>
            <a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>
              <img alt='' class='icon-action' height='13' src='http://www.blogger.com/img/icon18_email.gif' width='18'/>
            </a>
          </span>
        </b:if>

        <!-- quickedit pencil -->
        <b:include data='post' name='postQuickEdit'/>
      </span>
    </div>

    <div style='clear: both;'/> <!-- clear for photos floats -->
    
  </div>
</b:include>

ちなみに、個別記事ページ(item)の画像は枠付きになります。

この記事へのリンク記事を自身のBloggerへ作成する

関連記事

Blogger

Javascript

サマリー表示