Snippetで自動区切り「もっと読む」表示が簡単 Blogger Auto Read-More with imge without Javascript

   前回は、トップページの記事の表示を自動区切りする方法を Javascript で実現したが、Snippet で実現する方が簡単で、軽そうである。

サム画像をクリックできる「もっと読む」の自動化

Snippet は、サイドバーなどに表示されている「人気の投稿」ガジェットで、記事の小さなサムネイル画像と最初の100文字ぐらいの本文が表示される。このサイトでもサイドバーにある。 Javascript 方式だと、全部の記事がダウンロードされてから、区切りを入れて表示されるので、重くなる。 Snippet 方式は表示される部分しかダウンロードされないので軽い。 Java script を無効にして表示を確認してみるには、Chrome - jsoff が便利。

トップページ Snippet 化の手順は次の通り。 A、大きな画像方式 B、小さな画像方式がある。 まずは、A方式。

Step 1  Blogger account にログインし、  Blogger ダッシュボードに行く

Step 2 テンプレート -> HTMLを編集に行く。全選択+コピーしてバックアップしておく。

Step 3  Ctrl F で   <data:post.body/> を検索見つける。

             2~3個見つかるかもしれないが、2個めに移動。

Step 4 <data:post.body/> を削除して、次のコードと置き換える。

<!-- 2個めの <data:post.body/> があったところ Read more http://www.technohalf.com/auto-read-more-with-large-big-thumbnail-without-javascript.html-->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div>
<b:if cond='data:post.firstImageUrl'>
<a expr:href='data:post.url'>
<img class='thumbnail' expr:alt='data:post.title' expr:src='data:post.firstImageUrl'/>
</a>
<b:else/>
<a expr:href='data:post.url'>
<img alt='no image' class='post-image' src='https://makotoiwasaki.com/wp-content/uploads/2015/11/mikan1x1.png'/>
</a>
</b:if>
<div class='snippet'>
<data:post.snippet/>
</div>
</div>
<div class='jump-link'>
<a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
<b:else/>
<data:post.body/>
</b:if>
<b:else/>
<data:post.body/>
</b:if>

Step 5 テンプレートを保存する。post-image' src= を画像がない記事の場合に表示される標準画像のURLと置き換える。Step 6 表示スタイルを整えるには、次のようなCSSコードを、テンプレートに追加する。 Ctrl F で   ]]></b:skin> を検索し、その直前に次のCSSコードを貼り付ける。

/* 画像を左寄せ */
.thumbnail {
  float: left;
  margin: 0 10px 10px 0;
}
.thumbnail {
text-align: justify;
}
.thumbnail {
position: relative; float:left; margin: 5px 10px 5px 0;
opacity:1;
filter:alpha(opacity=100);
-webkit-transition:all .4s ease-in-out;
-moz-transition:all .4s ease-in-out;
-o-transition:all .4s ease-in-out;
-ms-transition:all .4s ease-in-out;
transition:all .4s ease-in-out
}
.thumbnail:hover {
opacity:0.7;
filter:alpha(opacity=70);
-webkit-transition:all .4s ease-in-out;
-moz-transition:all .4s ease-in-out;
-o-transition:all .4s ease-in-out;
-ms-transition:all .4s ease-in-out;
transition:all .4s ease-in-out
}

/* 続きを読む */
.jump-link
{
float:right;
margin:1% 1%;
}
.jump-link a
{
text-align:center;
display:inline-block;
color:#FFFFFF;
margin:5px 4px 5px 10px;
padding:9px 10px 9px 10px;

background-color:#ff8c00;
text-decoration:none;
text-transform:uppercase;
box-shadow:4px 4px 0px rgba(33,33,33,0.45);
}
.jump-link a:hover
{
opacity:0.7;
filter:alpha(opacity=70);
-webkit-transition:all .4s ease-in-out;
-moz-transition:all .4s ease-in-out;
-o-transition:all .4s ease-in-out;
-ms-transition:all .4s ease-in-out;
transition:all .4s ease-in-out
}

 

B方式。小さなサム画像を表示する。 上のステップ4で、貼り付け挿入したコードを次と入れ替える。

Step 4B <data:post.body/> を削除して、次のコードと置き換える。

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<div>
<b:if cond='data:post.thumbnailUrl'>
<img class='post-image' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' width='72px' height='72px'/>
<b:else/>
<img class='post-image' alt='no image' src='http://1.bp.blogspot.com/-RqKvZTT_gGY/VVjvSQxK85I/AAAAAAAAAuM/iTdZ8KYSgiU/s1600/images9.png' width='72px' height='72px'/>
</b:if>
<data:post.snippet/>
</div>
<div class='jump-link'>
<a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
<b:else/>
<data:post.body/>
</b:if>
<b:else/>
<data:post.body/>
</b:if>

 

表示される文字数を増減するには?

上のStep 4 で、赤色でハイライトされた部分3行を次のコードと置き換える。

<div expr:id='&quot;summary&quot;   data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSnippet(&quot;summary<data:post.id/>&quot;);</script>

Ctrl F で </head> を検索し、その直前に次のコードを挿入する。

<script type='text/javascript'>
snippet_count = 500;

//<![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 createSnippet(pID){
var div = document.getElementById(pID);
var summ = snippet_count;
var summary = '<div class="snippets">'   removeHtmlTag(div.innerHTML,summ)   '</div>';
div.innerHTML = summary;
}
//]]>
</script>

snippet_count = 500; 500 を 300、200など、好みの文字数に変更する。

A方式では、いろいろなサイズ形の画像の縦横比が維持される。不揃いがいい。

  • Bloggerの「人気の投稿」ガジェット (=WordPressの popular posts) に表示されている記事の中に表示したくない記事がある場合、次のように除外設定をすることができる。 Step 1  Blogger account にログインし、  Blogger ダッシュボードに行く Step 2 テンプレート -> HTMLを編集に行く。全選択+コピーしてバックアップしておく。 Step 3  次のコードを見つける。 <b:includable id='main'>   <b:if cond='data:title'><h2><data:title/></h2></b:if>   <div cl...
  • Blogger からKusanagi-WordPress への移転が完了し、一段落したので、これまでの経緯を振り返り、次回のためのマニュアルとして記す。 BloggerからWordPressに移行決定。 Bloggerでも独自ドメインで運用していた。 WordPressでも同一ドメインで運用する。 使用中のお名前コムのVPSでセットアップ+インポートしてみたが、Blogger Importer Extended でのデーター削除+再インポートの試みが成功せず、Kusanagiサーバーを試してみる良い機会とした。 Kusanagi-WordPressが使えるサーバーを探す。 システム構成: WordPress 4.3 (KUSANAGI専用プラグイン同梱) ・CentOS 7・N...
  • Blogger に表を挿入するには、ExcelよりもGoogleDoc Spreadsheets からコピペした方が、書式が反映されやすい。 バンコクでミャンマーVISAをとるにはバンコクでミャンマーVISAをとるには3日かかる。1日目、ミャンマー大使館に午前9時から12時までの間に行く。写真2枚、パスポートのコピーが必要。館内でコピーできる。12時間際にギリギリついたら入れてもらえたが、待ち時間が長く、最後の最後になった。翌々日に取りに来いという引換券。カウンタ番号2に指定されている。13時30分に取りにいく。ここでも1時間は行列で待たされる。近くのビルにコワーキングスペースがあって、カフェ-がある。冷房効いてるので待機するのに良い所。信旅
  • 今時のCMSを調べてみると、Wordpress の他に、Concrete5 、Modx、Drupal 等があった。Concrete5 を使ってみることにした。 お名前コムVPS、CentOS Linux 7.1 +Webmin1.770+Mysql5.5.44+PHP 5.4.16 にConcrete5 をインストールしてみたら成功した。 めったにデーターベースの作成など、Mysqlをいじらない人にとっては、データーベースの作成、設定が一番とっつきにくいと思う。次の手順を踏めば簡単である。基本的にwordpress インストールの時と同じである。1. Mysql データベースの新規作成、ユーザー設定 いろいろな方法があるが、Webmin コントロールパネルから作成する。Web...
  • 支那ブロック回避対策でBloggerから引っ越しを検討する際に、あらためてVPSサービスの現状を調べてみた。 rootでログインできる自前サーバーである。 現在はお名前.com VPSを使用して、wordpressでサイト運営している。     これまで、アメリカのVPS、Osukini VPS、ServersMan@VPS、お名前.com VPS と経由してきた。 Osukini VPS はサービス中止で強制移転 DTIの ServersMan@VPS は変な制限が多くて使用に耐えない。DTIはSIMカードも悪どい儲け主義で辟易する。 DTI の ServersMan@VPS には変な制限がある ServersMan SIM Unlimited はボッタクアプリ   現在のお名前.com ...
  • このページのように、画像の右に文章を配置するには、ドラッグドロップで動かすだけではできなかった。Blogger 標準機能ではできない。(できる時とできない時がある。) HTMLの編集で、次のように赤文字を挿入する。 <img src="" style="float: left; margin: 10px;" width="337" />
  • Blogger のよいところはコンテンツが永遠に死なないだろうこと。 例えば、独自ドメインの管理ができなくなって、料金未納とかで登録解除されたとしても、Bloggerの標準アドレス、 blogspot.jp で表示され続けるであろうこと。作者が死んでも、本と同じようにずっとオンラインで参照され続けるということ。 広告収入などがあれば資産として、相続も可能になる。 このサイトは、 BloggerFree weblog publishing tool from Google, for sharing text, photos and video.macoiwa.blogspot.com でも表示できる。リダイレクト先ドメインが死...
  •  Blogger Blocked in ChinaBloggerの最大の問題は支那からアクセスできないことである。支那の人口13億人のアクセスがブロックされていることは大きい。支那語のサイトを作ってもアクセスされないということ。支那からアクセスできるかどうか、このサイトでチェックすることができる。イランも検閲しているが、このサイトではチェックできない。タイでは王様関連の問題で一部アクセスできない海外のサイトがあった。CA App Synthetic Monitor website monitoring service - Ping - IPv6 now supported, give it a shot!Test your ping. CA A...

blogger カテゴリ人気記事 Views most

タグ関連記事

閲覧履歴