[Blogger] JetThemeレイアウト変更方法

2026/09/03

Blogger HTML/CSS JetTheme


JetThemeのカスタマイズ方法、今回はレイアウト関連です!

JetThemeのレイアウトは独特な設定がいくつかあるので、できるだけ細かく解説していきます。


ガジェットは削除せずに非表示に

JetThemeには初期状態で多くのガジェットが入っています。

ただ削除してしまうと使いたくなった時に困るものもあると思うので、削除はせずに非表示にしておくのがオススメです。


非表示にしたいガジェットの右上の🖊マークをクリックして編集画面にします。



上の方に【このウィジットを表示する】という項目があるので、切り替えて非表示にします。

(緑色から灰色になります。)



その状態で保存をすれば、ガジェットの左にある👁マークに斜線が入り、非表示になっていることが確認できます。


↓↓↓


この方法で、ガジェットは削除せずに非表示にしておきましょう。



タイトル非表示には「#」

サイドバーやフッターにガジェットを追加するときに、タイトルが不要な場合もあります。

ただJetThemeはタイトルを未記入のままにすると……



タイトルはないものの、タイトル枠が表示されてしまいます。



タイトル枠ごとタイトルを非表示にしたい場合、タイトルに「#」と入力することで完全に非表示にできます。



「#」を先頭につければタイトル枠ごと非表示になるので、ガジェットの判別用にタイトルをつけておくこともできます。



上記のように「#○○○○」と入力してもタイトル枠ごとタイトルが非表示になるので、活用してみてください。



画像のURL取得用【Upload Image】

レイアウトの一番上に【Upload Image】というガジェットがあります。

これは画像をアップロードして、そのURLを取得するためのガジェットです。



【Upload Image】の右上の🖊マークをクリックすれば、[イメージ]の設定と言う画面が開きます。



英語で説明がありますが、一応手順を解説します。

画像のURL取得の手順は以下の通りです。


  1. 【Upload Image】を開く。
  2. 【パソコンからアップロードする】から画像をアップロードする。
  3. 【保存】をクリックする。
  4. 再度【Upload Image】を開く。
  5. 画像のURLが表示されているのでコピーする。


この機能は便利なので、覚えて活用していきましょう!

次項のヘッダー画像URLを入力する際にも使えますよ。



ヘッダー画像関連



ヘッダー画像【Logo】

Headerの【Logo】で、ブログ右上のヘッダー画像を指定できます。



コンテンツに画像のURLを入力すればOKです。

画像のURLの取得は前項の【Upload Image】を活用しましょう。



画像サイズ変更方法

画像のサイズ(横幅)はテーマの【カスタマイズ】から変更可能です。



詳細設定の【Logo】で、50~500pxで指定可能です。



縦幅が大きい画像だとヘッダー部分が幅を取ってしまうようになるため、横長の画像を用意するのがオススメです。



ヘッダーアイコン関連



ヘッダーアイコン設定【Icons, Dark, Search】

Headerの【Icons, Dark, Search】でヘッダーのアイコンを設定できます。



ヘッダー部分のシェアボタンは不要という方が多いと思います。

ただリンクリストを全て削除してしまうと他のダークモードボタンや検索ボタンも消えてしまいます。

そのためリンクリストのサイト名とサイトURLに「#」を入力します。これでシェアボタンだけを非表示にすることができます。


↓↓↓


この方法だと見た目には非表示にできるのですが、見えない空白ボタンが押せる状態となっています。

完全に非表示にしたい場合は以下のCSSの追加で対応しましょう。


ヘッダーシェアボタン非表示CSS

テーマの【カスタマイズ】から【CSSを追加】でカスタマイズCSSを追加します。



ヘッダーのシェアボタンを非表示にするCSSは以下の通りです。


/*ヘッダーシェアボタン非表示*/
.header-social {
display:none!important
}


入力して右下の保存をクリックして完了です。

これでヘッダーのシェアボタンを完全に非表示にできます。


ダークモードボタン非表示CSS

ライトモードとダークモードに変更するボタンがありますが、不要な場合は削除することも可能です。


テーマの【カスタマイズ】から【CSSを追加】でカスタマイズCSSを追加します。

ヘッダーのダークモードボタンを非表示にするCSSは以下の通りです。


/*ダークモード非表示*/
#dark-header{
display:none!important
}


入力して右下の保存をクリックして完了です。

これでダークモードボタンを非表示にできます。



日付の日本向き表示方法

Postの【ブログの投稿】から、日付を日本向きの表示に変更できます。



右のタブから選択できるのですが、これは反映されません。

左の公開時刻のプレフィックスに入力する必要があります。



「yyyy/MM/dd」と入力すれば2026/09/03という表示になります。

他にも以下のような表示が可能です。


「yyyy/M/d」→ 2026/9/3

「yyyy-M-d」→ 2026-9-3

「yyyy-MM-dd」→ 2026-09-03


お好みの日本向き表示に変更してみてください。



ラベルガジェットのリストとクラウドの役割

ラベルガジェットは、ラベル(カテゴリー)の一覧を表示させるガジェットです。



本来は表示形式として【リスト】と【クラウド】が選べるのですが、JetThemeではそれが【カテゴリー】と【ハッシュタグ】として扱われています。


リスト → カテゴリー

クラウド → ハッシュタグ


ブログの記事を書く際にラベルをつけられますが、カテゴリーには「○○○○」ハッシュタグには「#○○○○」のように使い分けができます。

大まかなカテゴリーはそのままで、細かいカテゴリーにはハッシュタグをつける形です。


例えば、表示に【リスト】を選択してハッシュタグ付きのラベル「#○○○○」を選択しても表示はされません。


便利な機能なので、ハッシュタグは上手く使っていきましょう!



JetThemeのレイアウトには機能がいっぱい!

JetThemeのレイアウトは独自の機能が多くあり、慣れないと難しく感じることもあるかと思います。

でも使いこなせるとレイアウトだけでも色々カスタマイズできるので、挑戦してみてくださいね!



参考ブログ様

【Blogger】JetTheme カスタマイズ方法一覧(リモスキ)

【Blogger】JetThemeの導入とカスタマイズ(plz-reference-blog)


にほんブログ村 ブログブログ ブログサービスへ ブログノウハウランキング 

 ※当ブログはアフィリエイト広告を利用しています※

このブログを検索

まとめ記事

現在の使用テーマ

EmporioからQooQ list版に変更しました。(2025年11月)




QooQ