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

今日から、JetThemeのデザインに関するカスタマイズのお話。

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

元HTMLでコードを探す際におおよその「オリジナル版での行数」を書いていますが、お使いのテンプレートのバージョンやカスタマイズ作業中でコードの追記などしていると、参照場所が前後してくると思いますので、あくまでも目安程度に。

また、カスタマイズを終えた後に思い出しながら記事を書いているので、ちょっとおかしい所があるかもしれません。ん？という箇所がありましたらご指摘いただけると幸いです。

ヘッダー【id＝"header"】

ブログタイトルは文字でも大丈夫

関連記事でもご紹介しましたが、Logoは文字でも大丈夫です。設定＞基本＞タイトル　で入力するブログタイトルは反映されないので、レイアウト＞Header＞Logo　から入力する必要があります。

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

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

8-stars.blogspot.com

そのままタイトルを文字入力しても反映されますが、見栄え良くしたいならclassかidを設定してCSSを追記してあげましょう。私は<span id="blog-title">ブログ名</span>と入力しています。

ここでh1タグを使わなくても、d-noneで非表示になっていますが、既に「TOPページのみLogoのコンテンツに入力された内容をh1」として指定されています。

見え隠れする設定を削除

デフォルトでは、記事を読んでいる最中に上へ戻ろうとすると、スルッとヘッダー部分が飛び出てくるようになっています。

好みの問題ですが、私はこの動きがないほうがすっきりしてていいなと感じたので、以下の設定をしました。

設定＞カスタマイズ＞HTMLを編集　よりHTMLの中から header-animate sticky-top で検索し、以下のコードを確認。場所は1000行ちょっとあたり。

<header class='header-animate sticky-top navbar py-0 navbar-expand-lg' content='itemid' id='header' itemid='#header' itemscope='itemscope' itemtype='https://schema.org/WPHeader'> 

header-animate sticky-top の全削除＝アニメーションなし・上部固定なし

header-animate の削除＝アニメーションなし・上部固定

となります。お好きな方でどうぞ。

SNS・ダークモード非表示

フェイスブック・インスタグラムのアイコンが並んでいますが、私にはどちらも必要ない。ダークモードはデフォルトカラーで使うつもりがないので保留ということで非表示に。

SNSアイコンは、設定＞レイアウト＞Header＞Icons, Dark, Search　よりゴミ箱マークで削除できますが、2つ全部削除してしまうと、その横にあるダークモードと検索も丸ごと消えてしまうので、削除せずCSSで非表示にします。

.header-social  を検索し、非表示設定を1行追加。SNSアイコン右横にある区切り線（｜）が不要の場合は、もともと書かれている border-right: 1px solid var(--jt-header-border); を削除。

.header-social {
display: none!important;　/*--この部分を1行追加--*/
border-right: 1px solid var(--jt-header-border);　/*--区切り線が不要ならこの1行削除--*/
}

ダークモードもCSSで非表示に。「#dark-header」はCSSに新規追加です。HTML内検索「/*Your custom CSS is here*/」以降に書くと、後々分かりやすいと思います。

#dark-header {
display: none!important;
}

メニュー右寄せ（モバイル表示は左寄せ）

Logoは右上、以下メニューは左に寄せます。以下を検索。1600行過ぎあたり。

<ul class='navbar-nav px-4 p-lg-0 container' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement' role='menu'>  

class="xxxxxx"　部分に justify-content-end を追加します。

<ul class='navbar-nav px-4 p-lg-0 container justify-content-end' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement' role='menu'>

Bootstrap5 Flex (フレックス)＞Justify content

メイン【id="main"】

トップ記事一覧をリスト型に

QooQの時もリスト型を好んで使っていたのでJTもリスト型にしました。手順はリモスキさんで丁寧に解説されているので、この通り設定すれば大丈夫です。

【Blogger】JetTheme のトップページをリスト形式にするカスタマイズ

リストカード全体をリンクに

基本手順はトップ記事一覧。上記リンク先リモスキさんの記事で詳細に説明されています。応用で人気の投稿部分にも設定可能です。

人気投稿のaタグ設置場所は以下の通り。3行目の list-item-link の追記も忘れずに。

<div class='widget-content popular-posts'>
 <b:loop index='i' values='data:posts' var='post'>
  <div class='item-post d-flex mb-3 list-item-link'>
   <a expr:href='data:post.url.canonical' rel='bookmark' />　★ここに1行追加
  <b:if cond='data:postDisplay.showFeaturedImage'>
 <b:if cond='data:post.featuredImage'>

もともとの画像についていたaタグをdivに変更し expr:href= の削除など、他の手順は同様です。

共通no-imageの設定

基本手順はQooQより継続です。対象となるのはトップの記事一覧（新着記事）・人気の投稿。

関連記事についてはJetTheme純正では共通no-imageの設定がうまくできなかったので、別の方法（ブログ内記事：JetTheme 記事ページのカスタマイズ【Blogger】＞ 関連記事（JT-Related Postは不使用）にて）を使い画像URLだけオリジナル画像に変更しました。

QooQ 人気投稿のサムネイルに共通no-imageを設定【Blogger】 | No.8

個別記事にアイキャッチを入れていない場合、TOPの記事一覧の他にも人気投稿・関連記事にサムネイルが出ません。QooQでは画像がないとレイアウトが崩れてしまうので見た目がイマイチになります。 こんな場合の対処法は２つあります。

8-stars.blogspot.com

サイド【id="sidebar"】

TOPページのみ表示/非表示ガジェットスペースをつくる

新しいガジェットスペースの作成はQooQの時に見つけた方法で。ここではトップ or 他ページだけで表示調整したブロックをつくりました。

サイドに限らず、この条件付き表示ブロックでトップページのみ「カルーセル」を表示したり、個別記事ページのみ「最近の投稿」を表示させたりできるようになったり、いろいろ応用が効きそうです。

QooQ ガジェット追加エリアの新設【Blogger】 | No.8

ナビゲーションバーの下（ピンクの部分：記事一覧とサイドバーの上にドーンと）に、アピールエリアという新しいガジェットを追加できる場所を作ってみます。カルーセルを置いてもいいし、どどんと1枚TOP画像を置いてもいいかも。※この場所に限らずアイディア次...

8-stars.blogspot.com

フッター【id="footer"】

フッター部デフォルト4分割→2～3へ

ABOUT US・LEARN MORE・FOLLOW US・NEWSLETTER の部分です。デフォルトは4つに分かれていますが、以下を検索。行は1400ちょい上あたり。

<b:section class='row row-cols-sm-2 row-cols-lg-4 justify-content-evenly' id='footer-widget' showaddelement='yes'>

「row-cols-lg-4」の数字を4から2・3などに書き換えると分割数が変わります。合わせて左右の余白など調整してください。

今はフッター部分には何も入れていないので表示されていませんが、今後またレイアウトを変えるかもしれない時のメモ。

サイトマップ（JetTheme純正不使用）

JT純正は不使用。ふじろじっく/ふじやんさんが改良・日本語化されたソート機能付きのものを採用しました。当ブログのサイトマップはこんな感じです。

HTML サイトマップウィジェット (2022/07/10 一部を改良したコードを公開しました)

お問い合わせ（JetTheme純正不使用）

お問い合わせについても、JT純正は機能していないので使っていません。

Blogger純正のガジェットで追加する連絡フォームが動かないので、代替案としてネットで出てきた他の「ガジェットの連絡フォーム応用系のコンタクトフォーム」はみなダメです。随分前からのバグなのですがいつ修正されるのか…。

ひとまずGoogleフォームでお問い合わせページを作る必要があります。

アドセンスの遅延読み込み

Google系（Googleフォント・アドセンスなど）ってタグをいれたとたんにPageSpeed Insightsで遅い！って怒られるんです。

遅延設定をするとペナルティ大丈夫？とちょっと怖かったのですけど、調べたところによると「問題ない」ようなので、遅延設定をすることにしました。

JetThemeの場合、通常のGoogleアドセンスの広告コードの先頭にある以下の記述を削除すれば完了。

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-16桁の番号" crossorigin="anonymous"></script>

Setting Lazyload Untuk Template JetTheme　の「Lazyload Adsense」部分

設定した新着記事数があわない

トップページの新着記事一覧に表示させる記事数の設定をする場合、以下2つの設定方法があります。

トップページの記事数が設定より少ない【Blogger】 | No.8

トップページに一覧表示する記事（新着記事一覧）の数を変更しようと思ったのですが、なぜか6件から増やすことができません。減らすことはできるのですが、増やそうとすると表示件数が少なくなるのです。 何が原因なのか調べてみたところ、意外なことが表示エラーの原因になっている事がわかりまし...

8-stars.blogspot.com

TOPページ関連はここまで

JetThemeはBootstrapというCSSの枠組みを利用して設計されています。

ルールを理解して慣れてしまえば楽なのですが、知識不足の私の自己流カスタマイズでは、とりあえず見え方は一緒だけど、指定方法が混在している変な所があるかもしれません。ご容赦ください。

次は各記事ページのカスタマイズ内容、CSSについてはこちらでどうぞ。

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

TOPページ関連のメモを終え、ようやく記事ページです。ここでは記事更新日の追加・サイドの追従型目次・ブログカードなどのカスタマイズについてになります。カスタマイズには、JetTheme Ver.2.9（最終更新：2022/4/28）を使っています。変更箇所検索...

  8-stars.blogspot.com

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

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

  8-stars.blogspot.com

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

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

8-stars.blogspot.com