JetThemeではスティッキーヘッダーが採用されており、上部にヘッダーが表示されるようになっています。
画面を下にスクロールするとヘッダーが消え、上にスクロールするとヘッダーが表示されます。
ただこの動作はあまり好まれないようで、JetTheme利用者は固定してしまうことが多かったりします。
本記事ではスティッキーヘッダーのアニメーションを削除する方法や背景を透過させる方法、スティッキーヘッダーを解除する方法などを解説します！
スティッキーヘッダーを上部に固定する方法
スティッキーヘッダーのアニメーションを削除し、常に上部に表示させる方法を解説します。
CSSの追加方法
左のメインメニューから【テーマ】を選択し【カスタマイズ】をクリックします。
そこから【詳細設定】の【CSSを追加】を選択します。
【カスタムCSSを追加】にCSSを入力できます。
後述のCSSを入力したら保存をして、反映されているか実際にブログを確認しましょう。
スティッキーヘッダー上部固定CSS
追加するCSSは以下の通りです。
これでスティッキーヘッダーが常に上部に表示されるようになります！
参考ブログ様
【Blogger】JetThemeの導入とカスタマイズ（plz-reference-blog）
スティッキーヘッダーの背景を透過する方法
前項でスティッキーヘッダーを常に表示させておくと画面が狭くなるため、少し圧迫感があります。
これを軽減するため、スティッキーヘッダーの背景を透過させる方法を解説します。
rgbaカラーコードの入手
透過させた背景を用いるにはカラーコードをrgbaに変換する必要があります。
以下のようなサイトを使って、rgbaに変換しましょう。
透明度もお好みで調整してください。
参考サイト様
WEBクリエイターの部屋【カラーコードからrgbaへ変換するツール】
HTMLの編集手順
左のメインメニューから【テーマ】を選択し、カスタマイズ横の【▼】をクリックして【バックアップ】をしましょう。
それが終わったら、同じ画面の【HTMLを編集】をクリックして編集画面を開きます。
HTMLの編集画面では、Ctrlキー+FキーでSearch: という検索欄を表示させることで検索ができます。
HTMLの編集が終わったらプレビュー画面で確認して、保存をします。
HTMLの編集
#header {で検索します。
その下のbackground-colorがスティッキーヘッダーの背景色の指定になっています。
var(--jt-header-bg)の部分にrgbaカラーコードを入力すればOKです。
上記は実際に別ブログで使用しているもので、背景色白の不透過率90%となっています。
スティッキーヘッダーを無効にする方法
ヘッダーは一番上にあれば良いという場合もあると思います。
ここではスティッキーヘッダーを無効にする方法を解説します。
CSSの追加方法
左のメインメニューから【テーマ】を選択し【カスタマイズ】をクリックします。
そこから【詳細設定】の【CSSを追加】を選択します。
【カスタムCSSを追加】にCSSを入力できます。
後述のCSSを入力したら保存をして、反映されているか実際にブログを確認しましょう。
スティッキーヘッダー無効CSS
追加するCSSは以下の通りです。
これでスティッキーヘッダーが普通のヘッダーになります。
モバイルだけのスティッキーヘッダー無効CSS
上記の応用です。
モバイル表示だけスティッキーヘッダーを無効にすることもできます。
スマホは画面が狭いため、スティッキーヘッダーがない方が見やすいです。
スティッキーヘッダーを上部に固定する方法とも兼用できます。
スティッキーヘッダーを自分好みに変更！
スティッキーヘッダー関連のカスタマイズ方法を解説しました。
ぜひ自分好みに変更してみてくださいね！
