公式テーマEmporioでは、記事上部にブログタイトルが常時表示されるようになっています。
いつでもトップページに戻れるありがたい仕様ですね。
これをスティッキーヘッダーと呼びます。
ただスマホなどで見た時には画面が狭く圧迫されるように感じるかもしれません。
それを解消するために、スティッキーヘッダーの背景を透過してみましょう！
本記事ではHTMLの編集でスティッキーヘッダーを透過する方法を解説します。
HTMLの編集手順
左のメインメニューから【テーマ】を選択し、カスタマイズ横の【▼】をクリックして【バックアップ】をしましょう。
それが終わったら、同じ画面の【HTMLを編集】をクリックして編集画面を開きます。
HTMLの編集画面では、Ctrlキー+FキーでSearch: という検索欄を表示させることで検索ができます。
HTMLの編集が終わったらプレビュー画面で確認して、保存をします。
スティッキーヘッダーのHTMLコード書き換え
カラーコードからrgbaの入手方法
透過させた背景を用いるにはカラーコードをrgbaに変換する必要があります。
以下のようなサイトを使って、rgbaに変換しましょう。
透明度もお好みで調整してください。
参考サイト様
WEBクリエイターの部屋【カラーコードからrgbaへ変換するツール】
現在使用しているスティッキーヘッダーのデフォルトカラーを用いたい場合、HTMLでheader.background.colorで検索してください。
その行の最後にvalue=でデフォルトのカラーコードが分かります。
当ブログではデフォルトのカラーコードは#263238です。
rgbaに変換して透明度を調整し、rgba(38,50,56,0.6)を使用しています。
HTMLの編集
先ず.centered-top-container.sticky,.sticky .centered-top{で検索します。
その下の行にある$(header.background.color)を入手したrgbaに置き換えます
書き出すとこうなります。
background-color:$(header.background.color)
}
↓↓↓
background-color:rgba(38,50,56,0.6);
}
これで、スティッキーヘッダーを透過できます！
参考ブログ様
