【Blogger】JetThemeカスタイマイズ

   Latest updated Posted 2023/ 05/ 07
JetTheme, カスタマイズ

今回、Bloggerテーマとして、JetTheme Version 2.9を導入しました。導入後にJetThemeテーマをカスタマイズしておりますので、その内容について紹介していきたいと思います。

現在進行中ですので、どんどんアップデートしていきますので、ときどき見て頂けるといいかと思います。

JetThemeカスタマイズの参考サイト

私は、HTMLに関する知識・経験が、ほとんどない状態(ゼロ)、2021年ごろからBloggerを使い始めてブログを書いて、またBloggerテーマをちょこちょこカスタマイズしています。

JetThemeのカスタマイズにあたり、欠かすことのできない下記のサイトを紹介したいと思います。下記サイトがなかったら導入してカスタマイズはできなかったと思います。大変ありがとうございました。

皆さんにも、ご参考になるかと思います。困ったときはぜひご覧頂ければと思います。

JetThemeカスタマイズの目標

少しでも読みやすくて使いやすいブログを目指して、JetThemeのカスタマイズに取り組んでいます。そのために、「見た目のスッキリさ」、「ブログの表示速度の速さ」に力を入れてカスタマイズしています。

つまり、JetThemeカスタマイズは、少しでも以下のようになるように行っています。

  • 見た目のスッキリさ
  • ブログの表示速度の速さ

それでは、私が行っているカスタマイズを紹介していきますが、

テーマを変更する前に、今のテーマのバックアップを強くお勧めします。
テーマのバックアップ!!Bloggerテーマをいじる前には必ずバックアップしましょう。

JetThemeテーマの導入

バックアップをとったら、JetThemeサイトからテーマをダウンロードして導入しましょう。

詳しい導入方法は、こちらをご覧いただければと思います。

JetThemeのCSS変更の基礎知識

JetThemeは、Bootstrapという世界で一番人気のあるフロントエンドライブラリを使っています。ですのでCSSもできるだけBootstrapの用意したクラスなどを用いてカスタマイズするのがいいかもしれません。

なお、追加のCSSは、/*Your custom CSS is here*/の下に追記しているのがいいと思います。/*Your custom CSS is here*/の上はデフォルトのCSSが記載されています。

初期状態の見た目

JetThemeを導入直後の記事も何もない初期状態の見た目です。

JetTheme, 初期状態
JetThemeの初期状態の見た目

ガジェットの整理

JetThemeは、初期状態では多くのガジェットが表示されます。多すぎる感じです。不要なガジェットは表示しないようにしましょう。

Bloggerの設定画面のレイアウトから、不要なガジェットを選んで「このウィジェットを表示にする」をOFFにすれば表示されなくなります。

またアイコンも下記のように変わりますので、確認いただければと思います。

  • ガジェット表示 :
  • ガジェット非表示 :

個別記事上部のソーシャルメディアシェアボタン非表示化

JetThemeの初期設定では、個別記事上部にソーシャルメディアのシェアボタンがズラリと並んで表示されています。スッキリしたかったので非表示にしました。

>ズラリと並んだソーシャルメディアのシェアボタン, JetTheme
ズラリと並んだソーシャルメディアのシェアボタン

非表示にするために、JetThemeのHTMLコードを変更します。<b:includable id='JetShare' var='post'>を検索して、以下のようにdivタグで囲まれた部分をコメントアウトします。 

<b:includable id='JetShare' var='post'>
    <b:if cond='data:jwidget.allBylineItems.share'>
        <!-- シェアボタン非表示　<div class='social-share mb-3'>
            <div class='d-flex fs-5'>
                <a class='me-2 mb-2 btn btn-sm jt-icon-center text-white rounded-pill' expr:href='&quot;https://www.facebook.com/sharer.php?u=&quot; + data:post.url.canonical' rel='nofollow noopener noreferrer' style='background-color:#3b5998' target='_blank' title='Facebook Share'>
                    <svg aria-hidden='true' class='jt-icon'>
                        <use xlink:href='#i-facebook'/>
                    </svg>
                </a>
                <a ・・・・・・・・・・・
                    ・・・・・・・・・・・・・・・
            </div>
        </div> シェアボタン非表示-->
    </b:if>
</b:includable>

これで、個別記事上部にソーシャルメディアのシェアボタンが非表示化されます。

目次の変更

JetThemeでは、自動目次が初期状態から個別記事の上の方に表示される仕様となっています。ちょっとデザインが好みではなかったので、JetThemeの自動目次を非表示にして、前から使っている自動目次を使うことにしました。

JetThemeの自動目次の非表示

JetThemeのオリジナル自動目次を非表示にするには、JetThemeのHTMLコードの修正が必要です。JetThemeのHTMLコードの上の方に、以下のようなコードがありますので、
その中のvalue="true"を
value="false"に変えましょう。 

<Variable name="autoTOC" description="Table of content" type="string" value="ture"/>

これで、JetThemeのオリジナル自動目次は非表示になります。

置き換える自動目次

置き換える自動目次は、スケ郎のお話さんの、「目次を簡単に自動生成(忙しい人向けのコピペ素材)」を参考にして作りました。

詳しくは、スケ郎のお話さんのサイトをご覧頂ければと思います。

以上、目次の変更でした。

投稿日の書式変更と更新日追加

投稿日の書式を変更し、更新日も追加しました。RELATED POSTの投稿日の書式変更は検討中で、まだできていませんが、詳しくは以下をご覧頂ければと思います。

トップページのWidgetタイトルの見た目を変える

トップページのメインとサイドバーのタイトルの見た目を変えました。タイトル名そのものと、アンダーラインを入れたりと見た目を変えました。詳しくは以下をご覧頂ければと思います。

【Blogger】トップページの最近の記事一覧(Recent posts)のカスタマイズ

トップページの最近の記事のリンク範囲が狭いので、カード全体がリンクになるようにカスタマイズしました。詳しくは以下をご覧頂ければと思います。

entry-titleの書式変更

個別記事の一番上に表示される、Blogタイトルの書式を変更しました。
以下の図の部分です。

entry-titleの書式変更, JetTheme
書式変更の場所

以下のCSSで変更できます。お好みの書式に変更頂ければと思います。

.entry-title {
color: var(--jt-heading-color);
}

すきまは、HTMLで調整されているので、Bloggerテーマから「HTMLを編集」をクリックしてHTMLを開きましょう。そして<b:includable id='JetPost' var='post'>を検索して探します。その4行ぐらい下に以下のコードがあります。mb-4を修正することで、すきまの調整ができます。 

<h1 class='entry-title mb-4'><data:post.title/></h1>

以上、entry-titleの書式変更でした。

まとめ

今回は、BloggerのテーマJetThemeのカスタマイズを紹介してきました。これからもJetThemeのカスタマイズをどんどん紹介していきたいと思います。

私は、HTMLについては、素人です。間違いがあるかもしれませんが、ご容赦頂ければ幸いです。

最後まで記事を読んでいただきありがとうございました。

Jetthemeカスタマイズは、こちらにまとめてます

- スポンサーリンク -

Next Post Previous Post