🚀JetThemeの投稿一覧をNewspaperのリスト式にする(ほぼ完コピ)

JetTheme Newspaper は JetTheme の有料テンプレートで、投稿一覧がリスト形式になっているBloggerテーマです

Tetora - JetTheme Newspaper Template Blogger
https://jettheme-tetora.blogspot.com/

まぁ JetTheme をリスト化するなら、他に良いテンプレートがありそうですが
カスタマイズの方向性としてはプレミアムに見せ掛けるのはアリなので、以前からやってみたいとは思っていたので
ソースを比較してほぼ完コピしました

デモ > https://ws007sh-kustom.blogspot.com/

変更箇所1(1654)

<div class='item-content p-4'>

を

<div class='item-content col overflow-hidden'>

変更箇所2(1788)

<div class='h-100 overflow-hidden rounded position-relative border jt-border-light bg-archive shadow-sm'>

を

<div class='d-flex position-relative'>

変更箇所3(1791)

<div class='item-thumbnail'>
<a class='jt-bg-light d-block ratio ratio-16x9' expr:href='data:post.url.canonical' rel='bookmark'>

を

<div class='item-thumbnail col-4 me-3'>
<a class='jt-bg-light overflow-hidden rounded-3 d-block ratio ratio-4x3 ratio-sm-16x9' expr:href='data:post.url.canonical' rel='bookmark'>

変更箇所4(1811)

<p class='item-snippet text-break mb-3'><b:eval expr='data:post.snippets.short snippet { links: false }'/></p>

を

<p class='item-snippet d-none d-md-block text-break mb-1'><b:eval expr='data:post.snippets.short snippet { links: false, length: 125 }'/></p>

*スニペットは日本語だとスペースを取るので、デモは 115 まで減らしています

関連

• [Blogger]投稿スニペットの文字数を制限する

変更箇所5(2192)

          <div class='row row-cols-sm-2' id='blog-content'>

を

          <div class='mb-5' id='blog-content'>

変更箇所6(2194)

              <article class='item-post mb-4'>

を

              <article class='item-post border-bottom jt-border-light pb-3 mb-3'>

()の数字は私のテンプレートの行番号なので無視してください