【Blogger】JetTheme カスタマイズ方法一覧

【Blogger】JetTheme カスタマイズ方法一覧

【Blogger】JetTheme カスタマイズ方法一覧

JetTheme を導入するにあたって、いくつかカスタマイズを行いました。

カスタマイズの参考サイトがまだあまりないので、当ブログでのカスタマイズ内容・修正方法をこちらで紹介していきたいと思います。

随時、追記していく予定です。

本記事の作成時点では JetTheme v2.8.2 を利用しています。

追記(2022年3月24日)
現時点での最新版は v2.9 で、当ブログもアップデートしました。本記事のカスタマイズ方法に変更はありません。

目次

JetTheme カスタマイズの全体方針

当ブログでは、以下の方針でカスタマイズしています。

  • カスタマイズの前に、バックアップを取る

バックアップは重要です。変更ミスや予期せぬ出来事に備えます。

もしくは、テストブログを作成してカスタマイズ内容の確認をしてから本ブログに反映するのがおすすめです。

  • 追加 CSS は /*Your custom CSS is here*/ の下部に記載

/*Your custom CSS is here*/ の上部にはデフォルトの CSS が記載されていますが、そこを直接修正してしまうとあとからデフォルトに戻したいときにちょっと大変です。

基本的にはデフォルトはそのままで、追加分を上書きしていくほうがおすすめです。

  • 一時的な非表示は display:none

要素やデザインを非表示にするにはその部分の HTML を削除するのが一番すっきりしますが、「一回非表示にしてみて様子を見たい」「のちのち使いたいかもしれない」などの場合は、display:none にしておいたほうが復活が簡単です。

  • CSS は、基本的に Bootstrap のクラスを用いて修正

JetTheme は Bootstrap の仕組みを使って構成されているので、CSS もできるだけそのルールに則ってカスタマイズします。

それだとカスタマイズが難しい場合は、新たに独自のクラスを追加して修正しています。

Bootstrap でよく使うクラスは以下記事で一覧にまとめたので、必要に応じて参照ください。

Bootstrap 5 クラス一覧(早見表)

Bootstrap 5 クラス一覧(早見表)

Bootstrap 5 に標準で用意されているクラスのうち、よく使うものを一覧にしてみました。 カスタマイズの参考用です。

それでは、カスタマイズを紹介していきます!

ヘッダーの表示・非表示アニメーションを削除

JetTheme では、画面を下にスクロールするとヘッダーが消え、上にスクロールするとヘッダーが再表示されます。

一般的によくある仕様だと思いますが、私は動きがないほうが好きなのでアニメーションを消しました。

【修正方法】
テンプレートで以下を検索し、header-animate sticky-topの部分を削除します。

<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 class='navbar py-0 navbar-expand-lg' content='itemid' id='header' itemid='#header' itemscope='itemscope' itemtype='https://schema.org/WPHeader'>

なお、アニメーションなしでヘッダーを常に画面に固定したい場合は、header-animateのみを削除して、次のようにすれば OK です。

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

タイトルロゴに SVG 画像を設定

ブログのタイトルロゴ画像は、JPG、PNG の他に SVG も設定できます。

当ブログでは以前SVG 形式のブログタイトルロゴを作成していたので、以下の方法で JetTheme に設定しました。

※ SVG ロゴの作成方法は以下記事で紹介しています。

ブログのロゴを SVG 形式でつくる。簡単なロゴの作成手順と Blogger での設定方法

ブログのロゴを SVG 形式でつくる。簡単なロゴの作成手順と Blogger での設定方法

ブログのロゴって設定していますか? 今回はフリーソフトを使って、拡大・縮小しても画像がぼやけない SVG という形式のロゴ作成方法をご紹介します。Blogger(QooQ)での設定方法もまとめました。

【設定方法】

①管理画面の「レイアウト」→最下部の「SVG Icons」ガジェットに、<symbol>タグで囲んだ SVG コードを追加入力して保存。

<symbol id='svg-limologo' viewbox='0 0 164.847 26.199'>
 ... 略 ...
</symbol>

②「レイアウト」→上部の「Logo」ガジェットのコンテンツ欄に、<use>タグを入力して保存。

JetThemeのロゴ設定イメージ
<svg aria-label="リモスキ!" class="svg-limologo" style="width:190px;height:55px"><use href="#svg-limologo"/></use></svg>

aria-label="リモスキ!"の部分にはブログタイトルを入れます。

ロゴのサイズは、デフォルトでは 175 x 55 px が推奨されています。

SVG ロゴの作成が面倒な場合は、JPG、PNG 形式でロゴ画像を作成して以下手順で設定すれば OK です。

  1. 「レイアウト」画面の「Upload Image」から画像をアップロードし、画像 URL を発行
  2. 「Logo」ガジェットに画像 URL を入力

画像作成が難しい場合は、「Logo」ガジェットのコンテンツ欄にブログタイトルを入力しておけば、そのままタイトルが文字で表示されます。

トップページの記事一覧をリスト形式に変更

デフォルトでカード形式になっているトップページの記事一覧を、リスト形式に変更するカスタマイズです。

以下の記事で手順をくわしく紹介しています。

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

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

JetTheme のトップページ記事一覧をリスト形式にするカスタマイズ方法をご紹介します。

記事に更新日を表示、日付の書式を変更(追記:2021/12/7)

更新日表示、日付の書式変更は以下の after work lab さんの記事を参考に修正しました。

更新日の表示は、QooQ では JavaScript が必要でしたが、JetTheme ではスクリプトなしの簡単な記述で表示できるようです。

※追記(2021/12/7)
日付の書式変更に関しては、JetTheme 最新バージョンでは管理画面から行えるようです。

「レイアウト」→「ブログの投稿」ガジェット→「公開時刻を表示」欄に、以下のいずれかを入力することで設定可能とのこと。

  • yyyy/M/d
  • yyyy/MM/dd
  • yyyy-M-d
  • yyyy-MM-dd

詳細は以下のブログで紹介されています。

また、関連記事、最近の投稿についても 2021/3/3 の形式で表示されるようになったようです。

トップに戻るボタンを非表示

画面をある程度下にスクロールすると、画面の右下にトップに戻るボタンが表示されます。

このボタン、PC では問題なく動作するのですが、私の iPhone 6s だと残念ながら1タップでうまく動作しません。1タップ目では画面下にアクションバーが出てくるだけになってしまい、トップに戻るにはそこでもう1タップが必要になります。

たぶん原因は以下サイトに書かれていることかなーと思っています。

iPhone の他の機種や Android では問題ないかもしれませんが、未確認です。

というわけで、トップに戻るボタンはもともと使ってなかったこともあり、以下の CSS を追加して非表示にしました。

#back-to-top{display:none}

ダークモードアイコンを非表示

JetTheme にはダークモードが標準装備されています。

が、色をカスタマイズすると配色の設計が大変そうなこと、自分がダークモードを使わないためどのように配色すべきかよくわからないことから、一旦非表示にしました。

#dark-header{display:none!important}

記事下にカテゴリーを表示

JetTheme の記事下には、デフォルトでハッシュタグのみが表示されます。ハッシュタグは、ラベル名に#をつけて設定したラベルです。

私はここに # なしのカテゴリーも表示させたかったので、こんな感じにカスタマイズしました。

当ブログでは、カテゴリーは各記事につき1つだけ設定して大分類としています。ハッシュタグにはカテゴリーよりも細かいキーワードを設定して、カテゴリー内部の小分類のように扱っています。

【修正方法】

①テンプレートで以下を検索します。

<div class='entry-tag'>

②検索した行のすぐ上に、カテゴリーを表示するコードを設置します。

<b:if cond='data:post.labels'>
ここにカテゴリー表示コードを設置する
<div class='entry-tag'>
<div class='entry-category'>
<b:loop index='i' values='data:post.labels where (l =&gt; l.name contains &quot;#&quot;) skip data:skin.vars.maxLabel' 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>
<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>

もし、ハッシュタグの代わりにカテゴリーを表示したい場合は、既存のハッシュタグコード<div class='entry-tag'> 〜 </div>の部分を上記のカテゴリー表示コードで置き換えます。

カテゴリー、タグの表示を右寄せにしたい場合は、以下の CSS を追記します。

.entry-category, .entry-tag {
    text-align: right;
}

padding、margin 等は、<a>タグのクラス名を変更することで対応可能なので適宜修正ください。

※クラス名は以下の早見表で確認できます。
Bootstrap 5 クラス一覧(早見表)

サイドバーに検索ボックスを設置して、デザインをカスタマイズ

JetTheme ではヘッダーの右端に検索マークが設置されています。

クリックするとボックスが出てきて検索できるようになっていますが、検索ボックスは常に表示させておきたかったので、サイドバーに検索ウィジェットを設置しました。

以下の記事で、検索ボックスの設置とデザインカスタマイズを紹介しています。

【Blogger】サイドバーの検索ボックスをカスタマイズ

【Blogger】サイドバーの検索ボックスをカスタマイズ

Blogger で検索ボックスをサイドバーに設置するときのカスタマイズをご紹介します。

関連記事の数を変更する(2022/3/31)

記事の下にサムネイル形式で表示される関連記事の数は変更することができます。

デフォルトでは4つですが、カテゴリー内の記事も増えてきたので6つに増やしました。

【修正方法】

テンプレートで以下を検索し、数字を好きな数に変更します。最大数は10だと思われます。

data-shuffle='4' data-title='Related Post'

また、PC 表示では関連記事の横並び数を3つ、スマホでは2つに変更しました。

デフォルトだと PC が2つ、スマホが1つですが、表示数が多いと縦に間延びしちゃうかなと。

【修正方法】

テンプレートで以下を検索します。

<div class='widget-title position-relative  mb-3 text-uppercase fw-light'><span>"+t.title+"</span></div>":"")+"<div class='row row-cols-sm-2'>"

row-cols-sm-2の部分をrow-cols-2 row-cols-md-3に置き換えます。

<div class='widget-title position-relative  mb-3 text-uppercase fw-light'><span>"+t.title+"</span></div>":"")+"<div class='row row-cols-2 row-cols-md-3'>"

こんな感じになります。余白、文字サイズはちょうど良くなるように調整しました。

PC の場合

JetTheme関連記事PC表示

スマートフォンの場合

JetTheme関連記事スマホ表示

ナビゲーションメニューを右寄せにする(2022/4/17)

ナビゲーションメニューはロゴのすぐ横に左寄せに配置されていますが、右寄せに変更しました。

修正前

ナビゲーションメニュー左寄せ

修正後

ナビゲーションメニュー右寄せ

【修正方法】

テンプレートで以下を検索します。

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

クラスに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'>

「注目の投稿」画像の遅延読み込みを解除(2022/5/27)

JetTheme では、「注目の投稿」ガジェットの画像は遅延読み込みされます。

ファーストビューに注目の投稿を設置する場合など、遅延読み込みを解除したい場合は以下の方法で解除できます。

【JetTheme】注目の投稿の遅延読み込みを解除する方法

【JetTheme】注目の投稿の遅延読み込みを解除する方法

JetTheme では、「注目の投稿」ガジェットの画像は遅延読み込みされます。ただ、注目の投稿がファーストビューに入る場合は遅延読み込みされないほうが良いですよね。注目の投稿の画像の遅延読み込みは、以下の方法で解除できます。

その他、QooQ から引き継いだカスタマイズなど

QooQ 時代から使っていた以下のカスタマイズは引き続き利用しています。リンクをクリックすると参考記事に飛びます。

▼ 参考:QooQ 時代のカスタマイズリスト

【Blogger】おすすめテンプレート QooQ カスタマイズ参考サイト一覧

【Blogger】おすすめテンプレート QooQ カスタマイズ参考サイト一覧

Blogger のテンプレート QooQ をカスタマイズする際、参考にさせていただいたサイトをまとめました。

▼ カスタマイズメモ

  • 本文中の自動アドセンス挿入はオフ。自動広告のような機能で便利そうだが、div 内の囲み枠の中とかにも入れてきて微妙な場合がある(文字数をカウントして入れてるのかな?)
  • Font Awesome から脱却。SVG アイコンはすべてクレジット表記不要のものに入れ替え。今はいろんなかわいいアイコンがあるね
  • jQuery からも脱却
  • 記事のシェアボタンは、設置有無とデザインを検討中

▼ 関連記事

JetTheme の特徴と機能。導入後の気づき

JetTheme の特徴と機能。導入後の気づき

JetTheme を導入して2週間ほど経ちました。今回はカスタマイズを通してこのテンプレートについて感じたことを自分なりにまとめてみます。

こちらの記事もよく読まれています
ブログを1カラムに変更した理由と、変更した結果(直帰率・平均ページ滞在時間)

ブログを1カラムに変更した理由と、変更した結果(直帰率・平均ページ滞在時間)

ブログのレイアウトを2カラムから1カラムに変更しました。この記事ではレイアウトの変更理由と、その結果直帰率がどうなったかなどを紹介したいと思います。

記事へのコメント・ご質問は こちら まで
NEXT PREV