サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2020-12-06 14:19
いつもお世話になっております。
表題の件につきまして、わいひらさんとみなさんに質問があります。
パンくずリストをフッター手前に配置し、ブラウザの横幅いっぱいに背景色をつけたいです。
具体的には以下（添付画像）のサイトのような感じです。
単にbackgroundを指定しただけではbodyの幅にしか色が付きませんし、
Widthをautoや100%にするとパンくずのテキストも動いてしまいます。
これを、footer.phpを触ることなく実現することは可能でしょうか？
稚拙な質問でお恥ずかしいのですが、ご指導いただけると嬉しいです。
どうぞよろしくお願いいたします。
2020-12-06 16:54
前略、yasu さん
ちょっと、試している時間がないので、それっぽいリンクだけ貼ってみます。
子要素を親要素（インナー幅）からはみ出して画面いっぱいにするCSS
「コンテナの外側まで表示を広げる css」でググったら、ヒットしました。
ご自身で工夫してみてください。
わいひら reacted
Topic starter
2020-12-06 18:41
リフィトリーさん
お時間のない中ご回答＆ご指導くださり、ありがとうございます！
早速試してみたのですが、子要素が複数あるため上手くいきませんでした。
やはり、例で挙げたサイトのように、footer.phpで要素を一括りにするセレクタ指定をするほかに方法はないのでしょうか？
2020-12-06 19:32
@yasu さん
ちょっと苦し紛れではありますが、以下のCSSで試してみました。
#breadcrumb {
width: 100%;
padding: .6em calc((100vw - 1230px)/2);
}
@media screen and (max-width:1256px) {
#breadcrumb {
padding: .6em 1em;
}
1256pxは、Cocoonのデフォルトのサイト幅です。
PCでも少しpaddingが必要なので、26px差し引いています。
カラム設定で、数値を変更されている場合は、サイト幅をデベロッパーツールで調べればわかるかと思います。
テストサイトで簡単にテストしただけなので、不具合があるかもしれません。
2020-12-06 19:47
breadcrumbにはmarginが指定されているのと、wrapというクラスでwidthが指定されているので現在の見た目になっています。
Widthをautoや100%にするとパンくずのテキストも動いてしまいます。
については、広げた分をpaddingで指定すればテキストは元の位置のままにできます。
なので
#breadcrumb {
width: 100%;
padding-left: calc((100vw - 1256px) / 2);
background-color: #f00;
}
でご希望の動作になるのでないかと思います。
追記
文章書いてたらリフィトリーさんと被ってしまいました。
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。