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

2023/02/22 投稿

2024/07/05 最終更新

トップページ関連のメモを終え、ようやく記事ページです。ここでは記事更新日の追加・サイドの追従型目次・ブログカードなどのカスタマイズについてになります。

カスタマイズには、JetTheme Ver.2.9（最終更新：2022/4/28）を使っています。変更箇所検索で記載してある行数は目安程度で。

更新日の追加

まずは公開日の書式設定（過去、JetThemeでの日付表示は日本では馴染みのない海外仕様でしたが、現在はyyyy/M/Dタイプの表示が可能となっています）および、更新日の追加について。手順はafter work lab/あトンさんが記事で解説されています。

「JetTheme」の日付の書式変更と更新日の追加方法（after work lab）

記事ページだけ更新日を表示

私はあまり表示をごちゃごちゃさせたくなかったので、各記事ページ以外には更新日を表示させない（トップ新着記事一覧・人気の投稿・関連記事は公開日のみ表示）ことにしました。この場合、コードの書き換えは1か所です。2020行ちょっと先のコードを検索。

<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> --- ★この下に更新日時コードをペースト

class='entry-meta…’のエリアで、上記が最初の投稿日時。デフォルトではこの前に投稿者・後ろにコメント数が、左寄せで表示されますが、私は投稿者を非表示（レイアウト＞Post＞より投稿者表示をOFF）にして、更新日時を追加し、全体を右寄せにしています。

更新日時コードの追加は、探した上記</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>

ペースト後は、すぐ下にコメントの<b:if…>が続いていると思います。

右寄せは、以下の箇所を検索してclassに justify-content-end を追加するだけ。

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

更新日を非表示にしたい時もある

過去記事のちょっとした修正（誤字脱字など）の場合には更新日を表示させたくなかったので、コードをちょっと調整。idを追加設定しました。

上の更新日追加コードの上から2行目の<div class='me-3' id='update' 部分です。更新日をいつでも表示したい場合でも、このままコードを追加して問題ありません。

非表示にするためには、各記事を書き終わった後・誤字修正などの後に、HTMLモードにして最後に以下の1行を追加しています。これを入れれば非表示・入れなければ更新日が表示されます。

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

シェアボタンの非表示

広告ブロック拡張機能を入れていると気づかない（私はChromeに広告ブロック拡張機能を入れているので、この部分が丸ごと消えます）かもしれませんが、このような機能を入れていない場合は、個別記事のタイトル下（class="entry-header …"）にFacebookやX（旧Twitter）などのアイコンがずらっと並びます。

消し方は2パターン。

後で必要になるかも…という方は、レイアウト＞ブログの投稿より共有ボタンを表示するのチェックボタンをOFFにすれば、HTMLをいじらなくても簡単にスパッと全部消えます。

使うこともないのだから元のHTMLから削除してしまいたいという場合は、JetShare を検索し、2か所のコード削除が必要です。

最初の JetShare を <b:includable id='JetShare' var='post'> から </b:includable> まで丸ごと削除。場所の目安は、この削除ブロックのすぐ下に <b:includable id='JetPostMeta' var='post'> があります。

<b:includable id='JetShare' var='post'>
  <b:if cond='data:jwidget.allBylineItems.share'>
    <div class='social-share mb-3'>
      <div class='d-flex fs-5'>
        <a class='me-2 mb-2 btn btn-sm jt-icon-center ･･･★中略</a>
          -- ★以下7個ほどリンクが続きます
      </div>
    </div>
  </b:if>
</b:includable>

次の JetShare を1行削除。場所の目安は、すぐ上に </header> があります。

<b:include data='post' name='JetShare'/>

片方だけだとHTML保存の時にエラーがでなくても、個別記事のパンくずリスト以下の表示が消えてしまうのでご注意を。2か所セットで削除です。

目次・記事ページのみサイドに追従型目次の表示

目次はJT純正ではなく、QooQの時も使っていたスケ郎のお話/スケ郎さんが作られたものを、IB-Note/Fumaさんが改良されたプログラムを使っています。こちらはオプション設定で簡単にサイドに目次表示（もちろんサイド非表示設定も可能）をさせることができます。

[Blogger] 目次を簡単に自動生成（忙しい人向けのコピペ素材）（スケ郎さん）

自動生成目次のオプション機能を追加してみました（Fumaさん）

何も言うことはありません。コピペで簡単・オプション設定も用意されており非常にお勧めです。

ただし、全てのBloggerテンプレートでうまく設置できるわけではないようで、一部相性の悪い（もともとそのテンプレートで使っているJavaScirptやCSSなどと干渉してしまう）テンプレートもあるようです。

CSSの調整

目次のデザイン（背景色ほか）を変えたい場合には、テーマ＞カスタマイズ＞HTMLを編集より  の数行上にあるブロック＝ <style type='text/css'> ～ </style> の間にCSS（オリジナルは軽量化のため空白や改行が削除されているので探しにくいです）があります。

追記：記事内にJetTheme純正の広告枠を設置している場合

JetThemeではいくつかの広告枠が設置済みです。もし記事内の広告枠をONにしている場合、タイトルに入力されている「#Advertisement」を削除する必要はありません。

これを削除してしまうと、見出しとして1カウントされてしまうので、目次に謎の空項目が1つ追加されてしまいますので注意しましょう。（私も気づくまで試行錯誤しました）

ブログカード

当ブログのブログカードは、過去にFC2-Blogでお世話になっていた The other way round/Akiraさんが作られたものをベースに、after work lab/あトンさんが一部改良されたブックマークレットを使っています。

ブログカード作成ブックマークレットをアップデートしました（Akiraさん）

理想のブログカードでページスピードを上げる方法（あトンさん）

当ブログオリジナルCSSのブログカードはこんな感じ。「あわせて読みたい」を後からカスタマイズしたいので、上下左右に余白をとってあります。

リンク先のページにOGP画像が設定されていない場合はサイトのスクリーンキャプチャ画像を取得し表示するようになっているので、新たにno-imageの設定などは不要です。

私のように記事に全てアイキャッチを入れていない人にはとてもうれしい。ただし、この画像は取得時のもので、リンク先のサムネイルは自動更新されません。

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

使用上の注意

p要素の中にブログカードを入れて(入れ子して)しまわないよう注意してくださいね。親要素がdivであれば良いんですが、pは構文エラーです。
The other way round Akiraさん

とされていますので、Bloggerを使っている場合は「段落」<p>ではなく「標準」 <div> にしてから、コードをコピペしましょう。

記事末尾にカテゴリーとタグを表示

デフォルトではタグ（#で始まる）のみ表示なので、カテゴリー表示をしたい場合にはHTMLの追記が必要になります。

<div class='entry-tag'> を検索。すぐ上の<b:if cond='data:post.labels'>との間にカテゴリー表示のコードを追加します。

<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 カスタマイズ方法一覧　より　記事下にカテゴリーを表示

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

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：ラベル表示数

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

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

私は下のパンくずリストを、前後の記事へのナビのすぐ上に設置することにしました。記事タイトル上のパンくずリストの部分の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>

最後に

ざっとここまでがカスタマイズの内容（色・余白・サイズなど軽微な調整を除く）になります。後から思い出しながら書いているので、もれがあるかもしれません。気づいたら追記して記事の更新しておきます。

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

---

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

カスタマイズCSSはこちら。

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

Blogger

#JetTheme

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

更新日の追加

記事ページだけ更新日を表示

更新日を非表示にしたい時もある

シェアボタンの非表示

目次・記事ページのみサイドに追従型目次の表示

CSSの調整

追記：記事内にJetTheme純正の広告枠を設置している場合

ブログカード

使用上の注意

You may also like...を削除

記事末尾にカテゴリーとタグを表示

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

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

RELATED POST=関連記事（JT純正は不使用）

最後に

カテゴリー

タグ

記事を検索

書いている人

最近の投稿