Smart Slider 3でスライド完成、次はヘッダーへ！
先週から取り組んできた Smart Slider 3（無料版）のカスタマイズ。
フェードイン表示に切り替えて、ナビゲーションボタンを非表示にし、さらに各スライド画像にカテゴリー一覧ページへのリンクを設定しました。これでクリックした後も迷子にならず、スライドの役割がしっかり機能するようになりました。ひとまず「スライドショー部分」は完成です！
今日からは、いよいよ ヘッダーメニューの改良 に取りかかります。
第一歩は「ヘッダーメニューをページ上部に固定して追従させる」こと。スクロールしても常にメニューが見えると、サイト全体の使いやすさがぐっと向上します。
当初、参考にしようとしたのは、ぽんぴろ.comさんの記事「【Cocoon】スマホヘッダー固定追尾！公式と別の方法で！」。どうやらCocoonテーマでヘッダー固定ができるようになったのは最近のことらしく、当初は不具合もあったようです。
Cocoon設定でヘッダーを固定してみた
以前はCocoonでヘッダー固定をするにはちょっとした工夫や不具合回避が必要でしたが、2025年現在、Cocoon設定メニューから簡単に「ヘッダー固定」ができるようになっています。しかもオプションもいくつか追加されていて、以前のような不具合も避けられそう。今回は、かめコンパスさんの記事「【Cocoon】ヘッダーのカスタマイズ方法｜おすすめのメニュー設定も初心者向けに解説」 を参考に設定してみました。
実際に行ったのは2点だけです：
- 「ヘッダー」タブ → ⬜︎ ヘッダーを固定する にチェック
- 「グローバルナビメニュー幅」 → ⬜︎ メニュー幅をテキストに合わせる にチェック
特に2つ目の設定を有効にしたことで、各カテゴリー名が等間隔に配置され、見た目がぐっと整う 効果がありました。ちょっとした変更ですが、デザインに微妙ながらも良い影響が出ています。
メニュー幅をテキストに合わせない場合：
メニュー幅をテキストに合わせる場合
こうして Cocoon設定から、メニューを固定し見栄えを良くすることができました！特に2つ目の設定で、各カテゴリー名が等間隔に並び、見た目がぐっと整いました。小さな工夫ですが、デザイン性にしっかり効果が出ています。
今後さらに、見栄えや表示幅などを確認しつつ、ヘッダーをより機能的にするアプローチを少しずつ進めていくつもりです。
