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

2023/02/16 投稿

2024/08/26 最終更新

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

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

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

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

ヘッダー【id＝"header"】

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

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

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

当ブログでは、id="blog-title" でタイトルにグラデーションを入れています。CSS詳細はブログ内関連記事：カスタマイズCSS【その2】にて。

ここで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より継続です。対象となるのはトップの記事一覧（新着記事）・人気の投稿。

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

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

ウィジェットタイトルの英字が細くなる・大文字になる

#primary .widget-title {
font-weight: 300; /*フォントを細くしている*/
text-transform: uppercase; /*全てを大文字に*/
}

最初は自分が選んだフォントのせいなのかと思っていましたが、CSSで細くして全部を大文字にする設定がついていました。日本語とのフォントウエイトの差が気になったので全部削除。

これはブログ全体のデザインやイメージ、お使いのフォント（明朝体なら合うのかも…）によっては気にならないかもしれませんので、必要なら残してください。

サイド【id="sidebar"】

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

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

個別記事ページのみ「最近の投稿」を表示させていますが、条件をトップページ以外で表示に指定した場合、レイアウトからガジェットの設置/編集ができなくなるので、先にガジェットを設置してから条件を変更するようにすると楽です。

サイドに限らず、この条件付き表示ブロックでトップページのみ「カルーセル」を表示したり、いろいろ応用が効きそうです。

フッター【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つの設定方法があります。

設定＞投稿：メインページに掲載する投稿数の上限から設定
レイアウト＞ブログの投稿：メインページに表示する投稿数から設定

ところが、設定した記事数が表示されない時があります。（私もJetThemeで6以上に設定した時に発生しました）

実はそれ「Bloggerの仕様」かもしれません。

詳細は以下の関連記事で説明していますが、簡単な対応で設定数が表示されるようになるので、お困りの方はご覧ください。

TOPページ関連はここまで

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

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

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

Blogger

#JetTheme

匿名 2024年3月2日 17:41

こんにちは、QooqからJetthemeへ作業中です。このブログで紹介されている目次でお教えねがたいことがあります。主目次を showToc: false,　のオプションにすると、
主目次は表示/非表示を切り換えできるのですが、
サイドバー目次は非表示のままです。
自分の環境だけなのか、確かめたくてコメントを差し上げました。
- theta 2024年3月2日 19:12
  
  管理人＞匿名様
  
  記事をお読みいただき、またコメントもありがとうございます。
  
  ご質問の件ですが、私のブログでshowToc: false,にして確認してみたところ、メイン目次は表示/非常時で切り替え可能でしたが、サイド目次は表示をクリックしても目次が展開されませんでした。
  
  今の私のブログの設定（showToc: true,）にした場合、サイド目次は非表示をクリックしても何も変わらず、非表示/表示にできません。
  
  これについては、カスタマイズしていた時に「あれ？」とは思ったものの、自分でプログラムを改良できるほどのスキルはなく、折りたためないのならせめてサイド目次の「非表示」を消せればな…と思いつつ、手を付けていないというのが現状になります。
- 匿名 2024年3月2日 19:54
  
  早速、ご確認をしていただきありがとうございます。今のところは、仕様？なのですね。
- theta 2024年3月3日 12:03
  
  管理人＞匿名様
  
  そうですね。別館のQooQを使っているブログでも確認してみましたが、こちらでもサイド目次は表示/非表示の切り替えができませんでしたので、使用テンプレートとの相性で発生するバグということでもないようです。（検証はQooQ・Jetthemeだけですが）
返信する

コメントを書く