.png)
Bloggerでリストページ時に記事サマリー＆画像サムネイル表示 では、Bloggerの管理ツールで投稿表示数をmaxResultsに合わせるという設定方法でした。
しかし、この状態だと一旦ブラウザに設定したページ分の文字や画像が全てロードされてから、サマリー表示用に変換されるので、不必要なローディングが多数発生してしまいます。
ローディングを極力抑えるために、投稿表示数の設定は１にしておき、Javascriptの変数maxResultsに設定した数だけフィードを取得し、必要のない画像ローディングをしないように修正してみました。
この機能は、ページナビゲーションを表示する関数内で呼び出される仕組みとなっています。
Blogger管理ツールで「レイアウト＞HTMLの編集」で、「<b:includable id='post' var='post'>」を検索し、そのタグ内を以下のソースを参考に修正して下さい。
※ 重要なのは、ID＝postの子に「post-header、post-body」が存在することです。
※ また、max-resultsの関係でラベルメニューGadgetsもVer1.03にする必要があります。
※ 画像につきましてはハイパーハンズに著作権がないものも在りますので、直リンクでそのまま使わず、ご自身で作成するなどして変更して使用するようにして下さい。
テンプレートのデザインによって様々ですが、複数見つかると思います。
これらは、すべてあるラベルのリストを表示するためのリンクとして動作していますが、高速化コードに対応するために１とします。
'data:label.url' を 'data:label.url + "?max-results=１"' へと全てを置換します。
大きめな画像を張り付けてあるページでは表示速度がかなり改善されるのではないでしょうか。
どうぞお試しあれ！
しかし、この状態だと一旦ブラウザに設定したページ分の文字や画像が全てロードされてから、サマリー表示用に変換されるので、不必要なローディングが多数発生してしまいます。
ローディングを極力抑えるために、投稿表示数の設定は１にしておき、Javascriptの変数maxResultsに設定した数だけフィードを取得し、必要のない画像ローディングをしないように修正してみました。
この機能は、ページナビゲーションを表示する関数内で呼び出される仕組みとなっています。
Blogger管理ツールで「レイアウト＞HTMLの編集」で、「<b:includable id='post' var='post'>」を検索し、そのタグ内を以下のソースを参考に修正して下さい。
※ 重要なのは、ID＝postの子に「post-header、post-body」が存在することです。
※ また、max-resultsの関係でラベルメニューGadgetsもVer1.03にする必要があります。
<b:includable id='post' var='post'>
<div class='post' id='post'>
<div class='post-header' id='post-header'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title' id='post-title'>
<a expr:href='data:post.url'><data:post.title/></a>
</h3>
</b:if>
<div class='post-body' id='post-body'>
<data:post.body/>
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:post.labels'>
<h5 class='label-recent-post-header'>関連記事</h5>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.name'>
<div class='label-recent-post' expr:id='data:label.name + "-recent-post"'>
<data:label.name/>
</div>
</b:if>
</b:loop>
</b:if>
</b:if>
</div>
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"' expr:title='data:post.title'>
<data:post.jumpText/>
</a>
</div>
</b:if>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
</b:includable>
次に、「レイアウト＞ページの要素」でJavascript&HTMLガジェットを追加し、以下のソース＆CSSをペーストします。
※ 画像につきましてはハイパーハンズに著作権がないものも在りますので、直リンクでそのまま使わず、ご自身で作成するなどして変更して使用するようにして下さい。
<style type='text/css'>
.blog-pager{
border: 0px solid red;
}
.blog-pager table{
padding: 0px;
margin-left: auto;
margin-right: auto;
border: 0px solid blue;
}
.blog-pager tr{
padding: 0px;
margin: 0px;
border: none;
}
.blog-pager td{
padding: 0px;
margin: 0px;
align: center;
vertical-align: middle;
border: 0px solid green;
}
.headPager{
display: block;
padding-right: 8px;
border: 0px solid black;
}
.headPager a:hover{
font-weight: bold;
text-decoration: none;
color: darkblue;
}
#prevPageLink,#nextPageLink{
margin-top: 4px;
padding: 0px;
border: 0px solid black;
}
.pageLink ,.currentPageLink{
text-align: center;
padding: 0px;
margin: 0px;
border: 0px solid red;
}
.currentPageLink {
text-decoration: none;
padding: 7px 12px 7px 12px;
margin: 0px;
color: white;
font-weight: bold;
text-decoration:none;
border: 0px solid blue;
background: url(http://lh6.ggpht.com/_BdRZoJ1uqRY/S8ay2e9Wo0I/AAAAAAAABaY/y6NRdxWJwic/s128/currentPage.png) no-repeat;
}
.currentPageLink:hover{
color: white;
text-decoration: none;
}
.pageLink{
padding: 7px 12px 7px 12px;
margin: 0px;
color: blue;
text-decoration: none;
border: 0px solid blue;
background: url(http://lh5.ggpht.com/_BdRZoJ1uqRY/S8ay2dgBFBI/AAAAAAAABag/H_nPzqdr8U8/s128/itemPage.png) no-repeat;
}
.pageLink:hover{
color: darkblue;
font-weight: bold;
text-decoration: none;
background: url(http://lh3.ggpht.com/_BdRZoJ1uqRY/S8ay2T0no-I/AAAAAAAABac/yo34eSyVgYY/s128/hoverPage.png) no-repeat;
}
// ヘッドライン
.headline{
-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);
}
.headline{
margin:20px;
padding: 20px;
font-size: 15px;
border-radius:10px;
-webkit-border-radius: 10px; /* Safari、Google Chrome */
-moz-border-radius: 10px; /* Firefox */
background: beige;
border: 1px solid #black;
-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);
}
.headline li{
list-style: url(http://lh6.ggpht.com/_BdRZoJ1uqRY/S7XhO_pFrbI/AAAAAAAABQo/MH-fwAFdODw/s128/ico_dots7_4.gif);
}
.headline abbr{
margin-left: 5px;
}
.headline h2{
margin-top: 0px;
color: #ff5555;
text-shadow: 2px 2px 3px #550000;
}
.headline h5{
margin-top: 0px;
margin-left:20px;
border-bottom:3px double #112299;
color: #1133aa;
font-size:18px;
font-weight: bold;
text-shadow: 2px 2px 2px silver;
}
.headline .Temporary{
line-height: 40px;
}
.headline .updated{
color: #3355ff;
font-size:10px;
font-weight: bold;
}
.headline .title{
margin-left: 5px;
font-size:13px;
color: #11cc33;
//text-shadow: 1px 1px 2px #000000;
}
.headline .commentCount{
margin-left:5px;
font-size:13px;
color: #ff3355;
font-weight: bold;
}
.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;
}
#readmore{
margin:50px 20px 30px;
float: right;
}
</style>
<script type='text/javascript'>
<!--
//--------------------------------------------
// 簡単Pageナビ for Blogger Ver1.00
// ハイパーハンズへのリンク部分は
// 修正・削除をしないでご利用下さい。
//
// License agreement with GNU LGPL
// This code Created by S.Kobayashi
// Copyright (C) 2010 Hyperhands.com
//--------------------------------------------
var blogUrl = "/";
var currentUrl = location.href;
var maxResults = 5;
var maxHeadlines = 10;
var maxLinks = 10;
var isHome=false;
var isLabel=false;
var isStatic=false;
var isItem=false;
var labelPrefix = "search/label/";
var pageNo = 0;
var feedUrl = blogUrl + "feeds/posts/summary/";
var headlineUrl = blogUrl + "feeds/posts/summary/";
var labelName = "";
var headlineID = 'headline-updated';
var blogPagerID = 'blog-pager';
var blogPager;
var nextImg = [
'http://lh4.ggpht.com/_BdRZoJ1uqRY/S8a-Ol-f2WI/AAAAAAAABas/R53PdkxwHoE/s128/nextPage.png',
'http://lh4.ggpht.com/_BdRZoJ1uqRY/S8a-O57iR7I/AAAAAAAABaw/dLBx22puDqQ/s128/nextHover.png'
];
var prevImg = [
'http://lh4.ggpht.com/_BdRZoJ1uqRY/S8a-Og6H_9I/AAAAAAAABao/LpDYqkrlmMw/s128/prevPage.png',
'http://lh6.ggpht.com/_BdRZoJ1uqRY/S8a-OhetXMI/AAAAAAAABak/kY-k_7bcJUw/s128/prevHover.png'
];
var readmoreImg = [
'http://lh6.ggpht.com/_BdRZoJ1uqRY/S9Hz7xppMJI/AAAAAAAABdQ/l-1nPh36B1U/s64/readmore.png',
'http://lh4.ggpht.com/_BdRZoJ1uqRY/S9Hz7_KzMXI/AAAAAAAABdU/du6A8z8gYEg/s64/readmore-hover.png'
];
function startBlogPager(){
if( currentUrl.indexOf("#PageNo=" ) > -1){
var strNo = currentUrl.substring( currentUrl.indexOf("#PageNo=" )+8);
pageNo = parseInt( strNo )-1;
}
if ( currentUrl.indexOf( labelPrefix ) > -1 ){
isLabel=true;
} else if( currentUrl.indexOf( '.html' ) == -1 ){
isHome=true;
} else if( currentUrl.indexOf( '/p/' )> -1){
isStatic=true;
} else {
isItem=true;
}
viewPager();
}
function viewPager(){
try{
blogPager = document.getElementById( blogPagerID );
if( blogPager == undefined ){
alert( 'blogPagerID = ' + blogPagerID );
}else{
if( isItem ){
var div = document.getElementById( 'post-body' );
createShadow( div );
}else if( isLabel || isHome ){
blogPager.innerHTML = '';
var t = document.createElement( 'table' );
var tr = document.createElement( 'tr' );
t.appendChild( tr );
blogPager.appendChild( t );
blogPager = t;
if( isLabel ){
var st = currentUrl.indexOf( labelPrefix ) + labelPrefix.length;
labelName = currentUrl.substring( st );
if( labelName.indexOf("/") > -1){
labelName = labelName.substring(0,labelName.indexOf("/"));
}else if( labelName.indexOf("?") > -1 ){
labelName = labelName.substring(0,labelName.indexOf("?"));
}
feedUrl += "-/" + labelName;
headlineUrl += "-/" + labelName;
blogUrl += labelPrefix + labelName + "?";
}else{
blogUrl = blogUrl + "search?";
}
feedUrl = feedUrl + "?orderby=published";
headlineUrl = headlineUrl + "?orderby=updated";
blogUrl += "orderby=published&max-results=" + '1' ;
feedUrl += ("&max-results=" );
headlineUrl += ("&max-results=" );
var srcStr = (feedUrl + maxResults + "&alt=json-in-script&callback=viewPageNavigation");
var s = createScript( srcStr );
blogPager.appendChild( s );
}
}
}catch( e ){
alert( e );
}
}
function appendTD( obj , className ){
var td = document.createElement( 'td' );
if( className != undefined ) td.setAttribute( 'class', className );
td.appendChild( obj );
blogPager.appendChild( td );
}
function createScript( srcStr ){
var s = document.createElement( 'script' );
s.setAttribute( 'type', 'text/javascript' );
s.setAttribute( 'src', srcStr );
return s;
}
function viewPageNavigation( result ){
var feed = result.feed;
var totalResults = parseInt(feed.openSearch$totalResults.$t, 10);
var startIndex = parseInt(feed.openSearch$startIndex.$t, 10);
var itemsPerPage = parseInt(feed.openSearch$itemsPerPage.$t, 10);
var totalPage = parseInt(totalResults / maxResults );
if( (totalResults % maxResults ) > 0){
totalPage += 1;
}
var head = document.createElement( 'span' );
head.setAttribute( 'class', 'headPager' );
var txt = 'Pages( ' + totalPage + ' )';
var ab = document.createElement( 'abbr' );
ab.setAttribute( 'title', 'あなたのBloggerにも簡単Pageナビを追加\r\n -- Powered by Hyperhands');
var a = document.createElement( 'a' );
a.setAttribute( 'href', 'http://aspnet.hyperhands.com/2010/04/blogger_14.html' );
a.setAttribute( 'target', '_blank' );
a.setAttribute( 'style', 'background:url(http://lh4.ggpht.com/_BdRZoJ1uqRY/S8Txk6oMcBI/AAAAAAAABZM/xSSIJDiRbBs/ico_opwin7b.gif) no-repeat;padding-left:15px;' );
a.appendChild( document.createTextNode( txt ) );
ab.appendChild( a );
head.appendChild( ab );
appendTD( head );
if( pageNo > 0 ){
getPrevNext("Prev");
}
var startPage = pageNo;
var endPage= pageNo + maxLinks;
var offset = parseInt( maxLinks / 2 );
if( endPage > totalPage){
if( endPage - totalPage > offset ) offset = endPage - totalPage;
for(i=0; i < offset; i++ ){
if( endPage == totalPage ) break;
if( startPage > 0) startPage--;
endPage--;
}
}else{
for(i=0; i < offset; i++ ){
if( startPage == 0 ) break;
if( startPage > 0) startPage--;
endPage--;
}
}
for(i=startPage; i < endPage; i++){
getHeadline( i );
var className = 'pageLink';
var srcStr = feedUrl + 1 + '&start-index=';
var redirect = 'redirectTargetPage';
if( pageNo == i){
className = 'currentPageLink';
srcStr = srcStr.replace( 'summary', 'default' );
srcStr = srcStr.replace( 'max-results=1', 'max-results=' + maxResults );
redirect = 'redirectCurrentPage';
}
var targetIndex = ( maxResults * i );
if( targetIndex == 0 ) targetIndex = 1;
srcStr += ( targetIndex + '&alt=json-in-script&callback=' + redirect );
var script = createScript( srcStr );
var a = document.createElement( 'a' );
var id = 'targetPageLink' + targetIndex;
a.setAttribute( 'id', id );
a.setAttribute( 'class', className );
a.appendChild( document.createTextNode( i+1 ) );
if( script != undefined ) blogPager.appendChild( script );
appendTD( a );
}
if( pageNo<(totalPage-1)){
getPrevNext("Next");
}
}
function getHeadline( i ){
try{
if(i==0){
var div = document.getElementById( headlineID );
if( div != undefined ){
var srcStr = headlineUrl + maxHeadlines + "&alt=json-in-script&callback=viewHeadline";
blogPager.appendChild( createScript( srcStr ) );
}
}
}catch( e ){
alert( e );
}
}
function viewHeadline( result ){
try{
var div = document.getElementById( 'headline-updated');
if( div != undefined ){
var idPrefix = '.post-';
var feed = result.feed;
if( feed.entry.length > 0 ){
var h5 = document.createElement( 'h5' );
var prefix = "";
//if( isHome ) prefix = "このサイト";
if( isLabel ) prefix = decodeURI( labelName ) + " で";
h5.appendChild( document.createTextNode( prefix + '最近更新のあった記事 ' + feed.entry.length+ '件' ));
div.appendChild( h5 );
var ul = document.createElement( 'ul' );
div.appendChild( ul );
for( var i=0; i< feed.entry.length; i++){
var entry = feed.entry[i];
var h = document.createElement( 'li' );
h.setAttribute( 'class', 'updatedHeadline' );
var id = entry.id.$t;
id = id.substring( id.indexOf( idPrefix ) + idPrefix.length );// 将来のコメントHeadline化で使用する
h.setAttribute( 'id', 'uHeadline-' + id );
var d = document.createElement( 'span' );
d.setAttribute( 'class', 'updated' );
var upd = entry.updated.$t;
var monthDay = upd.substring(5,10).replace('-','/');
var time = upd.substring(10,16).replace('T',' ');
d.appendChild( document.createTextNode( monthDay + time ) );
h.appendChild( d );
var t = document.createElement( 'a' );
t.setAttribute( 'class', 'title' );
t.setAttribute( 'href', getLink( entry ) );
var title = entry.title.$t;
var abbr = document.createElement( 'abbr' );
abbr.setAttribute( 'title', '記事を表示するリンク' );
abbr.appendChild( document.createTextNode( title ) );
t.appendChild( abbr );
// コメントカウント
for(var j=0; j< entry.link.length; j++){
var link = entry.link[j];
if( link.rel == 'replies' ){
if( link.title.indexOf( ' 件のコメント' ) > -1){
var commentCount = link.title.substring( 0, link.title.indexOf( ' ' ) );
if( commentCount != '0' ){
var c = document.createElement( 'a' );
c.setAttribute( 'class', 'commentCount' );
c.setAttribute( 'href', link.href );
var ab = document.createElement( 'abbr' );
ab.setAttribute( 'title', 'コメントを表示するリンク' );
ab.appendChild( document.createTextNode( '[ ' + commentCount + ' ]' ) );
c.appendChild( ab );
t.appendChild( c );
}
}
}
}// j loop
h.appendChild( t );
ul.appendChild( h );
}// i loop
}
}
}catch( e ){
alert( e );
}
}
function getPrevNext(vector){
try{
var startIndex = 0;
if( vector.toLowerCase() == "prev" ){
startIndex = ((pageNo-1) * maxResults + 1);
}else{
startIndex = ((pageNo+1) * maxResults);
}
var imgArr = prevImg;
if( vector.toLowerCase() == 'next' ) imgArr = nextImg;
var id = vector.toLowerCase() + 'PageLink';
var img = createImageHover( imgArr , id );
var a = document.createElement( 'a' );
a.setAttribute( 'href', 'javascript:void();' );
a.appendChild( img );
appendTD( a );
var srcStr = feedUrl + 1 + '&start-index=' + startIndex + '&alt=json-in-script&callback=' + vector.toLowerCase() + 'RedirectPage';
blogPager.appendChild( createScript( srcStr ) );
}catch( e ){
alert( e );
}
}
function createImageHover( imgArr , id ){
var img ;
try{
img = document.createElement( 'img' );
if( id != undefined ) img.setAttribute( 'id', id );
img.setAttribute( 'src', imgArr[0] );
img.setAttribute( 'onMouseOver', 'this.src="' + imgArr[1] + '";' );
img.setAttribute( 'onMouseOut', 'this.src="' + imgArr[0] + '";' );
}catch( e ){
alert( e );
}
return img;
}
function prevRedirectPage( result ){
try{
var targetLink = document.getElementById( 'prevPageLink' );
var date = encodeDate( result.feed.entry[0].published.$t );
var hrefStr;
if( pageNo == 1) hrefStr = blogUrl + '#PageNo=1';
else hrefStr = blogUrl + '&updated-max=' + date + '#PageNo=' + pageNo ;
addEventImage( targetLink, 'onClick', hrefStr );
}catch( e ){
alert( e );
}
}
function nextRedirectPage( result ){
try{
var targetLink = document.getElementById( 'nextPageLink' );
var date = encodeDate( result.feed.entry[0].published.$t );
var hrefStr = blogUrl + '&updated-max=' + date + '#PageNo=' + (pageNo + 2);
addEventImage( targetLink, 'onClick', hrefStr );
}catch( e ){
alert( e );
}
}
function addEventImage( targetImage, event, hrefStr ){
try{
var scriptStr = 'location.href = "' + hrefStr + '";';
targetImage.setAttribute( event, scriptStr );
}catch( e ){
alert( e );
}
}
function redirectTargetPage( result ){
var startIndex = parseInt(result.feed.openSearch$startIndex.$t, 10);
var targetPage = parseInt( startIndex / maxResults );
var targetLink = document.getElementById( 'targetPageLink' + startIndex );
var feed = result.feed;
var date = encodeDate( feed.entry[0].published.$t );
if( startIndex == 1) targetLink.href = blogUrl + '#PageNo=' + targetLink.innerHTML;
else targetLink.href = blogUrl + '&updated-max=' + date + "#PageNo=" + targetLink.innerHTML;
}
function redirectCurrentPage( result ){
try{
var startIndex = parseInt(result.feed.openSearch$startIndex.$t, 10);
var targetLink = document.getElementById( 'targetPageLink' + startIndex );
if( targetLink.getAttribute( 'class' ) == 'currentPageLink' ) viewSummaries( result );
}catch( e ){
alert( 'redirectCurrentPage\r\n' + e );
}
}
function viewSummaries( result ){
try{
var entries = result.feed.entry;
var item;
var items = new Array();
for( var i=0; i< entries.length; i++){
var entry = entries[i];
item = getSummary( entry );
if( item != undefined ) items[ items.length ] = item.innerHTML;
}
if( items.length > 0 ){
item = document.getElementById( 'post' );
item.innerHTML = items.join( '');
//alert( item.innerHTML );
}
}catch( e ){
alert( 'viewSummaries\r\n' + e );
}
}
function getSummary( entry ){
var item;
try{
item = document.getElementById( 'post' );
if( item != undefined ){
var pHead = document.getElementById( 'post-header' );
var pTitle = document.getElementById( 'post-title' );
var a = document.createElement( 'a' );
a.setAttribute( 'href', getLink( entry ) );
a.appendChild( document.createTextNode( entry.title.$t ) );
pTitle.innerHTML = '';
pTitle.appendChild( a );
var pBody = document.getElementById( 'post-body' );
var dummy = document.createElement( 'span' );
dummy.innerHTML = entry.content.$t;
dummy = createSummaryAndThumb( dummy );
pBody.innerHTML = dummy.innerHTML;
}
}catch( e ){
alert( 'getSummary\r\n' + e );
}
return item;
}
function getLink(entry){
var link = '';
try{
for(var i=0; i<entry.link.length; i++ ){
if( entry.link[i].rel == 'alternate' ){
link = entry.link[i].href;
}
}
}catch( e ){
alert( 'getLink()' + e );
}
return link;
}
function encodeDate(dateStr){
dateStr = dateStr.substring(0, 19) + dateStr.substring(23, 29);
return encodeURIComponent( dateStr );
}
//--------------------------------------------------------------------
var isMSIE = /*@cc_on!@*/false;
summary_noimg = 300;
summary_img = 200;
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(item, summary_noimgLen, summary_imgLen , sizeOuter, size ){
var summary;
try{
var div = document.getElementById( 'post-body' );
var link = document.getElementById( 'post-title' ).getElementsByTagName( 'a' )[0].href;
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 = item.getElementsByTagName("img");
if(imgs.length>0){
// FeedSummaryに含まれるGoogleトラックイメージを除外
if( imgs[0].src.indexOf( 'https:' ) == -1){
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( item.innerHTML, summ ) ;
//item.innerHTML = "";
var summary = document.createElement( 'span' );
summary.setAttribute( 'class', 'entry-body-thumbnail' );
if( image != undefined ) summary.appendChild( image );
var sText = document.createElement( 'span' );
sText.innerHTML = noTag;
sText.setAttribute( 'class', 'desc' );
summary.appendChild( sText );
summary.innerHTML = attachBrowser( summary.innerHTML );
var img = createImageHover( readmoreImg, 'readmore' );
var readmore = document.createElement( 'a' );
readmore.setAttribute( 'href', link );
readmore.appendChild( img );
summary.appendChild( readmore );
}catch( e ){
alert( 'createSummaryAndThumb()\r\n' + e );
}
return summary;
}
function createShadow(div){
if( div == undefined ) return;
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');
}
div.innerHTML = attachBrowser( div.innerHTML);
}
function attachBrowser( str ){
str = str.replace( /@VS/g, '<abbr title="MicrosoftのVisualStudio2008やVisualWebDebelopper2008などの開発ツール"><span class="vs">DevTool</span></abbr>' );
str = str.replace( /@Blogger/g, '<abbr title="Google無料ブログツール"><span class="blogger">Blogger</span></abbr>' );
str = str.replace( /@Chrome/g, '<span class="chrome">Chrome</span>' );
str = str.replace( /@Explorer/g, '<span class="explorer">Explorer</span>' );
str = str.replace( /@IE/g, '<span class="explorer">Explorer</span>' );
str = str.replace( /@Safari/g, '<span class="safari">Safari</span>' );
str = str.replace( /@Firefox/g, '<span class="firefox">Firefox</span>' );
str = str.replace( /@Opera/g, '<span class="opera">Opera</span>' );
return str;
}
function transparentIFrame(){
var iframes = document.getElementsByTagName('iframe');
for(var i=0;i<iframes.length;i++) {
var iframe = iframes[i];
iframe.allowTransparency = true;
try {
// 別ドメインのiframeはアクセス不能なので高さ設定できません。
var doc = iframe.contentWindow.document.documentElement;
var body = iframe.contentWindow.document.body;
var fitHeight = 0;
if( isMSIE ) {
if( navigator.userAgent.toLowerCase().replace( /\s/g, '' ).indexOf( 'msie6' ) > -1 ) {
fitHeight = body.scrollHeight;
} else {
fitHeight = doc.scrollHeight;
}
} else {
fitHeight = doc.offsetHeight;
}
iframe.style.height = fitHeight + 'px';
} catch( e ) {
/* skip process */
}
}
}
window.onload = transparentIFrame;
startBlogPager();
-->
</script>
次に、テンプレートHtml内で「'data:label.url'」として記載されている部分の修正をします。テンプレートのデザインによって様々ですが、複数見つかると思います。
これらは、すべてあるラベルのリストを表示するためのリンクとして動作していますが、高速化コードに対応するために１とします。
'data:label.url' を 'data:label.url + "?max-results=１"' へと全てを置換します。
大きめな画像を張り付けてあるページでは表示速度がかなり改善されるのではないでしょうか。
どうぞお試しあれ！
関連記事
Blogger
サマリー表示
ページング
コメント(1)
複数の画像がある記事では、Blogger基本機能のRead More用分割を挿入することで、１記事だけ一旦全てが表示されてしまうのを防げます。
少々面倒ですが、新しく記事を投稿するときに気をつければ済む話なので我慢して作業するしかないですね。
コメントを投稿