サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2018年9月22日 22:55
記事の中で、特定の要素に「背景色を付けて」「横幅いっぱい広げる」カスタマイズを行おうと思っています。
添付画像のようなイメージです。
以下のCSSではうまくいきませんでした。なぜかSafariで開くと右側にスクロールしてしまいました。
.haikei {
background: f4f4f4;
margin: 0 -200%;
padding: 0 200%;
}
もしやり方をご存知の方がいらっしゃいましたら、教えていただけますか？
よろしくお願いします。
2018年9月22日 23:15
CSS というのは、HTML や他の要素の CSS を見ないと指定できません。
サイト URL のご提示と、どの部分の要素に指定されたいかのご説明をいただけるでしょうか。
想像するに、こんな CSS かなとは思いますが。
.haikei {
background: f4f4f4;
margin: 0 calc((100% - 100vw) / 2)
}
2018年9月23日 00:08
セミコロンが抜けているので、再度の書き込み。
.haikei {
background: f4f4f4;
margin: 0 calc((100% - 100vw) / 2);
}
わいひら reacted
Topic starter
2018年9月23日 00:42
Akiraさん
こんにちは。お忙しい中ありがとうございます。
以下のURLになります。
例えば、上記ページはh2が5つありますので、2つ目と4つ目のh2以下の要素に対して、アクセントを付ける目的で、横幅いっぱいの背景色を付けたいと考えています。
お手数をおかけしますがよろしくお願いします。
2018年9月23日 08:34
こんにちは。背景は#f4f4f4が必要だと思います。
background: f4f4f4;
HTMLを実際に書いて、iPhoneで確認したときどんな感じではみ出し表示されているか、画像を添付していただけたらと思います。
Mac・iPhoneがそろってなければ、iPhone上でのスタイルを確認することができないと思うので、想像だけでのCSSになる可能性はあるかと思います。
わいひら reacted
2018年9月23日 08:53
あ。たぶん平気だと思いますが、確認はキャッシュのない状況でおねがいします。プラグイン・場合によってはサーバーなど。
Topic starter
2018年9月23日 10:36
Akiraさん
こんにちは。
Akiraさんに教えていただいたCSSを入れてみましたが、添付画像のように、本文の部分が左右いっぱいに広がっています。どのような理由が考えられますでしょうか？
背景色のみ広げることは可能でしょうか？
背景色の色は少し濃くしましたので、以下のようなCSSを書いております。
.haikei {
background: bcb8b8;
margin: 0 calc((100% - 100vw) / 2);
}
Topic starter
2018年9月23日 10:38
かうたっくさん
ありがとうございます。
以下のCSSの場合、Mac版Safariで、右にスクロールしてしまいます。Chromeでは大丈夫です。またモバイル版のSafariでも横にスクロールすることはありませんでした。
.haikei {
background: bcb8b8;
margin: 0 -200%;
padding: 0 200%;
}
2018年9月23日 11:32
本文の部分が左右いっぱいに広がっています。どのような理由が考えられますでしょうか？
ご質問が、特定の要素に「背景色を付けて」「横幅いっぱい広げる」カスタマイズとのことだったからです。
本文は別の指定が必要です。
このような CSS でどうでしょうか。
.haikei {
background: #bcb8b8;
margin: 0 calc((100% - 100vw) / 2);
padding: 0 29px 1em;
}
.haikei > h2 {
margin: 0 calc((100% - 100vw) / 2);
padding: 25px calc((100vw - 1142px) / 2) 15px;
}
.haikei > p,
.haikei > div,
.haikei > h3 {
margin-left: auto;
margin-right: auto;
max-width: 1142px;
}
@media screen and (max-width: 1202px) {
.haikei > h2 {
padding: 25px calc((100vw - 100%) / 2) 15px;
}
}
@media screen and (max-width: 768px) {
.haikei {
padding: 0 10px 1em;
}
.haikei .column-wrap {
text-align: center;
}
}
@media screen and (max-width: 480px) {
.haikei > h2 {
padding: 10px calc((100vw - 100%) / 2) 8px;
}
}
わいひら reacted
Topic starter
2018年9月23日 12:19
Akiraさん
僕の説明が下手ですみませんでした。
まさに希望通りのカスタマイズです。本当にありがとうございます！
1点教えていただいてもいいでしょうか？
以下のようにHTMLを書いているのですが、一番上のh2の部分に背景色を適用するにはどうすればいいのでしょうか？
<div class="haikei">
<h2>〇〇〇〇</h2>
2018年9月23日 14:28
先程の CSS の中に、下記の指定があります。
.haikei > h2 {
margin: 0 calc((100% - 100vw) / 2);
padding: 25px calc((100vw - 1142px) / 2) 15px;
}
ここに background を指定されると、背景色が変わります。また、color を指定されると、フォント色の変更も可能です。
指定後は、こんな感じです。
.haikei > h2 {
background: #000026;
color: #fff;
margin: 0 calc((100% - 100vw) / 2);
padding: 25px calc((100vw - 1142px) / 2) 15px;
}
それと、今回のご質問とは関係がありませんが、jQuery にエラーが出ています。
エラー箇所は、子テーマの tmp-user / head-insert.php にあると思われる jQuery です。
WordPress では $ が使えないので、変更が必要です。
現在の jQuery と変更後のコードは、notepad.pw に貼り付けました。
わいひら reacted
Topic starter
2018年9月23日 16:17
Akiraさん
ありがとうございます！
H2に適用したCSS（下線）が横幅いっぱいに広がっているのを、広がらないようにすることはできるのでしょうか？
同じページ内のh2と比較すると、H2に適用したCSS（下線）が横幅いっぱいに表示されています。これを同じページ内のh2と同じようにできればと思っているのですが…画像を添付します。
jQueryのエラーについても教えて頂きありがとうございます。全く気がついておりませんでした。早速修正しました。本当に感謝しています。
2018年9月23日 17:53
大きな画面幅で横いっぱいにならないように。と言う意味でしたら以下を追加してご確認いただけますか
@media screen and (min-width: 1203px) {
.haikei > h2 {
margin: 0;
}
.haikei {
margin: 0;
}
}
わいひら reacted
2018年9月23日 18:03
そのようなデザインであれば、もっと少ない CSS でできます。
このフォーラムをもとに追加された CSS を全て削除し、下記の CSS を追加します。
/* 背景色を横幅いっぱいに */
.haikei {
background: #f4f4f4;
margin: 0 calc((100% - 100vw) / 2);
padding: 0 29px 1em;
}
.haikei > p,
.haikei > div,
.haikei > h2,
.haikei > h3 {
margin-left: auto;
margin-right: auto;
max-width: 1142px;
}
.haikei > h2 {
background: #f4f4f4;
}
@media screen and (max-width: 768px) {
.haikei {
padding: 0 10px 1em;
}
.haikei .column-wrap {
text-align: center;
}
}
それと、まだ jQuery でエラーが出ています。
jQuery を書かれているファイルも、エラーの原因でした。
現在は tmp-user / head-insert.php に書かれていると思うのですが、子テーマの javascript.js に jQuery をお書きください。
でないと、jQuery の本体が読み込まれる前にコードが読み込まれ、実行できずにエラーが出てしまいます。
javascript.js に書かれる際には、script タグでコードを囲む必要はありません。そのまま jQuery コードだけを追加します。
わいひら reacted
Topic starter
2018年9月23日 20:20
Akiraさん
ありがとうございます！
何度もすみませんでした。思い描いていたイメージのものが出来ました。本当にありがとうございました！
jQuery のエラーについてもありがとうございます。
tmp-user / head-insert.php に書いていたものを、子テーマの javascript.js へ書き直しました。また、scriptタグも外して、そのまま jQuery コードだけを書きました。
Chromeのデベロッパーツールで確認したところ、エラーは出ておりません。
今回は質問以外のこともご丁寧に教えてくださり、本当に感謝しています。ありがとうございました！
わいひら reacted
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。