ブログデザインをJetThemeに変更。独自のカスタマイズも紹介

今更ながらBloggerテンプレートをQooQからJetThemeに変更しました。ページ読み込み速度の向上が主目的です。あとは久々にデザインやコード周りをいじりたかったのも変更した理由の一つです。

これまでブログを見てくださった方が再訪しても違和感なく閲覧できるように、機能やデザインの配置は過去のものをなるべく踏襲しつつアップデートしました。カスタマイズ方法は他の方々が紹介しているものが殆どなので省略しますが、一部オリジナルな改良も加えたので少し紹介します。

なお、一通りのページは確認しましたが、万一表示の不具合や機能不全があればコメント等でお知らせ頂ければ幸いです。

Xのアイコン変更とダークモードでの色切り替え

JetThemeはテーマ本体の更新が2022年4月で止まっているため、SNSアイコンが現Xではなく旧Twitterのままになっています。Twitterのままでも特に問題なさそうですが、なんとなく変更してみました。

※HTMLを編集するため、真似される場合は万一に備えてテーマのバックアップを取ることをおすすめします。

XのSVG画像を導入

まず、XのSVG画像をテーマに導入します。今回は公式のブランドツールキットからSVGロゴデータを入手しました。SVGファイルをメモ帳などテキストエディタで開き、テキストデータを一部加工してHTML内に設置します。JetThemeの場合、BloggerのレイアウトメニューにSVG画像導入用のガジェットが用意されているので、他の既存SVGの形式を参考に、

• <svg>タグを<symbol>タグに変更
• width, height, fill（fillはsvgタグ内とpathタグ内のもの両方）を削除
• xmlns属性を削除
• idを設定（Xロゴにi-twitterを設定し、JetTheme内のTwitterロゴのidはi-old-twitterとした）

とし、テーマ内にSVGデータを格納しました。

idについては、元々TwitterロゴだったところがそのままXロゴに置き換わるように、もとのTwitterロゴのidを流用しました。Xロゴには新しいidを設定して、該当部分は自分で書き換える方法でもOKです。

ライト/ダークモード色の設定

JetThemeではライト/ダークモードの切り替え機能が備わっているので、どちらでも見やすいようにSNSシェアボタン部分の色を設定しました。色は上記ページ内のブランドガイドラインに従い、白地に黒、あるいは黒地に白を設定しました。

設定方法はJetTheme内のデフォルトCSSのvar()関数を参考にしました。

まず、テーマ内で色を定義します。Bloggerメニューの「テーマ」→「HTMLを編集」から

-----------------------------------------------
JetTheme Blogger Template
Name		: JetTheme Core
Version		: 2.9
Designer	: jettheme
URL		: www.jettheme.com
-----------------------------------------------
*/

:root {
--bs-font-sans-serif: $(body.text.family);
/* 省略 */
--x-logo-color: #FFFFFF;
--x-logo-bg: #000000;
}
.dark-mode {
/* 省略 */
--x-logo-color: #000000;
--x-logo-bg: #FFFFFF;
}

のように、テーマHTMLの最初の方にある:root{} と .dark-mode{} 内に「--x-logo-color」 と 「--x-logo-bg」 を設定。今回は、ライトモードでは黒背景に白ロゴを、ダークモードではその逆になる設定です。この方法はJetThemeで他にライトモード/ダークモード用の色を追加したい場合にも応用できます。

Xシェアボタンの設定の書き換え

続いて、SNSシェアボタンの設定を行います。HTML編集画面内でid='JetShare'を検索しヒットする部分の少し下に変更箇所があります。もともとのTwitterシェアボタン部分について、

<a class='me-2 mb-2 btn btn-sm jt-icon-center text-white rounded-pill' expr:href='&quot;https://twitter.com/intent/tweet?url=&quot; + data:post.url.canonical' rel='nofollow noopener noreferrer' style='background-color:#55acee' target='_blank' title='Tweet This'><svg aria-hidden='true' class='jt-icon'><use xlink:href='#i-twitter'/></svg></a>

の部分を以下のように書き換えます

<a class='me-2 mb-2 btn btn-sm jt-icon-center text-white rounded-pill' expr:href='&quot;https://twitter.com/intent/tweet?url=&quot; + data:post.url.canonical' rel='nofollow noopener noreferrer' style='background-color:var(--x-logo-bg);' target='_blank' title='X(旧Twitter)にポスト'><svg aria-hidden='true' class='jt-icon' style='fill: var(--x-logo-color);stroke: none;'><use xlink:href='#i-twitter'/></svg></a>

すなわち、もともとのaタグ内の background-color の色指定を var(--x-logo-bg) に変更し、svgタグ内にstyle='fill: var(--x-logo-color); stroke: none;' を追加しました。また、テキストを日本語の「X（旧Twitter）にポスト」に変更しています。（今回は、JetThemeのもともとの書き方に合わせてタグ内に直接styleを設定しましたが、独自のクラス名をつけてCSSで設定しても良いかもしれません。）

以上でライト/ダークモードでXのシェアボタンの色が切り替わるようになります。

なお、色の切り替えが不要の場合は、background-colorとfillにそれぞれ背景色とロゴのカラーコードを指定すればOKです。

記事ページ上のコメントアイコンを常に表示

JetThemeでは記事上の日付横にコメント数とアイコンが表示されます。また、コメントアイコンは記事下のコメント欄へのリンクとなっています。初期設定ではコメント数が0の場合にはこれらは非表示となりますが、リンク機能を生かしたかったのでコメントが無い場合でも表示するよう変更しました。

該当部分の書き換え

書き換えるのはHTML編集画面にてid='JetPost'で検索してヒットする部分の少し下にある

<b:if cond='data:post.numberOfComments gt 0 and data:jwidget.allBylineItems.comments'>
<a class='text-reset' href='#comments'><svg aria-hidden='true' class='me-1 jt-icon'><use xlink:href='#i-comment'/></svg><data:post.numberOfComments/></a>
</b:if>

の部分です（すぐ下に</header>や<b:include data='post' name='JetShare'/>があります）。

ここについてb:ifタグ内

<b:if cond='data:post.numberOfComments gt 0 and data:jwidget.allBylineItems.comments'>

を以下↓のように書き換えればOKです（太字部分を削除）。

<b:if cond='data:jwidget.allBylineItems.comments'>

これでコメント数が0でもアイコンは表示され、常にコメント欄へのリンクが機能します。

テンプレートタグの意味

data:post.numberOfComments は現在の投稿内のコメント数を示し、gt 0 の部分は比較演算子で「0より大きい」を表すようです。すなわち、元々の条件式から「コメント数が0より大きい（1件以上のコメントが存在）」の部分を削除しています。

参考リンク

• data:posts[i].numberOfComments (Blog|FeaturedPost|PopularPosts) - Blogger Data Documentation - Blogger Code PE
• Bloggerの制御用タグを使う

コメントフォームの背景色変更

JetThemeでダークモードを使用する場合、コメントフォームの背景色を設定することをおすすめします。埋め込みコメントフォームの文字色は黒系で固定ですが、ダークモードの設定で背景色が暗くなり文字が見づらくなる場合があります。

テーマデザイナー（「テーマ」→「カスタマイズ」）にて「詳細設定」内の「_Comment Form」の背景を白系の明るい色に設定するか、

CSSで#threaded-comment-formの背景色を白系の固定色に設定すると良いです。

#threaded-comment-form {
  background-color: #F4F5F7; //白系の明るい色を設定
}

上記二つは適用箇所が微妙に異なります（#threadheaded-comment-formがコメントフォーム背景でその上に_Comment Formの色が設定されるようです）。