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

ブログ運営 #Blogger #JetTheme #カスタマイズ

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

当ブログでのカスタマイズ内容・修正方法をこちらの記事で紹介していきたいと思います。

以下、JetTheme 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 v5.0 公式サイト

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

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

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 Icons」ガジェットに、<symbol>タグで囲んだ SVG コードを追加入力して保存。

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

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

<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 です。

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

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

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

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

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

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

記事に更新日を表示、日付の書式を変更

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

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

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

※追記
日付の書式変更に関しては、JetTheme v2.9では管理画面から行えるようです。
「レイアウト」→「ブログの投稿」ガジェット→「公開時刻を表示」欄に、以下のいずれかを入力することで設定可能とのこと。

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

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

"JetTheme" yyyy/m/d 日付フォーマット対応版リリース！ • ガジェおた（本館）

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

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

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

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

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

iOS Safariのアクションバー表示エリアはタップイベントをブロックする | Orime

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

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

#back-to-top{display:none}

※追記：現在はスマホの画面サイズのみ非表示としています。

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

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

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

#dark-header{display:none!important}

※追記：その後、ダークテーマはオンにしました。

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

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

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

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

【修正方法】

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

<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 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>

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

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

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

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

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

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

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

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

ナビゲーションメニューを右寄せにする

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

修正前

修正後

【修正方法】

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

<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'>