サイト全体に「モダンブラック 」スキン適用中。

ヘッダーとグローバルバーを一つに(ステッキバー)して、スクロールに追従させる方法 | カスタマイズ相談 | Cocoon フォーラム

書き込みの前に以下の3点をご確認ください。

  1. 1つのトピックにつき1つの質問を書き込んでください
  2. 不具合・カスタマイズ対象ページのURLを提示してください
  3. 該当部分のキャプチャ環境情報とともに書き込んでいただけると助かります

フォーラム利用ガイドリンク

  1. フォーラムガイドライン
  2. よくある質問と答え(FAQ)
  3. サポート対象外のケース
  4. 原因不明の不具合用トラブルシューティング
  5. トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw
  6. 真っ白画面でのエラーメッセージの確認方法 
  7. ブラウザ環境チェックツール

フォーラムの内容は、CCライセンス(CC BY-ND 2.1)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。

フォーラムのTwitterアカウント(@CocoonForum)はこちら

スポンサーリンク
ヘッダーとグローバルバーを一つに(ステ...
 
Share:

[解決済] ヘッダーとグローバルバーを一つに(ステッキバー)して、スクロールに追従させる方法  

  RSS

kuma
 kuma
(@kuma)
ゲスト
参加: 2か月 前
投稿: 62
2019年2月16日 05:40  

タイトル通りなのですが、今は、ヘッダーロゴ、ヘッダー背景、グローバルバーが分かれている状態となっています。

これらをすべてくっつける、つまりステッキバーにすることは可能でしょうか?(グローバルバーを基準とし、全体的に浮かしているように見せたいです)

また、それをスクロールに追従させるようにしたいと思っています。

イメージは、

https://honcierge.jp/articles/shelf_story/1742

です。honciergeのヘッダーがそのままバーになって追従しています。

https://www.webnoiroha.net/webdesign/css/sticky-header/

https://webdesignday.jp/inspiration/technique/css/4166/

https://plusers.net/wordpress_header_fix

これらのサイトを見てみて試してみたのですが、自分の力ではぐちゃぐちゃになるだけで及びませんでした…。

お力を貸していただける嬉しいです。

自分のサイトはこちらです。

https://avilery.com/iphone-screencap/


未解決
かうたっく
(@kautakku)
メンバーサイト Moderator
参加: 1年 前
投稿: 2049
2019年2月16日 08:19  

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下にあれば、該当ページの広告だけ余白を

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

 

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


わいひら 件のいいね!
Akira
(@akira)
Reputable Memberサイト
参加: 1年 前
投稿: 305
2019年2月16日 10:36  

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

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

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


わいひら 件のいいね!
かうたっく
(@kautakku)
メンバーサイト Moderator
参加: 1年 前
投稿: 2049
2019年2月16日 13:55  

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

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

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


わいひら 件のいいね!
kuma
 kuma
(@kuma)
ゲスト
参加: 2か月 前
投稿: 62
2019年2月16日 18:04  

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

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

>>かうたっくさん

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

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

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

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

>>Akiraさん

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

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

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


kuma
 kuma
(@kuma)
ゲスト
参加: 2か月 前
投稿: 62
2019年2月16日 18:22  

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

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

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

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


kuma
 kuma
(@kuma)
ゲスト
参加: 2か月 前
投稿: 62
2019年2月16日 19:41  

【追記】

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

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

で、できました。

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


かうたっく
(@kautakku)
メンバーサイト Moderator
参加: 1年 前
投稿: 2049
2019年2月16日 21:13  

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

 

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


わいひら 件のいいね!
kuma
 kuma
(@kuma)
ゲスト
参加: 2か月 前
投稿: 62
2019年2月16日 22:16  

ありがとうございます。

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

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

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


かうたっく
(@kautakku)
メンバーサイト Moderator
参加: 1年 前
投稿: 2049
2019年2月16日 22:27  

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


わいひら 件のいいね!
kuma
 kuma
(@kuma)
ゲスト
参加: 2か月 前
投稿: 62
2019年2月16日 23:16  

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

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

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

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

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

This post was modified 1か月 前 by わいひら

わいひら
(@yhira)
メンバーサイト Admin
参加: 1年 前
投稿: 4121
2019年2月17日 00:09  

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

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

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

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

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

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


kuma
 kuma
(@kuma)
ゲスト
参加: 2か月 前
投稿: 62
2019年2月17日 02:28  

ありがとうございます。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

よろしくお願いします。


かうたっく
(@kautakku)
メンバーサイト Moderator
参加: 1年 前
投稿: 2049
2019年2月17日 06:35  

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

.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

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


わいひら 件のいいね!
kuma
 kuma
(@kuma)
ゲスト
参加: 2か月 前
投稿: 62
2019年2月17日 08:27  

ありがとうございます。ぐちゃぐちゃな質問してしまって申し訳ないです。

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

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

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

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

https://avilery.com/

現在のブログ状態


かうたっく
(@kautakku)
メンバーサイト Moderator
参加: 1年 前
投稿: 2049
2019年2月17日 10:21  

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

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

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

 

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

***

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

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

***

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

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

・・追記・・

https://avilery.com/

現在のブログ状態

This post was modified 1か月 前 by かうたっく

わいひら 件のいいね!
kuma
 kuma
(@kuma)
ゲスト
参加: 2か月 前
投稿: 62
2019年2月17日 17:53  

>かうたっくさん

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

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

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


かうたっく
(@kautakku)
メンバーサイト Moderator
参加: 1年 前
投稿: 2049
2019年2月17日 19:13  

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

そうでしたか。

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

 

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

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


わいひら 件のいいね!
わいひら
(@yhira)
メンバーサイト Admin
参加: 1年 前
投稿: 4121
2019年2月17日 20:14  

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

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

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

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

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

This post was modified 1か月 前 by わいひら

kuma
 kuma
(@kuma)
ゲスト
参加: 2か月 前
投稿: 62
2019年2月18日 00:45  

ありがとうございます!

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

お世話おかけしました。


わいひら 件のいいね!
Share:
スポンサーリンク
わいひらをフォローする
おすすめサーバ
mixhost

プラン変更で負荷対策が行えるので、ブログ向きのレンタルサーバーです。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/2・QUIC(高速化プロトコル)に対応
◎プランのアップ・ダウングレードが自由自在
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎復元ポイントを指定して復旧可能(無料)
○サーバ引っ越しオプションあり(有料)
○アダルト・出会い系サイト可

安定感抜群のサーバーです。あまり急激なアクセス変動がないアフィリエイトサイトに向いています。

◎nginxを用いた高速サーバー(完全SSD)
◎老舗サーバーなので安定感抜群
◎ディスク容量が多い
◎転送量が多い
◎同サービス内でドメイン管理が可能
○http/2(高速化プロトコル)に対応
○毎日無料バックアップ(14日分)
△DBは7日分だけ無料復旧可能(ファイルは有料)
×プラン変更でCPUのスペックアップができない
×プラン変更しても即時反映されない
×アダルト・出会い系サイト不可

性能も兼ね備えながら安くブログ運営を開始したいのであればここ1択。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/2・QUIC(高速化プロトコル)に対応
◎東京・大阪でリージョン選択が可能
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎復元ポイントを指定して復旧可能(無料)
○サーバ引っ越しオプションあり(有料)
△アダルト・出会い系サイト可(条件あり)
△開始したてなので運営能力は未知数(対応良)

格安な値段で始められる高機能サーバーです。
性能も備えつつ最安ならここ。
サイトを続けるうちにアクセスが増えれば、プランのアップグレートで対応可能です。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎激安プランが用意してある
◎値段あたりのスペックが高い(コスパ良し)
◎サーバ引っ越しオプションあり(無料)
○http/2(高速化プロトコル)に対応
○アダルト・出会い系サイト可
△プランのアップは可能だがダウンは不可
△毎日自動バックアップ(1日分)
△前日のバックアップからのみ復元できる(無料)

Cocoon
  
動作中

ログイン または 登録 してください

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