ヘッダーとグローバルバーを一つに（ステッキバー）して、スクロールに追従させる方法 - CSSカスタマイズ相談 https://wp-cocoon.com/community/customs/%e3%83%98%e3%83%83%e3%83%80%e3%83%bc%e3%81%a8%e3%82%b0%e3%83%ad%e3%83%bc%e3%83%90%e3%83%ab%e3%83%90%e3%83%bc%e3%82%92%e4%b8%80%e3%81%a4%e3%81%ab%ef%bc%88%e3%82%b9%e3%83%86%e3%83%83%e3%82%ad%e3%83%90/ Cocoon ディスカッション掲示板 ja Wed, 22 Jul 2026 13:33:45 +0000 wpForo 60 RE: ヘッダーとグローバルバーを一つに（ステッキバー）して、スクロールに追従させる方法 https://wp-cocoon.com/community/customs/%e3%83%98%e3%83%83%e3%83%80%e3%83%bc%e3%81%a8%e3%82%b0%e3%83%ad%e3%83%bc%e3%83%90%e3%83%ab%e3%83%90%e3%83%bc%e3%82%92%e4%b8%80%e3%81%a4%e3%81%ab%ef%bc%88%e3%82%b9%e3%83%86%e3%83%83%e3%82%ad%e3%83%90/#post-12655 Sun, 17 Feb 2019 15:45:32 +0000 ありがとうございます！

ご提示いただいたcssでだいぶ近づけました。あとは自分で微調節などをしていきたいと思います。

お世話おかけしました。

]]> CSSカスタマイズ相談 kuma https://wp-cocoon.com/community/customs/%e3%83%98%e3%83%83%e3%83%80%e3%83%bc%e3%81%a8%e3%82%b0%e3%83%ad%e3%83%bc%e3%83%90%e3%83%ab%e3%83%90%e3%83%bc%e3%82%92%e4%b8%80%e3%81%a4%e3%81%ab%ef%bc%88%e3%82%b9%e3%83%86%e3%83%83%e3%82%ad%e3%83%90/#post-12655 RE: ヘッダーとグローバルバーを一つに（ステッキバー）して、スクロールに追従させる方法 https://wp-cocoon.com/community/customs/%e3%83%98%e3%83%83%e3%83%80%e3%83%bc%e3%81%a8%e3%82%b0%e3%83%ad%e3%83%bc%e3%83%90%e3%83%ab%e3%83%90%e3%83%bc%e3%82%92%e4%b8%80%e3%81%a4%e3%81%ab%ef%bc%88%e3%82%b9%e3%83%86%e3%83%83%e3%82%ad%e3%83%90/#post-12643 Sun, 17 Feb 2019 11:14:58 +0000

あとはモバイル表示のヘッダーです。

今度は下幅が短くなっており(あっちこっち状態で申し訳ないです…)、ここを上幅と同じようにすれば完璧になります。最後にそこの部分だけお助けいただけたらありがたいです。

こんな感じで追記すれば、多分いけるのではないかと思います。

@media screen and (max-width: 768px){
  .header-container-in .logo-header img {
      padding-bottom: 10px;
  }
} 

ただ、ここまでカスタマイズが重なってくると、これ以上は僕も対応できないかもしれません。
サポート対象外のものにもあるように、精査に時間のかかるカスタマイズ対応までは難しいです。

]]> CSSカスタマイズ相談 わいひら https://wp-cocoon.com/community/customs/%e3%83%98%e3%83%83%e3%83%80%e3%83%bc%e3%81%a8%e3%82%b0%e3%83%ad%e3%83%bc%e3%83%90%e3%83%ab%e3%83%90%e3%83%bc%e3%82%92%e4%b8%80%e3%81%a4%e3%81%ab%ef%bc%88%e3%82%b9%e3%83%86%e3%83%83%e3%82%ad%e3%83%90/#post-12643 RE: ヘッダーとグローバルバーを一つに（ステッキバー）して、スクロールに追従させる方法 https://wp-cocoon.com/community/customs/%e3%83%98%e3%83%83%e3%83%80%e3%83%bc%e3%81%a8%e3%82%b0%e3%83%ad%e3%83%bc%e3%83%90%e3%83%ab%e3%83%90%e3%83%bc%e3%82%92%e4%b8%80%e3%81%a4%e3%81%ab%ef%bc%88%e3%82%b9%e3%83%86%e3%83%83%e3%82%ad%e3%83%90/#post-12633 Sun, 17 Feb 2019 10:13:34 +0000

確かに、こう変えたら、あそこがおかしくなって、だから次はここを変えて...を繰り返すとなるとよりぐちゃぐちゃになっていくと感じ、質問しながらも文面上のやりとりでは無理があるなと考えていました。

そうでしたか。

その状況を把握するのはもっとしんどいかもしれませんね？

 

（デペロッパーツールで確認できる方が助けてくれるのは大歓迎ですが！笑）

確認するにも、正解が分からなかったら結構な感じ、厳しいかもですね ? 

]]> CSSカスタマイズ相談 かうたっく https://wp-cocoon.com/community/customs/%e3%83%98%e3%83%83%e3%83%80%e3%83%bc%e3%81%a8%e3%82%b0%e3%83%ad%e3%83%bc%e3%83%90%e3%83%ab%e3%83%90%e3%83%bc%e3%82%92%e4%b8%80%e3%81%a4%e3%81%ab%ef%bc%88%e3%82%b9%e3%83%86%e3%83%83%e3%82%ad%e3%83%90/#post-12633 RE: ヘッダーとグローバルバーを一つに（ステッキバー）して、スクロールに追従させる方法 https://wp-cocoon.com/community/customs/%e3%83%98%e3%83%83%e3%83%80%e3%83%bc%e3%81%a8%e3%82%b0%e3%83%ad%e3%83%bc%e3%83%90%e3%83%ab%e3%83%90%e3%83%bc%e3%82%92%e4%b8%80%e3%81%a4%e3%81%ab%ef%bc%88%e3%82%b9%e3%83%86%e3%83%83%e3%82%ad%e3%83%90/#post-12630 Sun, 17 Feb 2019 08:53:27 +0000 ＞かうたっくさん

確かに、こう変えたら、あそこがおかしくなって、だから次はここを変えて...を繰り返すとなるとよりぐちゃぐちゃになっていくと感じ、質問しながらも文面上のやりとりでは無理があるなと考えていました。

それでも、これまで教えてくださったcssでいろいろいじって納得のいくようにしてみたいと思います。（デペロッパーツールで確認できる方が助けてくれるのは大歓迎ですが！笑）

サイトをイメージ通りのものにしようといろいろいじるようになると、自分の知識では到底及ばなくなり、そういったときにかうたっくさんのような存在は本当に助けになっています。いつもありがとうございます。

]]> CSSカスタマイズ相談 kuma https://wp-cocoon.com/community/customs/%e3%83%98%e3%83%83%e3%83%80%e3%83%bc%e3%81%a8%e3%82%b0%e3%83%ad%e3%83%bc%e3%83%90%e3%83%ab%e3%83%90%e3%83%bc%e3%82%92%e4%b8%80%e3%81%a4%e3%81%ab%ef%bc%88%e3%82%b9%e3%83%86%e3%83%83%e3%82%ad%e3%83%90/#post-12630 RE: ヘッダーとグローバルバーを一つに（ステッキバー）して、スクロールに追従させる方法 https://wp-cocoon.com/community/customs/%e3%83%98%e3%83%83%e3%83%80%e3%83%bc%e3%81%a8%e3%82%b0%e3%83%ad%e3%83%bc%e3%83%90%e3%83%ab%e3%83%90%e3%83%bc%e3%82%92%e4%b8%80%e3%81%a4%e3%81%ab%ef%bc%88%e3%82%b9%e3%83%86%e3%83%83%e3%82%ad%e3%83%90/#post-12618 Sun, 17 Feb 2019 01:21:29 +0000

cssを貼り付け、padding-bottom:0.5em;を消したところ、デスクトップ表示のヘッダーの「幅が微妙に狭くなる」「ロゴ文字が小さくなる」という問題が発生したので、

デスクトップだか、どこだかの画像が小さくなったのは認識してます。Cocoonの仕様にあわせて、それなりにしたことで。

そうしなければ汎用性がないと…って事だったりも意識したうえです。

 

こんな風にしたい！こうなりました❦　みたいに一度の確認で対応できたら、奥行きが深いこの画像に対して毎回チェックをする手間が減ります。ですが、その後変更した！チェックを…。となれば毎回チェックするのは正直しんどいかもです❦

***

そもそもposition: sticky;が反映しない環境だったのと、上記が重なり私がチェックしても時間の無駄のようです。※検証（デベロッパーツール）問題かな？

プライベートのホンノリした合間を利用して返信してますが、今回はチェックしてません。

***

デベロッパーツールで簡単に状況を確認できる人の対応を待ってくださいね ? 

って事で、チェックしてませんが離脱しますね。ですがチェックしてもらえて、うまくいくと良いな。って思ってますね ? 

・・追記・・

https://avilery.com/

現在のブログ状態

]]> CSSカスタマイズ相談 かうたっく https://wp-cocoon.com/community/customs/%e3%83%98%e3%83%83%e3%83%80%e3%83%bc%e3%81%a8%e3%82%b0%e3%83%ad%e3%83%bc%e3%83%90%e3%83%ab%e3%83%90%e3%83%bc%e3%82%92%e4%b8%80%e3%81%a4%e3%81%ab%ef%bc%88%e3%82%b9%e3%83%86%e3%83%83%e3%82%ad%e3%83%90/#post-12618 RE: ヘッダーとグローバルバーを一つに（ステッキバー）して、スクロールに追従させる方法 https://wp-cocoon.com/community/customs/%e3%83%98%e3%83%83%e3%83%80%e3%83%bc%e3%81%a8%e3%82%b0%e3%83%ad%e3%83%bc%e3%83%90%e3%83%ab%e3%83%90%e3%83%bc%e3%82%92%e4%b8%80%e3%81%a4%e3%81%ab%ef%bc%88%e3%82%b9%e3%83%86%e3%83%83%e3%82%ad%e3%83%90/#post-12615 Sat, 16 Feb 2019 23:27:41 +0000 ありがとうございます。ぐちゃぐちゃな質問してしまって申し訳ないです。

ご提示していただいたcssを貼り付け、padding-bottom:0.5em;を消したところ、デスクトップ表示のヘッダーの「幅が微妙に狭くなる」「ロゴ文字が小さくなる」という問題が発生したので、

padding-top:0.5→0.6に変更し、元の画像をトリミングし直すことでデスクトップ表示のヘッダーはいい感じにすることができました。

あとはモバイル表示のヘッダーです。

今度は下幅が短くなっており(あっちこっち状態で申し訳ないです…)、ここを上幅と同じようにすれば完璧になります。最後にそこの部分だけお助けいただけたらありがたいです。

https://avilery.com/

現在のブログ状態

]]> CSSカスタマイズ相談 kuma https://wp-cocoon.com/community/customs/%e3%83%98%e3%83%83%e3%83%80%e3%83%bc%e3%81%a8%e3%82%b0%e3%83%ad%e3%83%bc%e3%83%90%e3%83%ab%e3%83%90%e3%83%bc%e3%82%92%e4%b8%80%e3%81%a4%e3%81%ab%ef%bc%88%e3%82%b9%e3%83%86%e3%83%83%e3%82%ad%e3%83%90/#post-12615 RE: ヘッダーとグローバルバーを一つに（ステッキバー）して、スクロールに追従させる方法 https://wp-cocoon.com/community/customs/%e3%83%98%e3%83%83%e3%83%80%e3%83%bc%e3%81%a8%e3%82%b0%e3%83%ad%e3%83%bc%e3%83%90%e3%83%ab%e3%83%90%e3%83%bc%e3%82%92%e4%b8%80%e3%81%a4%e3%81%ab%ef%bc%88%e3%82%b9%e3%83%86%e3%83%83%e3%82%ad%e3%83%90/#post-12613 Sat, 16 Feb 2019 21:35:37 +0000 こうかなぁ？って思うんですが、何が何だかよくわからないので、追記しました。

.header-container-in .logo-header img {
		vertical-align: bottom;
		padding-top: 5px;
	}
@media screen and (min-width: 481px) {
	.header-container-in .logo-header img {
		padding-top: 0;
	}
}
@media screen and (min-width: 769px) {
	.header-container-in.hlt-top-menu .logo-header img {
		height: auto;
	}
}

くわえて子テーマ内@media screen and (min-width: 481px) 内.header-containerのpadding-bottom:0.5em;を削除した感じです。

PC

https://gyazo.com/dd76784d70677a37c79a8a1e062f648c

tab

https://gyazo.com/47a62eea98ea5544532e21fd80802d06

mob

https://gyazo.com/c5cee925f5c56996818209f6f3274150

結構こじれてる感満載ですが、表示的にはおそらく大丈夫かもです。数値は任意のものにしてくださいね。

]]> CSSカスタマイズ相談 かうたっく https://wp-cocoon.com/community/customs/%e3%83%98%e3%83%83%e3%83%80%e3%83%bc%e3%81%a8%e3%82%b0%e3%83%ad%e3%83%bc%e3%83%90%e3%83%ab%e3%83%90%e3%83%bc%e3%82%92%e4%b8%80%e3%81%a4%e3%81%ab%ef%bc%88%e3%82%b9%e3%83%86%e3%83%83%e3%82%ad%e3%83%90/#post-12613 RE: ヘッダーとグローバルバーを一つに（ステッキバー）して、スクロールに追従させる方法 https://wp-cocoon.com/community/customs/%e3%83%98%e3%83%83%e3%83%80%e3%83%bc%e3%81%a8%e3%82%b0%e3%83%ad%e3%83%bc%e3%83%90%e3%83%ab%e3%83%90%e3%83%bc%e3%82%92%e4%b8%80%e3%81%a4%e3%81%ab%ef%bc%88%e3%82%b9%e3%83%86%e3%83%83%e3%82%ad%e3%83%90/#post-12610 Sat, 16 Feb 2019 17:28:54 +0000 ありがとうございます。

そのように設定し、解決することができました。

しかし、これをモバイルでみると文字が上の方にある状態でした（ヘッダー自体の上下幅は問題なし）。これをバランスよくすることは可能でしょうか。

モバイル表示で文字を真ん中にもってこようと「設定」→「ヘッダー」→「ヘッダーロゴ」に貼り付ける【元のロゴ画像自体】の上下幅をトリミングして貼り直すと、確かにモバイル表示ではいい感じになるのですが、今度はデスクトップ表示のロゴ文字が下のほうに位置するようになってしまい、アンバランスになってしまいます。

デスクトップでも、モバイルでもヘッダーのロゴ文字の上下幅を均等にするにはどうすればよいかわからない状態です…。なんとかできませんか？

↑現在デスクトップ表示のバランスを優先して使用している【元のロゴ画像】

今度はロゴが下に飛び出てしまい、ヘッダーの黄色のアンダーラインも下が伸びることによって上に伸びてしまうんですよね。

確かに分かりにくいですね。というかこの書き方では分からないです。すみません。

.header-containerにpaddingを追加せずヘッダーを伸ばさない状態は、

のようになっていますが、.header-containerをpaddingでtopとbottomに0.5emずつ伸ばすと、現在のサイトのような黄色いアンダーラインが宙に浮いているような状態に見えてしまっています。

なので、それを文字（Homeや小説といったメニュー）ごと、もしくは、黄色いアンダーラインだけを下にずらして正常な状態にしたいと思っています。

どうすればいいのかアドバイスをいただけたら幸いです。

長文になってしまいましたが、希望する変更は2点です。

１、モバイル表示のヘッダーのロゴ文字の上下幅を均等にしたい。（元画像を変えると、今度はデスクトップ表示の上下幅のバランスがおかしくなる）
２、現在のヘッダー自体の幅は変えずに、グローバルナビのメニューを下にずらしたい。

いつも助けていただいてありがとうございます。

よろしくお願いします。

]]> CSSカスタマイズ相談 kuma https://wp-cocoon.com/community/customs/%e3%83%98%e3%83%83%e3%83%80%e3%83%bc%e3%81%a8%e3%82%b0%e3%83%ad%e3%83%bc%e3%83%90%e3%83%ab%e3%83%90%e3%83%bc%e3%82%92%e4%b8%80%e3%81%a4%e3%81%ab%ef%bc%88%e3%82%b9%e3%83%86%e3%83%83%e3%82%ad%e3%83%90/#post-12610 RE: ヘッダーとグローバルバーを一つに（ステッキバー）して、スクロールに追従させる方法 https://wp-cocoon.com/community/customs/%e3%83%98%e3%83%83%e3%83%80%e3%83%bc%e3%81%a8%e3%82%b0%e3%83%ad%e3%83%bc%e3%83%90%e3%83%ab%e3%83%90%e3%83%bc%e3%82%92%e4%b8%80%e3%81%a4%e3%81%ab%ef%bc%88%e3%82%b9%e3%83%86%e3%83%83%e3%82%ad%e3%83%90/#post-12608 Sat, 16 Feb 2019 15:09:51 +0000

今度はロゴが下に飛び出てしまい、

これについては、こんなふうに高さを調節すればいいような気がします（数値は好みで）。

.header-container-in.hlt-top-menu .logo-header img {
  max-height: 50px;
}

ヘッダーの黄色のアンダーラインも下が伸びることによって上に伸びてしまうんですよね。

これについては、申し訳ないですがちょっと意味がわからないです。

kumaさんの頭の中にあるイメージは、僕とかにはないので出来ればスクリーンショット撮影して、注釈等で説明していただければと思います。

]]> CSSカスタマイズ相談 わいひら https://wp-cocoon.com/community/customs/%e3%83%98%e3%83%83%e3%83%80%e3%83%bc%e3%81%a8%e3%82%b0%e3%83%ad%e3%83%bc%e3%83%90%e3%83%ab%e3%83%90%e3%83%bc%e3%82%92%e4%b8%80%e3%81%a4%e3%81%ab%ef%bc%88%e3%82%b9%e3%83%86%e3%83%83%e3%82%ad%e3%83%90/#post-12608 RE: ヘッダーとグローバルバーを一つに（ステッキバー）して、スクロールに追従させる方法 https://wp-cocoon.com/community/customs/%e3%83%98%e3%83%83%e3%83%80%e3%83%bc%e3%81%a8%e3%82%b0%e3%83%ad%e3%83%bc%e3%83%90%e3%83%ab%e3%83%90%e3%83%bc%e3%82%92%e4%b8%80%e3%81%a4%e3%81%ab%ef%bc%88%e3%82%b9%e3%83%86%e3%83%83%e3%82%ad%e3%83%90/#post-12599 Sat, 16 Feb 2019 14:16:56 +0000 設定の高さは０にしています。

「ヘッダーレイアウト」を「トップメニュー小（右寄せ）」にして、.header-containerにpadding-top5px、padding-bottom5pxを書き込み、逆に引き延ばす方法すると、

今度はロゴが下に飛び出てしまい、ヘッダーの黄色のアンダーラインも下が伸びることによって上に伸びてしまうんですよね。

https://avilery.com/ （今そのような設定にしています）

あとは、スマホのヘッダー自体も上下幅を狭くできたらなと考えていたので、このような質問をさせていただきました。

]]> CSSカスタマイズ相談 kuma https://wp-cocoon.com/community/customs/%e3%83%98%e3%83%83%e3%83%80%e3%83%bc%e3%81%a8%e3%82%b0%e3%83%ad%e3%83%bc%e3%83%90%e3%83%ab%e3%83%90%e3%83%bc%e3%82%92%e4%b8%80%e3%81%a4%e3%81%ab%ef%bc%88%e3%82%b9%e3%83%86%e3%83%83%e3%82%ad%e3%83%90/#post-12599