Blogger無料テンプレート「JetTheme」のテーマ設定について

はじめに

「after work lab」のテンプレートを約1年ぶりに変更しました。今使用しているのは2021年６月にリリースされた海外の無料テンプレート「JetTheme」です。

実際に触って見たところ、「JetTheme」はBlogger初心者でも簡単に使えるので、オススメの無料テンプレートだと思いました。

「JetTheme」の機能やデザインがご自分のブログに合ってそうな場合は、この記事を参考に一度使ってみては如何でしょうか。

お断り

ここで説明する内容は管理人がテンプレートを試行した結果を自己解釈で解説したものです。

公式の説明には無いものがあったり、一部食い違う場合があるかも知れませんので、ご容赦下さい。（公式はインドネシア語なので。。。）

「JetTheme」の特徴

「JetTheme」は無料なのに高機能・高品質なテンプレートです。使ってみて良かった点、残念だった点をお知らせしておきます。

良かった点

「JetTheme」は下記機能を標準装備してます。（V2.9時点）

・ダークモード

・lazylode（アドセンスにも対応）

・モバイル対応のハンバーガーメニュー

・自動目次

・自動サイトマップ（ラベル別）

・関連記事の自動更新

・ハッシュタグでの分類表示

・Sticky Sidebar

・ページャ

・コメント数表示

・トップに戻るボタン

残念だった点

・ブログのタイトルや説明がテキスト表示されない

・ヘッダーが１段で狭い

・日付の書式が標準的でない

・記事ページにラベルが表示されない

・トップページの表示はカード形式ですが、リスト形式は提供されてない

・ダークモードは「詳細設定」で変更できない部分がある

なお残念だった点はHTML/CSSの変更で修正可能なので、QooQをカスタマイズして使いこなしている方は、大きな障害ではないと思います。

設定前の準備

①今使用しているテンプレートは、「設定」→「カスタイマイズ」→「ダウンロード」で、必ずバックアップを保存しておいてください。

②「JetTheme」はダウンロードサイトから保存下さい。Githubのxmlファイルをダウンロードするのがオススメです。

理由は「JetTheme」は頻繁にマイナーバージョンアップを行っているので、導入したxmlファイルのコミットハッシュ値を覚えておくと、最新バージョン迄の変更履歴を簡単に追うことができます。

「JetTheme」の設定方法

「JetTheme」は下記手順でデザインの基本部分を管理画面で簡単に変更できます。

「テーマ」→「カスタマイズ」での設定

管理画面で「テーマ」→「カスタイマイズ」を実行すると、左側に「詳細設定」と「ガジェット」のメニューが表示されます。

「詳細設定」

「詳細設定」では10個のメニューがあり、色、フォントサイズ・太さ・イタリック、ロゴ幅が変更できます。

「_Main Color」
「_Typography」
「_Logo」
「_Header Color」
「_Menu」
「_Dropdown Menu」
「_Fotter Color」
「_Socket Color」
「_Button」
「_Comment Form」

また「CSSを追加」にユーザ独自のCSSを入力でき、デザインを変更できます。

「ガジェット」

「ガジェット」では「Menu」「Categories」「Hashtag」・・・等の表示/非表示を切り替えることができます。

「Hashtag」はラベルの頭に#を付けることで表示できますが、用途が無い場合は非表示にした方が良いでしょう。

レイアウトでの設定

「レイアウト」をクリックし「ガジェット」を表示します。

「Upload Image」

Header

「Logo」の設定

「Logo」のウィジェットをクリックし、ブログのロゴファイルのURLを入力してください。ロゴの画像サイズは170×55pxがオススメですが、横幅が長いものは「詳細設定」の「_Logo」で画像の幅を増やして下さい。

画像の種類は背景透過ができるpng形式かWebP形式のファイルを使用下さい。

（SVG形式のロゴも表示できると思いますが「ウィジェット」では設定できないので、説明は割愛します。）

「リンクリスト」

デフォルトでは「facebook」「instagram」が設定されてます。利用してないものは削除し、新しく追加する場合は、サイト名は小文字の英文字を入れ、リンク先のURLを入力下さい。

例えば、Twitterを追加したい場合は、サイト名に「twitter」と入れると、自動でTwitterのアイコンが登場します。

Before Blog～Before Post

「#Advertisement」

「JetTheme」ではデフォルトで8か所に広告を設定できます。広告を表示したい場所のウィジェットにアドセンスのコードを登録し、広告を貼らない場所の「#Advertisement」はすべて非表示にしてください。

アドセンスのコードの登録は、デフォルトで入っている<hr class="example-ads"/>を削除し、アドセンスのJava Scriptコード以外の部分を入れて下さい。

例えば下のアドセンスコードの場合、1行～2行のアドセンスのJava Scriptコードは登録せず、3行目以降のコードを登録します。

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXXXXXXXXXXXXXX"
     crossorigin="anonymous"></script>
<!-- Display blogger -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
     data-ad-slot="0123456789"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

なお、アドセンスのID設定は「Blogger無料テンプレート「JetTheme」のHTML設定について」の記事をご参照下さい。

「Featured Post」

おススメの記事をトップページに表示します。デフォルトは最新記事が表示されますが、任意の記事を選択可能です。

Post～After Blog

「ブログ投稿」

このウィジェットではメインページで表示する投稿数、投稿者の表示/非表示、コメント件数、ラベルの表示/非表示、共有ボタンの表示/非表示、投稿者のプロフィールの表示/非表示が設定できます。

なお、時刻の書式はここでの設定は反映されなく、日本式の表示も選択できません。今のところ、時刻の書式はHTML編集で修正するしかないようです。

修正方法は「Blogger無料テンプレート「JetTheme」のHTML設定について」の記事をご参照下さい。

「#You may also like」

関連記事のリンクがテキストで表示されます。関連記事を記事の途中で挿し込みたい場合は表示し、RELATED POSTで十分なら非表示が良いと思います。

Sidebar～Sticky Sidebar

Sidebarのウィジェット

サイドバーには「Popular Posts」「Categories」「Hashtag」「Blog Archive」「#Recent Post」がデフォルトで設定されてますが、これらの表示条件を変更できます。

なおウィジェットは場所をスライドすることで表示順序を変更できます。

Sticky Sidebar

この場所のウィジェットはスクロールするとトップに固定されます。例えば自己紹介のウィジェットをここに追加すると、自己紹介がトップに固定されます。

Footer

フッターには「About Us」「Learn More」「Follow Us」「Newsletter」のウィジェットが用意されてます。

「About Us」

<p>～</p>で囲まれた部分に自己紹介文を記入下さい。サイドバーに自己紹介を表示しない方は、ここを使った方が良いでしょう。

「Learn More」

Privacy Policy（個人情報保護方針）やDisclaimer（免責事項）の固定ページがあれば、ここにリンクを貼っておくと便利です。

「Follow Us」

各種ソーシャルメディアでのフォローを設定できます。日本では普及してないSNSが多いですね。

「Newsletter」

「JetTheme」では「follow.it」にメール登録することで、RSSリーダーでのブログ購読を設定できます。

ちなみに「after work lab」はGoogleニュースに登録済で「FeedBurner」で購読できるように設定してましたが、今年7月に「FeedBurner」での配信は廃止となりました。

「JetTheme」で「follow.it」が利用出来るようになっていたので良かったです。

「Copyright」

「2021 BlogName. 」の部分を運用しているブログ名に変更して下さい。

JetTheme Setting

「SVG Icons」

「JetTheme」では24種類のSVGアイコンが登録済です。SVGアイコンを追加する場合はこの場所に登録すると便利だと思います。

すべてのガジェットの設定が終わったら、保存ボタンを忘れず押して下さい。

以上で「JetTheme」の管理画面での設定の説明は終了です。

なお「JetTheme」のHTML設定については別記事にまとめましたので、下記をご参照下さい。

Blogger無料テンプレート「JetTheme」のHTML設定について - after work lab

はじめに 前回の記事では「JetTheme」の管理画面の設定について説明しましたが、今回はHTMLの設定について解説したいと思います。 この部分を設定しておかないと、SEOで損する恐れが出るので、一度ご覧になると良いかと思います。

  www.heavy-peat.com

まとめ

これまでカスタマイズで追加していた機能が「JetTheme」は最初から装備されているので、「JetTheme」はBlogger初心者向きのテンプレートだと思いました。

デザインもシンプルで、必要な機能を足したり引いたりすることで、ご自分のブログに合ったデザインにカスタマイズできると思います。

なお管理人は各種変更が「詳細設定」や「ウィジェット」の修正で簡単に出来るのに気づかず、HTMLを直接編集する無駄な作業をやってしまいました。

皆さんはアホな管理人と同じ作業を行わないようにお気を付け下さい。

気軽に足跡残してね！

この記事が「気になった・参考になった」と感じた方は、リアクションボタンか、ツイッターで♡いいねを押して、足跡を残して頂けると嬉しいです。

https://t.co/lsT75zjXRA

Bloggerのテンプレートを「QooQ」から「JetTheme」に変更しました。

日本で使用している人を見かけないので「JetTheme」を広めたく、テーマ設定の説明ブログを書いて見ました。

興味がある方は、是非ご覧頂き「JetTheme」をお試し下さい。#Blogger #JetTheme

— heavy-peat (@AfterWork_Lab) September 23, 2021

それでは今回の記事はこれでおしまい。