JetTheme 記事ページのカスタマイズ【Blogger】

<b:if cond='data:jwidget.allBylineItems.timestamp'>
<div class='me-3'>
<svg aria-hidden='true' class='me-1 jt-icon'><use xlink:href='#i-clock'/></svg>
<span class='date-format' expr:data-date='data:post.date.iso8601'>
<b:eval expr='data:jwidget.allBylineItems.timestamp.label ? data:post.date format data:jwidget.allBylineItems.timestamp.label:data:post.date'/>
</span>
</div>
</b:if> --- ★この下に更新日時コードをペースト

<b:if cond='data:post.date != data:post.lastUpdated'>
 <div class='me-3' id='update'> <!--更新日を非表示にしたい時もある場合はidの追加-->
  <svg aria-hidden='true' class='me-1 jt-icon bi-arrow-clockwise'>
   <use xlink:href='#bi-arrow-clockwise'/>
  </svg>
  <span class='date-format' expr:data-date='data:post.lastUpdated.iso8601'>
   <b:eval expr='data:jwidget.allBylineItems.timestamp.label ? data:post.lastUpdated format data:jwidget.allBylineItems.timestamp.label : data:post.lastUpdated'/>
  </span>
 </div>
</b:if>

<div class='entry-meta mb-3 text-secondary d-flex flex-wrap fw-light justify-content-end'>

<style>#update{display:none;}</style>

<b:if cond='data:post.labels'>　---　2035行あたり
  ★ここに以下のコードを追加する
<div class='entry-tag'>　---　2036行あたり

<div class='entry-category'>
 <b:loop index='i' values='data:post.labels where (l =&gt; l.name not contains &quot;#&quot;)' var='label'>
  <b:class expr:cond='data:i == 0' name='mb-2'/>
  <a class='me-2 mb-2 p-1 fs-6' expr:href='data:label.url.canonical + &quot;?max-results=10&quot;' rel='tag'><data:label.name/></a>
 </b:loop>
</div>

これもリモスキさんの記事を参考にさせていただきました。

【Blogger】JetTheme カスタマイズ方法一覧　より　記事下にカテゴリーを表示

表示されるカテゴリーと#タグの数

カテゴリーと#タグの表示数については、テンプレートのHTMLより # JetTheme v2.9 Setting # を検索。その下に設定項目が並んでいます。

カテゴリー/タグ数は maxLabel で指定できます。これはそれぞれの表示数です。例えばデフォルトは3ですがこの場合にはカテゴリが3つ・#タグが3つ（それぞれ3で合計6）まで表示されます。

Setting Template JetTheme 本家解説

• tagline：ブログのキャッチフレーズ
• separator：タイトル区切り
• description：ブログの説明
• cover：ホームページの画像
• logo：ロゴ画像
• favicon：ファビコン
• analyticId：Google アナリティクス（GA4対応）
• caPubAdsense：Google アドセンス
• autoTOC：目次の表示設定
• positionTOC：目次の位置
• maxLabel：ラベル表示数

上記、他の設定項目の説明については下記関連記事で。

JetTheme+Bloggerの初期設定 | No.8

ようやく新しいテンプレート「JetTheme」のカスタマイズが終わりました。といっても、まだ細かな部分が調整・確認しきれていませんが、まずは公開です。 カスタマイズの情報を今後のバージョンアップに備えた自分用のメモとして。

8-stars.blogspot.com

記事の下にもパンくずリストをつけたい

私は下のパンくずリストを、前後の記事へのナビのすぐ上に設置することにしました。記事タイトル上のパンくずリストの部分のHTMLを丸ごとコピーして下に持ってくるだけです。

検索するのは 'https://schema.org/BreadcrumbList' 1841行あたり。

<div itemscope='itemscope' itemtype='https://schema.org/BreadcrumbList' style='--bs-breadcrumb-divider: url(★中略★);'>
<ol class='breadcrumb d-block text-nowrap fs-7 overflow-hidden text-truncate'>
<b:if cond='data:view.search.query'>
  <li class='breadcrumb-item d-inline-block'>Search for: <data:view.search.query/></li>
<b:else/>
  <li class='breadcrumb-item d-inline-block' itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
    <a expr:href='data:blog.canonicalHomepageUrl' itemprop='item' rel='tag' title='Home'><span itemprop='name'>Home</span></a>
    <meta content='1' itemprop='position'/>
  </li>
  <b:if cond='data:post.labels'>     
    　★中略★
      <b:if cond='data:i == 2'>
        / <data:dates/>
      </b:if>
    </b:loop>
  </li>
  </b:if>
</b:if>
</ol>
</div>　---1880行あたり

1841～1880行の</div>までまるごとコピー。

貼り付け場所は以下の通り。<h3 class='h5 fw-bold'><data:post.author.name/></h3>を検索して、数行下の</article>（2062行あたり）の下にペースト。

<h3 class='h5 fw-bold'><data:post.author.name/></h3>
<p class='mb-0'><data:post.author.aboutMe/></p>
</div>
</div>
</div>
</b:if>
</article>　---2062行あたり 
  　★ここに丸ごとペースト★
<div expr:class='&quot;position-fixed start-0 top-50 &quot; + data:post.adminClass'>

また、パンくずリストの最後に記事タイトルを入れたい場合は以下のマーカー部分のコードの追加でOKです。場所はコピペしてきたHTMLブロック最後の</div>の2行上。

ただし、モバイルの時は前のカテゴリー数にもよりますが、記事タイトルは「…」で省略されます。全カットじゃなくタイトルの途中で「…」表示にしたかったのですが、私のスキルレベルではうまく調整できなかったです。無念！

それでもよければ、以下のとおり。

</b:loop>
</li>
</b:if>
</b:if>
 <li class='breadcrumb-item d-inline-block'><data:post.title/></li>
</ol>
</div>　---パンくずリストの1番最後

モバイル表示の時に、2行になってもいいから記事タイトルを入れたい！という場合には、パンくずリストHTMLの中の <ol class='breadcrumb d-block text-nowrap fs-7 overflow-hidden text-truncate'> の部分を、下記のように書き換えればOK。

<ol class='breadcrumb d-block fs-7'>  

現状当ブログでは、上は記事のタイトルがすぐ下にあるのでタイトル表示なし・下の部分はカテゴリーを省略して Home > 記事タイトルと表示しています。

当ブログの下のパンくずリストはこんな感じ。

<div itemscope='itemscope' itemtype='https://schema.org/BreadcrumbList' style='--bs-breadcrumb-divider: url(★中略★);'>
  <ol class='breadcrumb d-block fs-7'>
    <b:if cond='data:view.search.query'>
      <li class='breadcrumb-item d-inline-block'>Search for: <data:view.search.query/></li>
      <b:else/>
      <li class='breadcrumb-item d-inline-block' itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
        <a expr:href='data:blog.canonicalHomepageUrl' itemprop='item' rel='tag' title='Home'><span itemprop='name'>Home</span></a>
        <meta content='1' itemprop='position'/>
      </li>
    </b:if>
    <li class='breadcrumb-item d-inline-block'><data:post.title/></li>
  </ol>
</div>

関連記事（JT-Related Postは不使用）

目次同様、IB-Note/Fumaさんのプログラムを使っています。予めアイキャッチがない投稿の場合の「no-image」が設定されているので、オリジナル画像にしたい場合だけ画像URLを変更すればOKです。

【Blogger】関連記事表示のお手軽プラグイン（改良版）

CSSで他のリンクカードと同じように見た目を整えれば調整完了。

最後に

ざっとここまでがカスタマイズの内容（色・余白・サイズなど軽微な調整を除く）になります。

参考にさせていただいたみなさん、プログラムとか自分で組んで凄いな～と、感謝の気持ちを持って使わせていただいています。ありがとうございました。

---

トップページのHTMLを編集をする構造的なカスタマイズはこちら

JetTheme トップページのカスタマイズ【Blogger】 | No.8

今日から、JetThemeのデザインに関するカスタマイズのお話。 まず、トップページについて各ブロックごとのカスタマイズ内容です。（カラーデザイン・位置の調整など軽微なカスタマイズは除く）

8-stars.blogspot.com

カスタマイズCSSはこちら。ブログカードの「あわせて読みたい」のカスタマイズCSSなどは【その2】にて。

JetThemeカスタマイズに使ったCSSの小技 | No.8

ページが重くならず、ごちゃっとした感じにならない程度のアクセントで自分らしさを出したい。という事で、今回のJetThemeのカスタマイズで使ったCSSの小技をメモとして。文字のグラデーション ブログタイトルを文字にしているのでCSSで変化をプラス。ブルーのイン...

  8-stars.blogspot.com

JetThemeカスタマイズに使ったCSS【その2】 | No.8

その後、また JetTheme にカスタマイズのメモ（主にCSS）も兼ねて。また気分で変わってしまうかもしれませんが、記事公開時点での内容となります。

8-stars.blogspot.com

404エラーページのカスタマイズもあわせてどうぞ。

オリジナル404デザイン【Blogger】 | No.8

基本的にあまり表示されないエラーページではありますが、Bloggerデフォルトの404はつまらないので、QooQの時と同じくJetTheme版のオリジナルの404ページを設定してみました。

8-stars.blogspot.com