yStandardカスタマイズ: メニューボタン(のみ)固定に

yStandardカスタマイズ: メニューボタン(のみ)固定に
2020年1月27日

このブログでも利用させてもらっている、WordPress用テンプレートyStandardのカスタマイズを紹介します。

CSSを追記してブログの右上にある、メニューボタンの表示を固定(スクロール追従)します。

ヘッダー(丸ごとの)固定であれば公式の機能に組み込まれている

もし、ヘッダー(タイトルロゴ + メニュー)丸ごとを固定をしたいのであれば、yStandard公式の機能が対応していますので、そちらを利用するのがベストだと思います。

しかし、タイトルロゴは固定したくない

タイトルロゴまで固定すると、表示領域を侵しすぎるし、個人的にはちょっと押しつけがましい気がします。

というわけで、このブログではタイトルロゴは非固定。
この場合は、追加CSSが必要になります。

CSSサンプルコード

CSSを追加する場所については、yStandard公式の解説を参考にしてください。

.h-nav__btn {
  position: fixed;
  top: 43px;
  background-color: rgba(255,255,255, 0.8);
  border-radius: 10px;
  padding: 9px 8px 0px 8px;
  margin-right: -8px;
}

/* メニュー表示時にはメニューボタン背景を削除 */ 
#h-nav__toggle:checked~.h-nav__btn {
  background: none;
}

スクロールしていった際に、メニューボタンと記事の文字が重なって汚くなるのを、メニューボタンに半透明の背景を付けることで防いでいます。

背景は角丸にした方が自然かと。border-radius: の数値は好みで。

top: の数値も好みかと思います。このブログではスクロールを全くしていない状態で、ロゴときれいな関係で横に並ぶよう調整しました。

以上になります。
スクロールされない固定の要素を設置するUIって、賛否両論です。
自分のブログで試行錯誤してみると、この問題に対する視点を深めるきっかけになると思います。