サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2019-02-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
これらのサイトを見てみて試してみたのですが、自分の力ではぐちゃぐちゃになるだけで及びませんでした…。
お力を貸していただける嬉しいです。
自分のサイトはこちらです。
2019-02-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下にあれば、該当ページの広告だけ余白を
これらをスマホビュータブレットビューなどメディアクエリで高さをそれぞれ指定とか必要になるので、結構面倒だと思いますよ。
他の方法は、他の人が書いてくれるのを、待ってみるのが良いかと思います。
わいひら reacted
2019-02-16 10:36
他には、こんな方法もあります。
.header-container {
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 1999;
}
ただし、この方法は IE では効かず、追従しません。
わいひら reacted
2019-02-16 13:55
その方法で行けましたか！？私の環境・と言っても検証画面では無理だったんですよね。※デベロッパーツールの不具合なのかも
そこで試したかった事は↑でも書いてる通りです。
他の領域がつぶれないか（header-containerの領域が確保されるかなど）チェックしたかった & position、absoluteを領域前にツケてなければiPhoneでも問題ないはず。と言った認識です。
わいひら reacted
Topic starter
2019-02-16 18:04
お二方ともお答えいただきありがとうございます。
予備知識が乏しいため、ままならない返信になりますがご了承ください。
＞＞かうたっくさん
アピールエリアは今後、搭載していくつもりです。カルーセルは現状トップページのみの表示となっております。
- #header-containerをposition: fixed;でtopに指定
は自分でやってみたのですが、うまくいかずぐちゃぐちゃになってしまっていました。
メディアクエリで高さの設定に関しては無知識なので、勉強します。
＞＞Akiraさん
CSSを貼り付けたところ希望する動きにすることができました。ありがとうございます。
IEに関しては大丈夫です。
ちなみに、追従させる機能は今のところデスクトップ表示のみにつけたいと考えています。動作確認したところスマホ表示でもトップが追従してきたのですがどうすればよいでしょうか？
Topic starter
2019-02-16 18:22
お二方とものお助けにより希望の動きにすることができました。
最初の投稿で「ヘッダーロゴ、ヘッダー背景、グローバルバーが分かれている状態」と書きましたが、これを一つにする、もしくは一つのバーように見せるという風にするのは可能でしょうか？
といのも、今「グローバルバーを浮かせるように見せる」設定をしているのですが、ヘッダーロゴと、ヘッダー背景には設定していません。（調べても同様のことをしたい人がいなかったため、つけかたが全く分かりませんでした…）
ここが不格好なので、全体を浮いているように見える設定にして改善できればと思うのですがどうすればいいでしょうか。
Topic starter
2019-02-16 19:41
【追記】
スマホでは、追従させないようにする設定は、
@media screen and (min-width: 481px) {
.header-container {
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 1999;
}
}
で、できました。
あとはバーを一体化させる方法について教えていただけたら幸いです。ヘッダーロゴ、ヘッダー背景にグローバルナビと同じcssをつければいけると思ってやっているのですが、なかなかうまくできません。
2019-02-16 21:13
nav#navi, .menu-header .sub-menuにしていしているbox-shadowを消して、.header-containerに指定すればイケると思いますよ。
※私のChrome検証画面sticky効かなかったの、やっぱオカシイ┐(´д｀)┌ﾔﾚﾔﾚです❦
わいひら reacted
Topic starter
2019-02-16 22:16
ありがとうございます。
ご指摘通りにしてできました！
あとはステッキの上下幅を少しだけ狭くしたいと思い、.header-containerにpadding-top、padding-bottomをいれてみたのですが、変化しませんでした。あとここだけ設定できたらヘッダーはとりあえず完成すると思うのですが、どうすればよいのでしょうか？
（もしあれでしたら別トピックで質問しなおします）
Topic starter
2019-02-16 23:16
設定の高さは０にしています。
「ヘッダーレイアウト」を「トップメニュー小（右寄せ）」にして、.header-containerにpadding-top5px、padding-bottom5pxを書き込み、逆に引き延ばす方法すると、
今度はロゴが下に飛び出てしまい、ヘッダーの黄色のアンダーラインも下が伸びることによって上に伸びてしまうんですよね。
https://avilery.com/ （今そのような設定にしています）
あとは、スマホのヘッダー自体も上下幅を狭くできたらなと考えていたので、このような質問をさせていただきました。
Topic starter
2019-02-17 02:28
ありがとうございます。
そのように設定し、解決することができました。
しかし、これをモバイルでみると文字が上の方にある状態でした（ヘッダー自体の上下幅は問題なし）。これをバランスよくすることは可能でしょうか。
モバイル表示で文字を真ん中にもってこようと「設定」→「ヘッダー」→「ヘッダーロゴ」に貼り付ける【元のロゴ画像自体】の上下幅をトリミングして貼り直すと、確かにモバイル表示ではいい感じになるのですが、今度はデスクトップ表示のロゴ文字が下のほうに位置するようになってしまい、アンバランスになってしまいます。
デスクトップでも、モバイルでもヘッダーのロゴ文字の上下幅を均等にするにはどうすればよいかわからない状態です…。なんとかできませんか？
↑現在デスクトップ表示のバランスを優先して使用している【元のロゴ画像】
今度はロゴが下に飛び出てしまい、ヘッダーの黄色のアンダーラインも下が伸びることによって上に伸びてしまうんですよね。
確かに分かりにくいですね。というかこの書き方では分からないです。すみません。
.header-containerにpaddingを追加せずヘッダーを伸ばさない状態は、
のようになっていますが、.header-containerをpaddingでtopとbottomに0.5emずつ伸ばすと、現在のサイトのような黄色いアンダーラインが宙に浮いているような状態に見えてしまっています。
なので、それを文字（Homeや小説といったメニュー）ごと、もしくは、黄色いアンダーラインだけを下にずらして正常な状態にしたいと思っています。
どうすればいいのかアドバイスをいただけたら幸いです。
長文になってしまいましたが、希望する変更は2点です。
１、モバイル表示のヘッダーのロゴ文字の上下幅を均等にしたい。（元画像を変えると、今度はデスクトップ表示の上下幅のバランスがおかしくなる）
２、現在のヘッダー自体の幅は変えずに、グローバルナビのメニューを下にずらしたい。
いつも助けていただいてありがとうございます。
よろしくお願いします。
2019-02-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
結構こじれてる感満載ですが、表示的にはおそらく大丈夫かもです。数値は任意のものにしてくださいね。
わいひら reacted
Topic starter
2019-02-17 08:27
ありがとうございます。ぐちゃぐちゃな質問してしまって申し訳ないです。
ご提示していただいたcssを貼り付け、padding-bottom:0.5em;を消したところ、デスクトップ表示のヘッダーの「幅が微妙に狭くなる」「ロゴ文字が小さくなる」という問題が発生したので、
padding-top:0.5→0.6に変更し、元の画像をトリミングし直すことでデスクトップ表示のヘッダーはいい感じにすることができました。
あとはモバイル表示のヘッダーです。
今度は下幅が短くなっており(あっちこっち状態で申し訳ないです…)、ここを上幅と同じようにすれば完璧になります。最後にそこの部分だけお助けいただけたらありがたいです。
現在のブログ状態
2019-02-17 10:21
cssを貼り付け、padding-bottom:0.5em;を消したところ、デスクトップ表示のヘッダーの「幅が微妙に狭くなる」「ロゴ文字が小さくなる」という問題が発生したので、
デスクトップだか、どこだかの画像が小さくなったのは認識してます。Cocoonの仕様にあわせて、それなりにしたことで。
そうしなければ汎用性がないと…って事だったりも意識したうえです。
こんな風にしたい！こうなりました❦ みたいに一度の確認で対応できたら、奥行きが深いこの画像に対して毎回チェックをする手間が減ります。ですが、その後変更した！チェックを…。となれば毎回チェックするのは正直しんどいかもです❦
そもそもposition: sticky;が反映しない環境だったのと、上記が重なり私がチェックしても時間の無駄のようです。※検証（デベロッパーツール）問題かな？
プライベートのホンノリした合間を利用して返信してますが、今回はチェックしてません。
デベロッパーツールで簡単に状況を確認できる人の対応を待ってくださいね ?
って事で、チェックしてませんが離脱しますね。ですがチェックしてもらえて、うまくいくと良いな。って思ってますね ?
・・追記・・
現在のブログ状態
This post was modified 5年前 by かうたっく
わいひら reacted
Topic starter
2019-02-17 17:53
＞かうたっくさん
確かに、こう変えたら、あそこがおかしくなって、だから次はここを変えて...を繰り返すとなるとよりぐちゃぐちゃになっていくと感じ、質問しながらも文面上のやりとりでは無理があるなと考えていました。
それでも、これまで教えてくださったcssでいろいろいじって納得のいくようにしてみたいと思います。（デペロッパーツールで確認できる方が助けてくれるのは大歓迎ですが！笑）
サイトをイメージ通りのものにしようといろいろいじるようになると、自分の知識では到底及ばなくなり、そういったときにかうたっくさんのような存在は本当に助けになっています。いつもありがとうございます。
2019-02-17 19:13
確かに、こう変えたら、あそこがおかしくなって、だから次はここを変えて...を繰り返すとなるとよりぐちゃぐちゃになっていくと感じ、質問しながらも文面上のやりとりでは無理があるなと考えていました。
そうでしたか。
その状況を把握するのはもっとしんどいかもしれませんね？
（デペロッパーツールで確認できる方が助けてくれるのは大歓迎ですが！笑）
確認するにも、正解が分からなかったら結構な感じ、厳しいかもですね ?
わいひら reacted
2019-02-17 20:14
あとはモバイル表示のヘッダーです。
今度は下幅が短くなっており(あっちこっち状態で申し訳ないです…)、ここを上幅と同じようにすれば完璧になります。最後にそこの部分だけお助けいただけたらありがたいです。
こんな感じで追記すれば、多分いけるのではないかと思います。
@media screen and (max-width: 768px){
.header-container-in .logo-header img {
padding-bottom: 10px;
}
}
ただ、ここまでカスタマイズが重なってくると、これ以上は僕も対応できないかもしれません。
サポート対象外のものにもあるように、精査に時間のかかるカスタマイズ対応までは難しいです。
Topic starter
2019-02-18 00:45
ありがとうございます！
ご提示いただいたcssでだいぶ近づけました。あとは自分で微調節などをしていきたいと思います。
お世話おかけしました。
わいひら reacted
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。