Imaginaryのインデックスページ：トップとアーカイブとラベルとブログ内検索では記事のスニペットが表示されますが、初期値では記事のタイトルと画像と抜粋と二つのリンク（アーカイブと続きを読む）が表示されます。
テンプレートのデザインのカスタマイズとしてスニペットの本文の削除と項目の並び替えについて紹介します。
どちらもBloggerの管理画面のテーマの▼メニューの「HTMLを編集」か「バックアップ」と「復元」でテンプレートのソースコードを書き換えます。
スニペットの本文の削除
記事からタイトルと画像だけを取り込んで抜粋を表示しないようにする方法です。
データを読み込まないようにする
Blog1のidのwidget内のpostBodySnippetのidのincludable内のsummaryのclassのpタグがインデックスページでスニペットの本文を表示するソースコードになっています。
<b:includable id='postBodySnippet' var='post'>
（中略）
<p class='summary'>
<b:with value='data:post.body snippet { length:(data:blog.isMobileRequest ? 180 : 380), links: false, linebreaks: false, ellipsis: true }' var='chros'>
<b:if cond='data:chros contains "<strong>" or data:chros contains "<b>" or data:chros contains "<em>" or data:chros contains "<i>"'>
<script>const crsc = document.currentScript; crsc.insertAdjacentHTML("beforebegin", `<data:chros/>`.replace(/(<([^>]+)>)/g, ''));</script>
<b:else/>
<b:eval expr='data:chros'/>
</b:if>
</b:with>
</p>
（中略）
</b:includable>打ち消し線の部分を削除するとインデックスページでスニペットの本文を表示しません。
画像を表示するデザインの調整
ソースコードのb:skin内の「記事の本文とスニペット」のところを編集して下さい。
縦一列のリキッドデザインの場合
スニペットの本文がなくなった代わりに画像を最大で表示します。
不要になるCSS：記事の本文とスニペット
.total-snippet {display:flow-root;margin-bottom:20px}
.total-snippet>.snippet-thumbnail {float:$startSide;width:max(30%, 8em - var(--maincolumn-padding));height:auto;margin-$endSide:var(--maincolumn-padding);margin-bottom:calc((var(--body-lineheight) - 1) * .5em)}必要になるCSS：記事の本文とスニペット
.total-snippet {display:block;margin-bottom:20px}
.total-snippet>.snippet-thumbnail {aspect-ratio:1.5;width:100%;height:auto;object-fit:cover}スニペットの画像が横幅一杯に表示されます。
取り込む画像が小さいまま、拡大すると画質が下がりますので、画質を上げる場合はさらにHTMLを編集します。
Blog1のidのwidget内のpostBodySnippetのidのincludable内のb:tagとb:tag内がインデックスページでスニペットの画像を表示するソースコードになっています。
不要になるXML：Blog1のidのwidget内
<b:includable id='postBodySnippet' var='post'>
（中略）
<b:tag class='snippet-thumbnail' expr:alt='data:messages.image' expr:src='data:imgurl.isYoutube ? data:imgurl + "=w121-rw" : data:imgurl' expr:srcset='data:imgurl.isYoutube ? "" : sourceSet(data:imgurl, [180, 360], "1:1")' height='180' name='img' sizes='(max-width:640px) 30vw, 360px' width='180'>
<b:attr name='b:whitespace' value='remove'/>
<b:if cond='data:imgurl.isYoutube'>
<b:attr expr:value='resizeImage(data:imgurl, 180, "1:1") + "-rw-e100 180w, " + resizeImage(data:imgurl, 360, "1:1") + "-rw-e100 360w"' name='data-hdss'/>
<b:attr expr:value='"this.srcset=this.naturalWidth<121?\"" + data:post.featuredImage + "=w320-h320-n-k-no-nu-rw-e100\":this.dataset.hdss;this.removeAttribute(\"onload\");"' name='onload'/>
（中略）
</b:tag>
（中略）
</b:includable>必要になるXML：Blog1のidのwidget内
<b:tag class='snippet-thumbnail' expr:alt='data:messages.image' expr:src='data:imgurl.isYoutube ? data:imgurl + "=w121-rw" : data:imgurl' expr:srcset='data:imgurl.isYoutube ? "" : sourceSet(data:imgurl, [640, 1280], "3:2")' height='426' name='img' sizes='(max-width:640px) 100vw, 1280px' width='640'>
<b:attr name='b:whitespace' value='remove'/>
<b:if cond='data:imgurl.isYoutube'>
<b:attr expr:value='resizeImage(data:imgurl, 640, "3:2") + "-rw-e100 640w, " + resizeImage(data:imgurl, 1280, "3:2") + "-rw-e100 1280w"' name='data-hdss'/>
<b:attr expr:value='"this.srcset=this.naturalWidth<121?\"" + data:post.featuredImage + "=w480-h320-n-k-no-nu-rw-e100\":this.dataset.hdss;this.removeAttribute(\"onload\");"' name='onload'/>不要になるXMLの打ち消し線の部分を必要になるXMLのソースコードで置き換えて下さい。
縦二列のリキッドデザインの場合
スニペットの本文を表示しないと画像とその下の二つのリンクとのの隙間が増えるので、画像の下の余白を消してバランスを取ります。
不要になるCSS：記事の本文とスニペット
.total-snippet {display:block;margin-bottom:20px}
.total-snippet>.snippet-thumbnail {aspect-ratio:1.5;width:100%;height:auto;object-fit:cover;margin-bottom:1em}打ち消し線の部分だけ削除して下さい。
不要なソースコードの削除
スニペットの本文を表示しないと幾つかの関連するソースコードも不要になります。残しておいても表示に問題はありませんが、無駄なソースコードを削除するとブログの読み込みが効率化されます。
不要になるCSS：記事の本文とスニペット
.entry-content, .summary {font:$(posts.text.font);line-height:var(--body-lineheight);color:$(posts.text.color)}
.summary {margin-top:0;margin-bottom:0}不要になるCSS：文字サイズ（スマホ中心）
.entry-content, .summary, .snippet-item, entry-content blockquote, .entry-content h4 {font-size:$(posts.text.font.size)}不要になるJavaScript：Infinite scroll
ソースコードの最後のscript内の「Infinite scroll」のところを編集します。
const nbat = document.adoptNode(bat), pssc = nbat.querySelector("p.summary>scrip");
if (pssc) pssc.parentElement.insertAdjacentHTML("afterbegin", /`([^]+)`/.exec(pssc.textContent)[1].replace(/(<([^>]+)>)/g, ''));
return nbat;CSSもJavaScriptも全て打ち消し線の部分だけ削除します。
インデックスページの無限スクロールを読み込みボタンに変えた場合も同じプログラムが含まれているので、削除します。
スニペットの項目の並び替え
スニペットの項目は記事のタイトルと内容（画像と本文）とリンク（アーカイブと続きを読む）の三つの領域に分かれてマークアップされてそのままの順番で表示されますが、カスタマイズで入れ替えることができます。
CSSのorderを指定する
スニペットの親ボックス（hfeedのclassのdiv内のpostのclassのarticle）にdisplay:gridが指定されていますので、子要素の三つの領域のそれぞれにCSSのorderを指定することによって簡単に表示する順番を変えることができます。
CSSのorderを使ったスニペットの項目の並び替えはBloggerテンプレート「Imaginary」のカスタマイズとアドセンス申請についてでも紹介されています。
b:skin内のソースコードを編集します。
スニペットの項目のCSSの指定先
- .snippet-title
- スニペットの記事のタイトル
- .total-snippet
- スニペットの内容（画像と本文）
- .total-snippet+.post-footer
- スニペットのリンク（アーカイブと続きを読む）
- .total-snippet+.post-footer+.blog-pager
- スニペットのページネーション（その他の投稿）
※Imginaryのスニペットのページネーションは無限スクロールのためにJavaScriptで移動する設計ですから通常はスニペットの内側に表示されません。しかしテンプレートのマークアップではスニペットの内側に記載されていますので、スニペットの他の項目にorderを指定した場合、何もしないとブラウザのJavaScriptが切れた閲覧でスニペットの先頭にページネーションが表示されることになります。
内容とタイトルとリンクの順番にする場合
.snippet-title {order:2}
.total-snippet {order:1}
.total-snippet+.post-footer {order:3}
.total-snippet+.post-footer+.blog-pager {order:4}それぞれのorderの順番でスニペットの項目が表示されますので、三つの領域の並び替えを望む順番で数値を入力して下さい。
全てのデバイス（パソコンとタブレットとスマホなど）に共通のデザインとして使用する場合は相応しい位置に記載します。
CSSの「記事の本文とスニペット」のところなど、または管理画面のテーマのカスタマイズの詳細設定の「CSSを追加」を使っても全てのデバイスに共通のデザインに設定できます。
不要なソースコードの削除
Imaginaryの縦ニ列のグリッドデザインのタイプはパソコンで表示するときに横並びになる二つのスニペットの画像の高さを合わせるためにその上の記事のタイトルを一行以内で表示しています。
スニペットの項目を置き換えて記事のタイトルを画像よりも下に表示する場合は横並びになる二つのスニペットの高さは揃いますので、記事のタイトルを一行以内で表示するためのソースコードを削除すると無駄を減らせます。
不要になるCSS：ページボディー
.hfeed .snippet-title {overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.hfeed>.post+aside {background-color:$(posts.background.color)}b:skin内に「ページボディー」のCSSは、三ヵ所、ありますが、「コンテンツの幅以上」のところの「.hfeed .snippet-title」で指定されたソースコードが不要になります。
コメント