CSSで簡単にできると思いますがCocoonは、通知エリア・アピールエリア・カルーセルを置きたいページ置いたりできます。

あるページはカルーセルのみ、別のページはアピールエリアのみ。さらに別ページは何もなし。みたいにできたと思います。

子テーマのCSSを見ると、カルーセルを使われてるようですが、リンク先にはカルーセルがありません。

とりあえずやる事は

• #header-containerをposition: fixed;でtopに指定
• 高さをメディアクエリ事に指定

スマホ

https://gyazo.com/fe380af3869feeaa9e8d297bbea57468

タブレット

https://gyazo.com/5e3c863148a031a97dfa51bde5587788

PC

https://gyazo.com/dcb2ba54db6ecea40353affd9de8abf4

• 上述のheader下にカルーセルがあるページだけ、カルーセルにheaderの高さ分の余白を入れる
• アピールエリアがheader下にあれば、アピールエリアだけ余白を。
• パンくずリストがheader下にあれば、そのページはパンくずリストに余白を
• 広告がheader下にあれば、該当ページの広告だけ余白を

これらをスマホビュータブレットビューなどメディアクエリで高さをそれぞれ指定とか必要になるので、結構面倒だと思いますよ。

他の方法は、他の人が書いてくれるのを、待ってみるのが良いかと思います。

他には、こんな方法もあります。

.header-container {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1999;
}

ただし、この方法は IE では効かず、追従しません。

その方法で行けましたか！？私の環境・と言っても検証画面では無理だったんですよね。※デベロッパーツールの不具合なのかも

そこで試したかった事は↑でも書いてる通りです。

他の領域がつぶれないか（header-containerの領域が確保されるかなど）チェックしたかった　&　position、absoluteを領域前にツケてなければiPhoneでも問題ないはず。と言った認識です。

お二方ともお答えいただきありがとうございます。

予備知識が乏しいため、ままならない返信になりますがご了承ください。

＞＞かうたっくさん

アピールエリアは今後、搭載していくつもりです。カルーセルは現状トップページのみの表示となっております。

• #header-containerをposition: fixed;でtopに指定

は自分でやってみたのですが、うまくいかずぐちゃぐちゃになってしまっていました。

メディアクエリで高さの設定に関しては無知識なので、勉強します。

＞＞Akiraさん

CSSを貼り付けたところ希望する動きにすることができました。ありがとうございます。

IEに関しては大丈夫です。

ちなみに、追従させる機能は今のところデスクトップ表示のみにつけたいと考えています。動作確認したところスマホ表示でもトップが追従してきたのですがどうすればよいでしょうか？

お二方とものお助けにより希望の動きにすることができました。

最初の投稿で「ヘッダーロゴ、ヘッダー背景、グローバルバーが分かれている状態」と書きましたが、これを一つにする、もしくは一つのバーように見せるという風にするのは可能でしょうか？

といのも、今「グローバルバーを浮かせるように見せる」設定をしているのですが、ヘッダーロゴと、ヘッダー背景には設定していません。（調べても同様のことをしたい人がいなかったため、つけかたが全く分かりませんでした…）

ここが不格好なので、全体を浮いているように見える設定にして改善できればと思うのですがどうすればいいでしょうか。

【追記】

スマホでは、追従させないようにする設定は、

@media screen and (min-width: 481px) {
.header-container {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1999;
}
}

で、できました。

あとはバーを一体化させる方法について教えていただけたら幸いです。ヘッダーロゴ、ヘッダー背景にグローバルナビと同じcssをつければいけると思ってやっているのですが、なかなかうまくできません。

nav#navi, .menu-header .sub-menuにしていしているbox-shadowを消して、.header-containerに指定すればイケると思いますよ。

※私のChrome検証画面sticky効かなかったの、やっぱオカシイ┐(´д｀)┌ﾔﾚﾔﾚです❦

ありがとうございます。

ご指摘通りにしてできました！

あとはステッキの上下幅を少しだけ狭くしたいと思い、.header-containerにpadding-top、padding-bottomをいれてみたのですが、変化しませんでした。あとここだけ設定できたらヘッダーはとりあえず完成すると思うのですが、どうすればよいのでしょうか？

（もしあれでしたら別トピックで質問しなおします）

元々余白が無いからだと思います。Cocoon設定・ヘッダーの高さを変更してチェックしてみてもダメでしたか？

設定の高さは０にしています。

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

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

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

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

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

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

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

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

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

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

ありがとうございます。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

よろしくお願いします。

こうかなぁ？って思うんですが、何が何だかよくわからないので、追記しました。

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

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

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

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

https://avilery.com/

現在のブログ状態

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

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

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

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

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

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

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

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

・・追記・・

https://avilery.com/

現在のブログ状態

＞かうたっくさん

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

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

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

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

そうでしたか。

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

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

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

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

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

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

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

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

ありがとうございます！

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

お世話おかけしました。