WordPress・デザイン・web関連の小ネタや小技を紹介しています。MEDIA最終更新日:2018.10.30なこ長い文を読んだ後上のメニューまでスクロールで戻るのが大変...なこ別の記事を読もうとスマフォの戻るボタンで戻ったらGoogleまで戻されてイラッ...そんな問題を解決してくれるのがメニューの固定表示です。ナビゲーションが常にあれば迷子にもなりません。MEDIA(ライオンメディア)テンプレートのヘッダーメニュー固定方法を紹介します。WordPressのメニューは記事・カテゴリー・固定ページ・自由リンク・タグから自由に組み合わせて表示できるので一押しの記事を固定してもよいし、タグ一覧にしてもOKです!スマフォは表示領域が限られているので、なるべく固定要素を少なくする為にスクロールするとナビゲーションメニューだけ固定されるようにしました。[LION用]】項目を開く【■最初に開くメニューを選択】項目を「Gナビメニュー」にしておいてください。CSSを追加CSSを子テーマに追加していきます。Child」を有効にしてください。■FTPで開いて追加する「/wp-content/themes/lionmedia-child」内style.css■【外観】→【テーマの編集】で追加するstyle.cssstyle.cssファイルの一番下にはりつけてください。[LION用]】項目を開く「■</head>直上の自由入力エリア」部分に次のコードを貼り付けてください。「■</body>直上の自由入力エリア」部分に次のコードを貼り付けてください。});</script>ヘッダーとメニューの高さを取得して、パンくず表示がある場合はその分上に隙間を空けています。スクロールがメニュー以下になると固定、以上になると固定解除しています。JS隙間を作ると読み込み時に1秒くらい上にめり込んだ(padding未設定)状態になってしまうのでCSSで最初から隙間をあけておりますがパンくずは配置位置がページによってまちまちなのでやむなくJSで処理しています。MEDIA(ライオンメディア)テンプレートについては他にも記事を書いています。カスタマイズについてはもりもり追加していく予定です。大阪で15年、WEBデザイナーとして働いています。最近の趣味は子供が寝静まってからAmazonプライムで海外ドラマを見ること。好きな食べものはカレーと餃子。AMナコ様お忙しいなかご連絡いただき、ありがとうございます。やらせていただき、ご報告さしあげます。PMナコ様こんにちは。お忙しいなか、お返事ありがとうございます^_^ヘッダーメニューの固定とグラデーションが出来て、嬉しくて何度も自分のブログをみています。ありがとうございます。今後も記事の更新を楽しみにさせていただきます。蒸し暑い日が続きますが、お身体大切に頑張ってくださいませ。AMコメント失礼いたします!ページ上部のカテゴリーメニューのカスタマイズはどのようにされたのでしょうか?デフォルトはホバーすると文字が明るくなるだけですので、このサイトのように各メニューをボックス化したいです。AMOKさんおはようございます。コメントありがとうございます。MEDIAヘッダーカスタマイズ方法について記事を書きます!近々いうていますが、今から進めてまいります(^o^)記事公開しましたらこちらでもご報告いたします。ご参考にして頂けたら幸いです。AMこちらの記事を作成いたしました。参考にさせていただいております。スマホの表示ではなくて恐縮なのですが、ヘッダーメニューの色を変更するにはどうしたら良いでしょうか?いろいろなところを見て回っているのですが、そのことについては一切触れていなく、どうしてもわかりません。こちらのサイトのようにきれいなグラデーションで色が変わる設定もできるのでしょうか?どうかご教授下さい。AMみおさんメールでもお問い合わせありがとうございます!style.cssに以下のCSSを追加するとグラデーションがアニメーションするヘッダーになると思います。このCSSではグラデーションベースを背景として指定してCSSアニメーションで背景を動かしています。コメントをキャンセルメールアドレスが公開されることはありません。大阪で15年、WEBデザイナーとして働いています。最近の趣味は子供が寝静まってからAmazonプライムで海外ドラマを見ること。好きな食べものはカレーと餃子。本職はネットショップの店舗運営を6年ほどやっております。投稿一覧WEB広告業・SEO対策・WEBコンテンツ作製等、WEB業界に携わって14年。いろいろなWEB知識を生かしてメディア事業等の会社運営中。当サイトでは主にSEO担当として参加しております。WordPress.。