張り付き設定について
テーマエディターの「Header Center」を使用しています。
最上部のロゴはそのまま、メニューのみを「張り付き」でsticky設定にしたいのですが、上手く作動しません。
・Hakoniwa Tools、Hakoniwa Blocks以外のすべてのプラグインを無効化
・Hakoniwa ToolsのjQuery読み込みを「読み込まない」に設定
上記は試しましたが、やはりstickyは機能しませんでした。
対処法がございましたらお教えいただけますと幸いです。
何卒よろしくお願いいたします。
4 Replies
Hakoniwa に限らず他のテーマ(デフォルトで同梱されているテーマも含む)にも当てはまる話なのですが「張り付き」を設定した際にどんなクラスが付与されて、どんなCSSが効いているのかを理解した上でブロックを使用してコンテンツを作らないと扱いが難しいかもしれません。
例えば添付画像のようにテンプレートパーツの中身を取り出して、その取り出したナビゲーションブロックをグループブロックで囲んで「張り付き」を設定すれば希望される動きに近くなると思います。
ただ、この方法だとヘッダー部分をテンプレートパーツとして一括管理ができず、全ページに「張り付き」を効かせたいなら他のテンプレートに対しても同じような作業が必要かなと思っています。これだとあまりブロックテーマのメリットを活かしきれないな・・・とは感じています。
他にもいい方法を知ってる方がいるかもしれません!
早速のご返答、誠にありがとうございます!
テンプレートパーツ丸ごとであれば問題なく張り付きが可能なんですね。
おっしゃるとおり、テンプレートパーツから中身を取り出して……だと全ページにその対応が必要になるので現実的ではないですね。。
現状ですとロゴとメニューは横並びのレイアウトの方が現実的なようです。
ありがとうございました!
やり方考えてみました。添付動画のような動きになればOKという前提ですが、テンプレートパーツではなくパターンにすることで一元管理もできます。
やり方は、テンプレートパーツ「Header Center」の中身を取り出して添付画像のようなブロック構成に並び替えて「同期パターン」を作成(ナビゲーションブロックをグループ化して、そのグループ化したブロックに対して「張り付き」設定をするのがコツです)
同期パターンは「nav_only_sticky」などわかりやすい名前にしておいて、編集する際は「オリジナルを編集」を選択すればOKです。
この「nav_only_sticky」のパターンを全てのページのヘッダーと差し替えれば一元管理できるかな、と思います。
方法お考えいただきありがとうございました!
気付くのが遅くなってしまい、失礼致しました。
なるほど……! とても参考になります。
ひとまずCSSとjsで済ませていたので、改修や別件で必要になりましたらこちらの方法で試させていただきます。
ありがとうございました!