サム画像をクリックできる「もっと読む」の自動化:Blogger Auto Readmore with clickable image thumbnail

トップページの表示方法を改造した。

自動的に全記事が短縮されて、「もっと読む」「全部表示する」リンクするようにした。
3つのサンプルのスクリプトで試してみたが、どれも見出しの画像、サムネイル画像(アイキャッチ画像)をクリックしてもリンクに飛ばない物足りなさがあった。
そこで、画像クリックできるようにした。

画像があって、クリックしてもどこにも飛ばないのは不自然であったが、それを飛べるようにした。標準コードで画像リンク化されていないのは不思議であった。

 

その手順は次の通り。

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 -->

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div class='swtSummary' expr:id='&quot;summary&quot;   data:post.id'><data:post.body/></div>


<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;,&quot;<data:post.url/>&quot;,&quot;<data:post.title/>&quot;);</script>
<div class='jump-link'>
<a expr:href='data:post.url   &quot;#more&quot;' expr:title='data:post.title'><span class='readmore' style='float:right;'><data:post.jumpText/></span></a>
</div>

</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
</b:if>
</b:if>

Step 5 Ctrl F で  </head> を検索し、見つける。

Step 6  </head> の直前に次のコードを貼り付ける。挿入する。
.

<!--Adding the Automatic Read more Button on Blogger -->
 <script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_img = 120;
summary_noimg = 200;
img_thumb_width = 320;
img_thumb_height = 213;
var summary_noimg = &quot;https://makotoiwasaki.com/wp-content/uploads/2015/11/empty1.gif&quot;;
</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, pURL, pTITLE){
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:0;margin:0"><a href="'  pURL  '" title="'  pTITLE '"><img src="' img[0].src '" width="' img_thumb_width 'px" height="' img_thumb_height 'px"/></a></span>';
summ = summary_img;
}
var summary = imgtag   '<div>'   removeHtmlTag(div.innerHTML,summ)   '</div>';
div.innerHTML = summary;
}

//]]>
</script> 


Step 7 テンプレートを保存する。
Step 8 スタイルを整えるには、次のようなCSSコードを、テンプレートに追加する。
Ctrl F で   ]]></b:skin> を検索し、その直前に次のCSSコードを貼り付ける。 

 

.swtSummary {
text-align: justify;
}
.swtSummary img {
position: relative; float:left; margin: 5px 10px 5px 0;
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
}
.swtSummary img:hover {
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

/* 続きを読む */
.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;
font:100% 'Oswald',Sans-Serif;
background-color:#ff8c00;
text-decoration:none;
text-transform:uppercase;
box-shadow:4px 4px 0px rgba(33,33,33,0.45);
}
.jump-link a:hover
{
background-color:#adff2f;
color:#FFFFFF;
}

 

Step 9  Ctrl F で  <div class='jump-link'> を検索し、次の5行のコードを削除する。

 

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url   &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
</b:if>

以上で、テンプレートを保存する。
サンプルのトップページ。


Step 10  トップページに表示したくないコメント欄などを隠す方法は、次回に。

--- 後記。 以上の今回の方法はやめて、次の方法が良い。
* Snippetで自動区切り「もっと読む」表示が簡単 Blogger Auto Read-More with imge without Javascript

 

  • このサイトに新規記事を投稿する時、同時に Facebook にも投稿するように設定している。 Next Scripts: Social Networks Auto Poster  というプラグインを利用している。 Social Networks Auto Poster {SNAP} – Free plugin for WordPress - NextScriptsSNAP can publish nicely formatted messages to your social networks accounts. You can reach the most audience and let all your friends, readers and followerNextScripts&...
  • WordPress では、タグクラウドにそれぞれのタグの投稿記事数が表示されないのが標準であるが、時に投稿数が表示されているものもみかける。 どうすれば記事数を表示できるのか、調べてみたが、これがなかなかすんなりいかなかった。 最終的には2つの方法を見つけた。 1. Simple Tags プラグインをインストールする。 (既にインストールされていた。)    Tag Cloud 設定画面で次のように (%tag_count%) と加筆する <a href="%tag_link%" id="tag-link-%tag_id%" class="st-tags t%tag_scale%" title="%tag_count% topics" %tag_rel% style="%tag_si...
  • 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...
  • FlexSlider は Celtispack プラグインパック に含まれていて、画像ギャラリー作成時に、FlexSlider を選択できる。 このサムネイルが70x70pxで小さいので大きくする方法を探ってみた。 /DocumentRoot/wp-content/plugins/celtispack/modules/celtis-gallery-slider/ にある、celtis-gallery-slider.php を次の様に変更する。 赤字のsmall を好みの大きさのサムネイルの通称に変更すれば良い。  diff celtis-gallery-slider.php celtis-gallery-slider.php.back 80c80 < 'size' => 'thu...
  • 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 カテゴリ人気記事 Views most

blogger・ブログ カテゴリ人気記事 月間

タグ関連記事

閲覧履歴

    //cookieが無い場合の処理