【Blogger】JetThemeの導入とカスタマイズ

2022/09/30

Blogger 副業

ホームページ、ブログ関連の記事はかなり久しぶりですが、今回は私が利用している無料ブログサービス「Blogger」の新テーマ「JetTheme」を紹介します。

今後メインブログもこのJetThemeに変えていこうかと考え中ですが、QooQの使い勝手の良さも好きなので色々と試している段階です。

JetThemeを導入する方法

JetThemeの導入は海外サイトからのダウンロードを行い、テーマを入れ替えていきます。最初は無料のブログバージョンで試してみるのが良いと思います。

・ダウンロード先>>Github-jettheme

このサイトの「Code」から「Download ZIP」をダウンロードして展開し「jettheme-v2」をBloggerの「テーマ」→「元に戻す」→「アップロード」でファイルを選択します。

JetThemeのデモ
JetThemeのデモ版

JetThemeはデフォルトでヘッダー部分にサイトのロゴ、メニューや検索マークなどが並びます。

さらにブログ版のホーム画面には注目の投稿、最新の投稿がメインに並び、サイドバーには人気の投稿や「カテゴリー」と「ハッシュタグ」の項目などが続きます。

「カテゴリー」と「ハッシュタグ」がデフォルトで分かれるのが個人的にはかなりGoodポイントで、Bloggerの弱点を克服してくれている気がします。

JetThemeデモ版フッター
サンプルのフッター部分

フッター部分にはリンクリストが並び、デフォルトで9つものSNSアイコンが表示されています。これらのリンクも自分で設定する必要があります。

JetThemeは最初からシンプルかつ精錬されたサイト構造になるように設計されていつつ、速度も速くSEO的にも強いBloggerテーマです。

(参照)JetThemenのデモサイト

私が長く使わせていただいているQooQと比べてもデザイン性の高さやもともと搭載されている機能の多さは上回っているように感じました。

ちなみに現在使用しているBloggerテーマのQooQも、色々とカスタマイズをして今の状態になっています。

JetThemeはデフォルトでもかなり形になる良いテーマです。ただし、カスタマイズにはそれなりの勉強が必要な、中級者向けのテーマと言えそうです。

とはいえ、ブログを日本で不人気な「Blogger」を使う、いい意味で異端な我々にはちょうど良い感じの難易度かなとも思います。(すみません)

Googleの「Blogger」自体がおすすめな理由もまとめています。

JetThemeのカスタマイズ

JetThemeはデフォルトでも多くの機能が搭載されていますが、各設定方法が特殊だったり、カスタマイズのためにHTMLでの編集が必要です。

基本的な設定からスタートして、カスタマイズを追記していきます。

必要なガジェットのみを表示させる

JetThemeは最初から多くのコンテンツを表示させています。特に「Advertisment」は各ページに配置されていますが、不要な場合は非表示にします。

Bloggerメニューの「レイアウト」から、不要なガジェットを選択し「このウィジットを非表示にする」をONにすればOKです。

Logo(ロゴ)の作成

当サイトのロゴマーク

JetThemeはヘッダーの左側にタイトルテキストではなく、サイトのロゴを表示させる設定になっています。

Logoは「レイアウト」の一番上「Upload Image」でパソコンから画層をアップロードして、生成されるURLをコピーし「Header」のLogoに貼り付ければ設定できます。

元々のサイズは55×170pxのようですが、多少大きくても問題ないですね。

私はPixlr Eという無料のフォトエディターで画像を作っていることが多いです。PNGファイルで出力しました。

右上のシェアボタンのみを消す

手始めに上の方からカスタマイズをしていきます。シェアボタンが私には不要だったので消してみます。

しかし「レイアウト」の「Header」にある「リンクリスト」のfacebookとInstagramを全て消去すると検索マークなども同時に消えてしまいます。

そのため、リンクリストのサイト名に「NONE」URLに「#」を記入したものだけを保存すると他のシェアボタンだけを消せます。

リンクリストのアイテム

このように記載することでシェアボタンは消えて、検索マークとメニュー・トグルボタンだけが残り、シンプルにできます。

右上の並びがシンプルになった
ヘッダー右上の検索マークとトグルボタン

私のサンプルサイトにていじってみました。ヘッダー部分がシンプルになるカスタマイズです。

スニペットを削除してシンプルに

ブログカードのスニペット(説明文)を削除するとトップ画面がスッキリします。

方法は、Bloggerメニューの「テーマ」「カスタマイズ」の右にある矢印から「HTML編集」を行います。

テーマのHTMLを編集する場合は、その前にバックアップをとっておくことをおすすめします。

下記の記述に「d-none」を加えるだけです。これでPCでもモバイルでもスニペットの表示が消えます。

<p class="item-snippet text-break mb-3 d-none"><b:eval expr="data:post.snippets.short snippet { links: false }"></b:eval></p>

PC版はスニペットを残し、モバイル版は削除する場合にはd-none d-sm-blockと書き換えます。

ファビコンを追加する

ファビコンはBloggerの通常通りの方法(設定から)でも追加可能ですが、HTML編集の中に記載する方法もあります。

通常では100KB未満の正方形の画像を使うようにと指示され、表示は16×16px表示怒鳴るようです。

JetThemeの場合は200×200px以上の画像が推奨され、通常よりも高解像度での表示ができるようになります。

方法は「Logo」の時と同じくレイアウトの「Upload Image」でURLを生成し、テーマのHTML編集で該当箇所に貼り付けます。

<Variable name="favicon" description="Favicon" type="string" value=""/>

というコードの「value=""」の部分にファビコンのURLを記入します。

投稿者の表示を消す

JetThemeは記事一覧表示すると、投稿ごとに投稿者の表示がされます。個人的には一人で書いているブログなので必要がなく、シンプルにするために削除しました。

HTMLの編集から下記の記述を削除すると消せます。

<b:if cond='data:jwidget.allBylineItems.author'><small class='me-2'><svg aria-hidden='true' class='me-1 jt-icon'><use xlink:href='#i-user'/></svg><data:post.author.name/></small></b:if>

ちなみにここを削除しても、各投稿自体には投稿者の表示は残ります。

参考にさせていただいたサイト

JetThemeは最近登場したテーマなのでまだ日本で使用されている方は多くないですが、実際にこのテーマを利用されている方もおられ、とても綺麗にカスタマイズされています。

今回の私のカスタマイズも、下記のサイトを参考にさせていただきました。心から感謝です。

リモスキ さんの
JetThemeのトップページをリスト形式にするカスタマイズ

私も取り入れさせていただいた、トップページのカード表示からリスト形式にカスタマイズする方法がわかりやすく解説されています。

また、JetThemeで使われているBootstrap 5のクラス一覧の早見表というのも作って下さっていて、たびたび参照させていただいています。

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

JetThemeを使った非常におしゃれなサイトです。サイトマップの作成やコンタクトフォーム作成などもあトんさんの記事のものそのまま使わせていただきました。

QooQ