「Blogger」ブログのテンプレートを「JetTheme」に変更したい

少し前に「QooQ」にテンプレートを変更してみたんですが、「JetTheme」に変更してみました。

特に報告するほどの理由はないのですが、強いて言えば、もう少し見栄えが良いと良いなと思ったぐらいでしょうか。

「QooQ」テンプレートにも良いところがあるのですが、たまたまなのか。自分のブログでカスタマイズした際に、何かおかしなことをしてしまったのか。

ライトボックスが2重に重なって、開くことがあり、元々のテンプレートを再度使ってみたところ、変化がなかったので、んじゃ、折角だし「JetTheme」を使ってみようかなと思ったのが変更のきっかけとなりました。

「JetTheme」とは？

「JetTheme」とは、Bloggerのテンプレートです。「QooQ」のように、2カラムとサイドバーのあるレイアウトデザインをしています。

• 【外部URL】https://www.jettheme.com/

サイトから、無料でダウンロードができます。

英語表記なので、わかりづらいかもしれませんが、比較的直感で、ダウンロードページに行くことができるでしょう。

はじめから「目次」が備わっているのが良い

ほとんどのテンプレートでは、投稿記事の目次などを生成するために、テンプレートをHTMLでカスタマイズして、スクリプトを入力する必要がありますが、「JetTheme」では、その必要はありません。

「JetTheme」では、以下のように「目次」が折りたたまれた状態で表示されます。

はじめから「目次」を利用できるのですが、常に開いた状態にしたい場合には、HTMLで変更する必要があるでしょう。

「On This Content」をクリックすると、下のように「目次」が表示されます。

はじめから開かれたようにするには、どのようにすれば良いのでしょうか。

調べてみたものの、今のところわからないままです。

ダークモードが利用できる

ダークモードとは、日中は明るい色調のページ、深夜は暗い色調のページと、スタイルシートを変更して、閲覧時の目の負担などを軽減したりすることができます。

PCやスマホの環境に合わせて、自動的に変更されるページもありますが、ユーザーが好みで変更できるボタンを設けたりすることもあります。

「JetTheme」では、ダークモードに切り替えられるボタンがあります。

ブログに「JetTheme」を適用後、ブログの右上に、「月」のアイコンが表示されるようになり、クリックすることで、ダークモードになります。

暗くなるので、日中は見辛く感じるかもしれませんが、「太陽」のアイコンに切り替わるので、再度クリックすると、ライトモードに戻ります。

個人的には、スマホで見る際に、ダークモードがあると目に優しい感じがするので、歓迎です。

HTMLを変更せずにCSSを変更できる

「QooQ」でも、いくつかの個所はBlogger管理画面のテーマから変更することが出来ましたが、「JetTheme」では、さらに多くのCSSを変更することができます。

管理画面のテーマから、「カスタマイズ」をクリックし、詳細設定を展開すると、全部で12のカテゴリーでスタイルを変更することができます。

スクロールしていくと、まだまだある。

全部で12のスタイルを簡単に変更できるので、CSSが苦手と感じている人にも良いかもしれません。

デザインもスッキリしていて、個人的にかなり気に入りました。もうしばらく使用してみて、良いところ、悪いところを見ていきたいと思います。

「Blogger」のブログのテンプレートを「JetTheme」に変更してから、各投稿記事のヘッダー画像を変更していて、気づいたら、投稿記事の下に表示される関連記事のサムネイルのサイズがおかしくて、画質が悪い状態のものがあり、理由がわからず、記事にしてみました。

「JetTheme」とは、Bloggerのテンプレートで、個人的にはかなり気に入っているテンプレートで、無料版のほうなんですが、現在も使用しています。

さて、この「JetTheme」にテンプレートを変更してから、だいぶ時間が経つんですが、関連記事のサムネイル画像が劣化することがあり、なんでこんなことが起きるのか。しばらくほったらかしのままにしていて、ようやく原因がわかりました。

この関連記事って、Bloggerのテンプレートでは最初から備わっているものってないので、とても使い勝手がよいのですが、下の画像のように、「Blender」の関連記事のサムネイルが画質が悪い状態です。

ただ、全部の投稿記事だけでなく、テンプレートを変更する前の投稿記事のヘッダー画像は、画質に劣化もなく、普通に表示されています。

一部の投稿記事のヘッダー画像だけが、関連記事のサムネイルで劣化せずに表示されているので、劣化してしまうサムネイルの画像のサイズが画質、ファイル容量に違いがあるのではないか。と考えています。

画像サイズが原因か？

「Blogger」関連の記事は画質が劣化せず、表示されるので、ファイル容量や解像度、サイズなどを比較してみることにしました。

下の画像は、Googleフォトにアップロードしていた「Blogger」のヘッダー画像の情報です。

さらに、画質が劣化してしまう「Blender」のヘッダー画像の情報がこちらです。

ファイル容量が若干下回るものの、それが原因とは思えませんが、ファイル容量によって、表示のされ方が変わるのか。もう少し検証が必要かなと思われます。

Googleフォトから貼り付けないほうが良い？

個人的なことではあるのですが、ブログの画像はGoogleフォトから貼り付けています。

直接、Bloggerにアップロードして、画像を貼り付けることもできますが、管理面でGoogleフォトが使いやすいので、Googleフォトから貼り付けているわけです。

しかしながら、今回画質が劣化してしまう現象が起きているため、もしかしたらGoogleフォトから貼り付けることで、劣化してしまうのかなと考えたわけです。

まず、ブログのページ上で、画像のファイルパスを比較してみました。

下のパスは、Blogger関連の投稿記事に使用されている画像のものになります。

• https://blogger.googleusercontent.com/img/a/AVvXsEg0yjaHiTKMoFrpZW_eVsaLYtJmKJkcoKDuVekWD4rhCJnpAlPkRCrfwhNtNxee0-J6xudTOGUiODrCtmCGzIMFPgNkDBo8iWOzMJ9BzVfXD5VaDHiiH1BHl5EKdR2P_Mlizg6bxidCphEk2hWrOXFUJYXOmPRM543tbKCNUeBWmpbGuBofrQrN8ao=w410-rw-h176-c

更に、下のパスは、Blender関連の投稿記事に使用している画像のものです。

• https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJKMxivDxiryz3fxwr8vbNTf0Ad-toOsbxwEArLwhZ8FrngHeB5RG82A9EoTI4-oQUAabep3DwCfVcbLvIKfYF1X5atA1-l7SOrP3Ztl06KobPRMxOk7qq9N5Z7gY1fsD21vgObVbcOoBh_tUKGxyIdyRdt3L3gET7lXlKkJ9AHxwTUhBvgwfY7eQ/s72-w640-h320-c/blender.jpg=w410-rw-h176-c

画像自体のサイズがそもそも、違うことがわかりました。Blender関連の記事は、画像サイズが小さいため、引き延ばされて表示され、画質が劣化したようにひょうじされていたようです。

さらに、2つのパスを見比べてみると、ちょっとだけおかしいところがありました。Blenderのヘッダー画像のパスは、「Blender.jpg」とパス内に含まれているにも関わらず、「Blogger」のパスに「blogger.jpg」というような画像ファイル名が含まれていません。

また、ファイルパス「～img/a/～」と言う箇所と「～img/b/～」で違いがあり、格納されている場所も違うようです。

どうして、格納場所が異なっているのか。ファイル名がないのか。そもそも、貼り付け方は一緒なのに、読み込まれた画像のサイズが異なるのか。

原因がまだ不明です。

もしかしたら、ヘッダー画像に使用する画像は、Googleフォトから使用しない方が無難なのかもしれません。

ヘッダー画像だけ直接貼り付けてみる

JetThemeのテンプレートで、関連記事の画像が劣化してしまう現象で、もしかしたらと思い、Googleフォトから貼り付ける方法ではなく、直接貼り付けることにしてみました。

Bloggerの投稿記事作成時には、実は画像をドラッグアンドドロップで直接貼り付けることもできます。これは「パソコンからアップロード」するのと同じことなのですが、まずは試しに直接貼り付けてみました。

既に公開済みの投稿記事の画像を置き換える形で、Googleフォトから貼り付けた画像から、直接貼り付けた画像に置き換えて、関連記事のサムネイルを確認したところ、下の画像のように、綺麗に表示されました。

当初は、さっぱりわからないし、諦めていたいたんですが、画像の貼り付け方によって、表示のされ方が大きく異なるということがわかりました。

今回、テンプレートがJetThemeでこのような表示になってしまいましたが、他のテンプレートでも同じような現象が起こる場合は、貼り付け方を見直してみましょう。

もし、Googleフォトから貼り付けた際に、画質がおかしいと感じたら、直接貼り付けるという方法も試してみてください。

ただし、直接画像を貼り付ける場合、正直画像の管理がたいへんなので、テンプレート的に良く使われる画像は、直接貼り付ける。本文によって異なる画像を貼り付けたい場合は、Googleフォトから貼り付ける。と言った使い分けが必要かなと感じました。

少し前に「Blogger」の投稿記事で、テンプレート「JetTheme」を使用していて、関連記事の画像が劣化して表示される問題の記事を投稿しておりましたが、問題が解決しましたので、ご報告します。

そもそも、前回の投稿記事では、一旦問題は解決したかのようになっていましたが、画像の差し替え作業は、しんどくて、やってらねーわ！って感じでした。

「JetTheme」やめちゃおうかなってくらいになってましたが、その必要はありませんでした。どのように問題が解決したかは投稿記事のタイトルのとおり、最新の「JetTheme」テンプレートを使用したことで解決したわけです。

そもそも画像のパスがおかしかった

テンプレートをアップグレードする前の話に戻りますが、「JetTheme」で表示される関連記事の画像は、投稿記事のヘッダー画像になります。

このヘッダー画像のパスが異なっていたことで、比率が違った画像に刺し変わり、劣化したように表示されていました。

この問題は、画像のパスがおかしいのは、実は2021年にあった問題で、おそらくGoogleさんがやらかした問題でもあったようです。そのため、Blogger界隈では、どうしてこうなったと騒ぎになっていたようで、ネットで調べてみると記事が結構出てきました。

その問題が、2021年前よりも前の投稿記事に使用していた画像パスは、「1.bp.blogspot.com」というもので、最新の画像パスは「blogger.googleusercontent.com」というようになっています。

この画像パスの変更が、今回自分が遭遇した原因の一つです。

かなり前からブログを始めた

このブログ、実は結構前から始めていまして、2019年よりも前からやっています。その頃は、まだ古い画像のパス「1.bp.blogspot.com」のままでした。

そして、2021年もまだ「JetTheme」は使っておらず、Google純正のテンプレートを使用していたため、今回のような問題に遭遇するようなことはなかったので、「画像パス変更」にも触れることは無かったわけです。

「JetTheme」テンプレートを使用する前の投稿記事の画像は、変更前のパスのまま使用していたわけです。

それまでは問題はなかったのですが、「Blogger」で新しく投稿した画像では、パスが異なってしまうため、比率が異なってしまう画像に刺し変わってしまったようです。

つまり、新しく画像を変更していなければ、問題にはならなかったわけです。しかしながら、今後も新しい画像を投稿していくことは普通にあるので、困ってしまいます。

もしかしてアップグレードで解決？

色々悩みつつ、テンプレートを分析してみたり、考えられることや、気に掛けてくれた方から、SNSでコメントをいただいたりと、色々試してみたわけです。

ふと、Bloggerの管理画面のレイアウトページを見てみると、「JetTheme」のバージョンが「2.8.2」となっていました。

まさか・・・新しいバージョンなんて、あったりするわけないよな・・・と、「JetTheme」の公式サイトへ移動すると・・・新しいバージョンのものがリリースされておりました！！

新しく「JetThme」をダウンロードして、テンプレート確認するとバージョンが「2.9」と新しくなっているじゃないですか！

テンプレートを適用後、投稿記事の関連記事を見てみると、ちゃんと表示されている！！比率もばっちり！！問題解決です。

なお、バージョンアップさせる際には、公式サイトにて、事前に説明記事（英文）があるので日本語翻訳して良く読んでから行ってください。

ウィジェットが重複してしまうことがあります。