ヘッダーをスクロールに追従させる設定と重複した時のカスタマイズ【Cocoon】

※このページにはプロモーションが含まれています

画面を上にスクロールするとヘッダーが隠れて、下にスクロールすると再びヘッダーが現れるやつあるじゃないですか?

そのヘッダーの追従を設定したくてネットで1〜2ヶ月くらい調べて色々カスタマイズを試してみたのですが、結局は完成させる事が出来ませんでした。

そして今日、衝撃の事実が・・

スポンサーリンク

ヘッダーモバイルボタン

そうなんです。Cocoonのアップデート(1.8.5)で既に機能として追加されていたのです。

実装できる喜びと、今までの努力は何だったのかという悲しみで複雑な想いでした。とか言ってすぐ設定しましたけどね。

Cocoon設定 → モバイル

ヘッダーモバイルボタンの設定
  • Cocoon設定
  • モバイル
  • ヘッダーモバイルボタン

Cocoon設定にヘッダーモバイルボタンが追加されていました。まさに神対応

ヘッダーモバイルボタン

ヘッダーが2つ表示される場合

ヘッダーが重複して表示される場合は非表示にすればOKみたいですね。ワシの2ヶ月・・(´;ω;`)

.logo-header {
  display: none;
}

カスタマイズに対する今回の収穫

子テーマと追加CSSの使い方

子テーマの編集は『難しい』という勝手なイメージを持っていたので、今までは追加CSSしか利用していませんでした。

それぞれの役割がどの様なものか少しずつ理解してきたので、今回初めて子テーマ(Cocoon Child)でカスタマイズをする事ができました。

サイトが真っ白になったり(笑)色々ありましたが、私にとっては大きな1歩。

私なりの使い分け
  • 子テーマ:メイン(保存用)
  • 追加CSS:一時的なテスト用

ものぐさWEBノートさん

わいひらさんがものぐさWEBノートさんの記事を参考にされて機能を追加したとか。

もちろん私も昨日まで何度も見ていたサイトであり、確かに私が見た中でも1番分かりやすくて勉強になった記事です。

わいひらさんに参考にして貰うなんて凄い事ですよね。当サイトなんて「何だ、ただのクソサイトのゴミ記事か」と思われて秒でクローズされる可能性が否めません。※それ以前に辿り着かない

Comment

タイトルとURLをコピーしました