【Blogger】記事をサムネイル・要約表示にして、Readmoreを自動化する方法（Moreタグ共存版）
Bloggerで用意されているテンプレートは、トップページに記事がそのまま並ぶようなデザインのものが多い。トップページに表示される記事は、できればコンパクトにまとめて並ばせたいもの。
そこで、トップページに表示される記事を サムネイル・要約表示にして、Readmore（もっと読む）を自動化するコードを作ってみたので、ここで紹介しようと思う（このコードのテストにはシンプルテンプレートを使用）。
概要
紹介するコードの効果
一言で言えば、このコードを適応するとトップページの表示が画像のように変化する。
なお、今回紹介するコードと似たようなものは、実はいくつも存在している。
しかし、今回作ったコードは それらのデメリットを払拭したものであり、以下のようなメリットが挙げられる。
メリット
・既存のmoreタグ（続きを読む）と共存できる
・Picasaウェブアルバム以外の画像もサムネイルにできる
・サムネイルのサイズを変更できる
・要約文の長さを変更できる（moreタグを使って）
・CSSを使ってデザインをカスタマイズできる
参考にさせてもらったコード
・今日のPython（Bloggerで「もっと読む」を自動化する - auto read more for blogger）
今回 コードを作るにあたって上記のブログで紹介されているコードを参考にさせてもらった。
記事にてBloggerの仕様に関することも説明されているので、なかなか勉強になる。
使用したテンプレート
今回紹介するコードを作った時には、Bloggerのシンプルテンプレートを使った（画像のデザイン）。
正直、全てのテンプレートに試したわけではないので、正常に適応できるのかについては確約できない。
そのため、使ってみたい方はバックアップを取った上で試して欲しい。
適応手順
このコードを適応するには、以下の4ステップの手順を行えばできる。
１．テンプレートのバックアップを取る
まずはテンプレートのバックアップを取っておいて欲しい。
方法は「テーマ」 → 「バックアップ/復元」 → 「テーマをダウンロード」の順に選択すればいい
２．「HTMLの編集」から「<data:post.body/>」を検索
「HTMLの編集」の画面でコード内をクリックし、「Ctrl＋F」を押すとコード内の検索フォームが現れる。
この検索フォームに「<data:post.body/>」と入力して、コードの挿入箇所を探す。
なお、シンプルテンプレートの場合、これを検索すると2箇所 引っかかると思う。
今回変更するのは下の方の <data:post.body/>になる。
ちなみに上の<data:post.body/>は、モバイル版の記事の設定に当たる。
古いテンプレートの場合
古いテンプレートの場合、<data:post.body/>が3箇所 引っかかることがある。
この場合は一番下の <data:post.body/>を変更することになる。
ちなみに、一番上はモバイル、二番目は固定ページの設定になっている（と思われる）。
３．「<data:post.body/>」を以下のコードの置き換える
以下のコードをコピーして、手順２で示した「<data:post.body/>」と置き換える。
<!-- トップページの要約表示はじめ -->
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/><!--記事ページ部分-->
<b:else/>
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/><!--固定ページ部分-->
<b:else/>
<b:if cond='data:post.hasJumpLink'>
<div class='top-thumb'>
<b:if cond='data:post.firstImageUrl'>
<a expr:href='data:post.url'>
<img expr:src='data:post.firstImageUrl'/>
</a>
</b:if>
</div>
<div class='post-snippet'>
<data:post.snippet/>
</div>
<p class='more-link'>
<a expr:href='data:post.url + "#more"' expr:title='data:post.title'>
<data:post.jumpText/>
</a>
</p>
<b:else/>
<b:if cond='data:post.snippet'>
<b:if cond='data:post.firstImageUrl'>
<div class='top-thumb'>
<b:if cond='data:post.firstImageUrl'>
<a expr:href='data:post.url'>
<img expr:src='data:post.firstImageUrl'/>
</a>
</b:if>
</div>
</b:if>
<div class='post-snippet'>
<data:post.snippet/>
</div>
<p class='more-link'>
<a expr:href='data:post.url + "#more"' expr:title='data:post.title'>
<data:post.jumpText/>
</a>
</p>
<b:else/>
<data:post.body/>
</b:if>
</b:if>
</b:if>
</b:if>
<!-- トップページの要約表示おわり -->
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/><!--記事ページ部分-->
<b:else/>
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/><!--固定ページ部分-->
<b:else/>
<b:if cond='data:post.hasJumpLink'>
<div class='top-thumb'>
<b:if cond='data:post.firstImageUrl'>
<a expr:href='data:post.url'>
<img expr:src='data:post.firstImageUrl'/>
</a>
</b:if>
</div>
<div class='post-snippet'>
<data:post.snippet/>
</div>
<p class='more-link'>
<a expr:href='data:post.url + "#more"' expr:title='data:post.title'>
<data:post.jumpText/>
</a>
</p>
<b:else/>
<b:if cond='data:post.snippet'>
<b:if cond='data:post.firstImageUrl'>
<div class='top-thumb'>
<b:if cond='data:post.firstImageUrl'>
<a expr:href='data:post.url'>
<img expr:src='data:post.firstImageUrl'/>
</a>
</b:if>
</div>
</b:if>
<div class='post-snippet'>
<data:post.snippet/>
</div>
<p class='more-link'>
<a expr:href='data:post.url + "#more"' expr:title='data:post.title'>
<data:post.jumpText/>
</a>
</p>
<b:else/>
<data:post.body/>
</b:if>
</b:if>
</b:if>
</b:if>
<!-- トップページの要約表示おわり -->
４．以下のCSSを追加する
「テンプレートデザイナー」から、以下のCSSを追加する（もしくは「HTMLの編集」）。
CSSの設定については説明を付けておいたので、それを参考にカスタマイズして欲しい。
/* トップページの要約表示用CSS
----------------------------------------*/
/* 画像の余白を消す */
.post-body img{
padding:0;
}
/* サムネイルの設定 */
.top-thumb img {
float: left; /* 左寄せ */
margin-right: 20px; /* サムネイルと要約の間隔 */
width: 180px; /* サムネイルの横幅 */
height: 120px; /* サムネイルの高さ */
object-fit: cover; /* サムネイルをリサイズ */
}
/* 要約部分の設定 */
.post-snippet{
padding: 0 15px 0 0; /* 要約の上・右・下・左の余白 */
height:85px; /* 要約の高さ */
}
/* 追加した「続きを読む」の設定 */
.more-link{
font-size:13px; /* 文字サイズ */
float: right; /* 右寄せ */
margin-right: 20px; /* 右の余白 */
}
/* 既存の「続きを読む」を消す */
.jump-link{
display: none; /* 表示させない */
}
----------------------------------------*/
/* 画像の余白を消す */
.post-body img{
padding:0;
}
/* サムネイルの設定 */
.top-thumb img {
float: left; /* 左寄せ */
margin-right: 20px; /* サムネイルと要約の間隔 */
width: 180px; /* サムネイルの横幅 */
height: 120px; /* サムネイルの高さ */
object-fit: cover; /* サムネイルをリサイズ */
}
/* 要約部分の設定 */
.post-snippet{
padding: 0 15px 0 0; /* 要約の上・右・下・左の余白 */
height:85px; /* 要約の高さ */
}
/* 追加した「続きを読む」の設定 */
.more-link{
font-size:13px; /* 文字サイズ */
float: right; /* 右寄せ */
margin-right: 20px; /* 右の余白 */
}
/* 既存の「続きを読む」を消す */
.jump-link{
display: none; /* 表示させない */
}
応用
CSSのデザインサンプル
上記のCSSは、初期設定に近いデザインに設定した。
だが、あまりにもシンプルすぎるので、ちょっと遊び心を入れたデザインも作ってみることにした。
上記のCSSとの違いは、以下の点である。
・サムネイルのホバー時に、画像をやや拡大する
・続きを読むボタンにデザインがついている
見栄えは多少良くなっていると思うので、遊び心が欲しい方には以下のCSSを使って貰いたい。
/* トップページの要約表示用CSS
----------------------------------------*/
/* 画像の余白を消す */
.post-body img{
padding:0;
}
/* サムネイルの設定 */
.top-thumb img {
float: left; /* 左寄せ */
margin-right: 20px; /* サムネイルと要約の間隔 */
width: 180px; /* サムネイルの横幅 */
height: 120px; /* サムネイルの高さ */
object-fit: cover; /* サムネイルをリサイズ */
transition: 0.4s;
}
/* ホバー時にサムネイルを拡大する */
.top-thumb img:hover {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
}
/* 要約部分の設定 */
.post-snippet{
padding: 0 15px 0 0; /* 要約の上・右・下・左の余白 */
height:85px; /* 要約の高さ */
}
/* 追加した「続きを読む」の設定 */
.more-link{
font-size:13px;
float: right; /* 右寄せ */
margin-right: 20px; /* 右の余白 */
}
.more-link a{
color:#00f;
border:1px solid #00f;
padding:3px 10px;
border-radius: 10px;
}
.more-link a:hover{
text-decoration:none;
color:#fff;
background-color:#007fff;
border-radius: 10px;
transition: 0.4s;
}
/* 既存の「続きを読む」を消す */
.jump-link{
display: none; /* 表示させない */
}
----------------------------------------*/
/* 画像の余白を消す */
.post-body img{
padding:0;
}
/* サムネイルの設定 */
.top-thumb img {
float: left; /* 左寄せ */
margin-right: 20px; /* サムネイルと要約の間隔 */
width: 180px; /* サムネイルの横幅 */
height: 120px; /* サムネイルの高さ */
object-fit: cover; /* サムネイルをリサイズ */
transition: 0.4s;
}
/* ホバー時にサムネイルを拡大する */
.top-thumb img:hover {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
}
/* 要約部分の設定 */
.post-snippet{
padding: 0 15px 0 0; /* 要約の上・右・下・左の余白 */
height:85px; /* 要約の高さ */
}
/* 追加した「続きを読む」の設定 */
.more-link{
font-size:13px;
float: right; /* 右寄せ */
margin-right: 20px; /* 右の余白 */
}
.more-link a{
color:#00f;
border:1px solid #00f;
padding:3px 10px;
border-radius: 10px;
}
.more-link a:hover{
text-decoration:none;
color:#fff;
background-color:#007fff;
border-radius: 10px;
transition: 0.4s;
}
/* 既存の「続きを読む」を消す */
.jump-link{
display: none; /* 表示させない */
}
備考
このコードを作った動機について
自分のメインブログは、シンプルテンプレートをカスタマイズしたものを使っている。今まではネットで拾ってきた同様のコードを使っていたが、moreタグが使えないなどの不満な点もあった。
最近の記事ページをいじるカスタマイズ方法は「moreタグを使ったもの」が多いので、moreタグが使えないという点はかなりイタい。なら、Vaster2を使えばいいのでは？とも思ったが、カスタマイズしすぎて今更差し替えるには手間がかかりすぎる。
ということで、改めて要約コードに向き合って自分なりにカスタマイズしてみたところ、なんとなく上手くいった。正直、プログラミングに関しては全然素人なので、コードの全容を把握しているわけではない。
でも、今のところ上手くいっているので、多分大丈夫だろうということで公開することにした。
Bloggerのmoreタグについて
Bloggerの仕様上、1ページに表示される記事の容量には制限があるらしい。そのため、画像をふんだんに使った記事を連投すると、トップページの記事の表示数で設定した記事数よりも少なく表示されてしまう。
ひどい場合、トップページに1記事しか表示されていないという なんとも寂しい状態になることもある。しかし、moreタグを使って表示部分を制限すれば、容量制限を回避することができるらしい。
つまり、moreタグを使うと それ以下の記事に関してはトップページに読み込まれなくなり、moreタグ以下の記事の容量をカットすることができるというワケである。そのため、面倒でもmoreタグを使っておいた方が表示的にも不具合が起こりづらい。
また、当ブログでも採用している自動目次機能などはmoreタグによって挿入箇所を判断しているため、moreタグは使えるようにしておくと、様々なメリットがあると言えるだろう。
コードの解説
Bloggerをカスタマイズする場合、「<data:post.body/>」というキーワードは頻繁に登場する。この<data:post.body/>は「Bloggerの記事内容」を指すコードであり、これがないとコンテンツが表示されなくなる。
また、<data:post.body/>の上下にSNSボタンなどを自動追加するコードが多いので、覚えていると役立つ。今回紹介したコードには説明を付けておいたので、<data:post.body/>付近にコードを追記する時なんかに参考にして欲しい。
なお、この手のコードに関しては「トーマスイッチ」さんのテンプレートタグに関する記事やに条件分岐に関する記事が参考になる。
また、概要で紹介した元のコードからの主な改変点は、「サムネイルではなく記事の最初の画像を読み込む」「画像に記事のリンクをつける」「moreタグのクラスを別のものにしてCSSで元のReadmoreを非表示にする」「moreタグの有無にかかわらず表示を統一する」という点であり、加えてCSSで簡単にデザインを変更できるようにした。
なお、「続きを読む」のリンクは初期設定の通り moreタグ以降の記事内容に飛ぶようになっているので、記事ページの冒頭から表示させたい場合は「<a expr:href='data:post.url + "#more"' expr:title='data:post.title'>」を「<a expr:href='data:post.url' expr:title='data:post.title'>」に書き換える必要がある。
最後に、説明を加えたHTMLコードを置いておくので、カスタマイズする際の参考にして欲しい。
<!-- トップページの要約表示はじめ -->
<b:if cond='data:blog.pageType == "item"'><!-- 記事ページかどうかの分岐 -->
<data:post.body/><!--記事ページ部分-->
<b:else/>
<b:if cond='data:blog.pageType == "static_page"'><!-- 固定ページかどうかの分岐 -->
<data:post.body/><!--固定ページ部分-->
<b:else/>
<b:if cond='data:post.hasJumpLink'><!-- moreタグがあるかどうかの分岐 -->
<div class='top-thumb'><!-- サムネイルのくくり（クラス名：top-thumb） -->
<b:if cond='data:post.firstImageUrl'><!-- 記事に画像があるかどうかの分岐 -->
<a expr:href='data:post.url'>
<img expr:src='data:post.firstImageUrl'/><!-- 記事の最初の画像の読み込む -->
</a>
</b:if>
</div>
<div class='post-snippet'><!-- 要約部分のくくり（クラス名：post-snippet） -->
<data:post.snippet/><!-- 記事の要約を読み込む -->
</div>
<p class='more-link'><!-- 続きを読むのくくり（クラス名：more-link） -->
<a expr:href='data:post.url + "#more"' expr:title='data:post.title'>
<data:post.jumpText/><!-- 設定したReadmore（続きを読む）の文字列を読み込む -->
</a>
</p>
<b:else/><!-- moreタグがない場合 -->
<b:if cond='data:post.snippet'>
<b:if cond='data:post.firstImageUrl'>
<div class='top-thumb'>
<b:if cond='data:post.firstImageUrl'>
<a expr:href='data:post.url'>
<img expr:src='data:post.firstImageUrl'/>
</a>
</b:if>
</div>
</b:if>
<div class='post-snippet'>
<data:post.snippet/>
</div>
<p class='more-link'>
<a expr:href='data:post.url + "#more"' expr:title='data:post.title'>
<data:post.jumpText/>
</a>
</p>
<b:else/>
<data:post.body/>
</b:if>
</b:if>
</b:if>
</b:if>
<!-- トップページの要約表示おわり -->
<b:if cond='data:blog.pageType == "item"'><!-- 記事ページかどうかの分岐 -->
<data:post.body/><!--記事ページ部分-->
<b:else/>
<b:if cond='data:blog.pageType == "static_page"'><!-- 固定ページかどうかの分岐 -->
<data:post.body/><!--固定ページ部分-->
<b:else/>
<b:if cond='data:post.hasJumpLink'><!-- moreタグがあるかどうかの分岐 -->
<div class='top-thumb'><!-- サムネイルのくくり（クラス名：top-thumb） -->
<b:if cond='data:post.firstImageUrl'><!-- 記事に画像があるかどうかの分岐 -->
<a expr:href='data:post.url'>
<img expr:src='data:post.firstImageUrl'/><!-- 記事の最初の画像の読み込む -->
</a>
</b:if>
</div>
<div class='post-snippet'><!-- 要約部分のくくり（クラス名：post-snippet） -->
<data:post.snippet/><!-- 記事の要約を読み込む -->
</div>
<p class='more-link'><!-- 続きを読むのくくり（クラス名：more-link） -->
<a expr:href='data:post.url + "#more"' expr:title='data:post.title'>
<data:post.jumpText/><!-- 設定したReadmore（続きを読む）の文字列を読み込む -->
</a>
</p>
<b:else/><!-- moreタグがない場合 -->
<b:if cond='data:post.snippet'>
<b:if cond='data:post.firstImageUrl'>
<div class='top-thumb'>
<b:if cond='data:post.firstImageUrl'>
<a expr:href='data:post.url'>
<img expr:src='data:post.firstImageUrl'/>
</a>
</b:if>
</div>
</b:if>
<div class='post-snippet'>
<data:post.snippet/>
</div>
<p class='more-link'>
<a expr:href='data:post.url + "#more"' expr:title='data:post.title'>
<data:post.jumpText/>
</a>
</p>
<b:else/>
<data:post.body/>
</b:if>
</b:if>
</b:if>
</b:if>
<!-- トップページの要約表示おわり -->
スポンサーリンク
スポンサーリンク
コメント
6 件のコメント :
こちらの記事を参考にカスタマイズさせて頂きました。
当方のブログは開設時からずっとシンプルテーマのままでレスポンシブにするつもりもなかったのですが、
唯一気になっていたトップページのレイアウトをモバイル版のようにすっきりさせることが出来て満足しております。
コメントありがとうございます。そのように言って頂けると励みになります＾＾
自身のブログのレイアウトの悩みが解決出来ました。
非常に満足しております。ありがとうございました！
お役に立てて幸いです＾＾
はじめまして。
お陰様で、トップページに表示される記事をサムネイル・要約表示に変更できました。
遊び心を入れたデザインにしました(笑)
CSSが何かも知らないのにできました。
ありがとうございました。
コメントありがとうございます。
Bloggerユーザーは少ないので、少しでも反響をいただけると励みになります！
コメントを投稿