サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
トピックスターター 2021年7月16日 01:31
夜遅くに失礼します。
cocoonにていつものコーヒーというスキンを使わせていただいているのですが、768pxから834pxの間で記事のタイトル上の余白がおかしくなってしまいます。
僕はあまりプログラムの知識がなく手探りでやったためこれでよいのかわかりませんが現在は
@media screen and (min-width: 768px) and (max-width: 834px){
main.main, div.sidebar{
padding-top: 0.1px;
}
を追記することで解決できています。
ちなみに他のスキンを選択しても場合は治ります。
ですが、原因が気になるのでお力添えいただいただけると幸いです。
よろしくお願いします。
ブログのURL↓
2021年7月16日 02:14
熊谷 優さん
今私の手元にはスマホしかなく、調べることはできません。
記事のタイトル上の余白がおかしくなってしまいます。
とは、どういう状態なのか、ご説明いただくと、他の方も回答しやすいと思われます。
おかしいだけでは、ちょっと分かりにくいと思います。
添付いただいた画像も、おかしいようには見えないのですが。
できることならば、おかしい状態の画像を添付いただくのが良いと思います。
画像にどこがおかしいのか説明書きなどあると、ベターだと思います。
わいひら reacted
トピックスターター 2021年7月16日 02:26
説明不足ですみませんでした。
余白というより背景かもしれません、、、
分かりやすいようにその部分を囲ってみました。
よろしくお願いします。
2021年7月16日 02:36
熊谷 優さん
なるほどです。
私のスマホから見た感じと、微妙に違いがありますね。
今はスマホしか手元になく、調べることができませんので、他の方をお待ちいただければと。
普段であれば、朝方くらいには活動なさっている方がいらっしゃるのですが、いつもとは限りませんので、少し気長にお待ちください。
わいひら reacted
トピックスターター 2021年7月16日 10:56
了解しました。ありがとうございます。
これは横幅が768pxから834pxの間でのみ起こっているので、スマホではしっかり表示されます。
なぜなのか原因が知りたいのでどうかよろしくお願いします。
2021年7月16日 12:03
熊谷 優さん
とても複雑で、説明が難しいです。
該当の範囲内では、marginの突き抜けが起きていると思います。
熊谷 優さんが子テーマにお書きになった部分の有無によって、メインコンテンツの高さが変化しています。
（h1のmargin-top分）
該当範囲内では、メインコンテンツ内にpadding-topがありません。
（子テーマの追加記載がない場合。）
そうすると、h1のmargin-topの38pxが、メインコンテンツからはみ出してしまうようです。
この手の説明は、なかなかフォーラムでは難しいです。
以下のリンクのものが参考になると思います。
（こちらは、margin-bottomですが。）
【CSS】子要素にmarginがあると、親要素を突き抜けてしまう問題の対処法
https://meshikui.com/2020/03/26/2620/
わいひら reacted
トピックスターター 2021年7月16日 14:16
丁寧な説明ありがとうございます。
これは僕が他に書いたCSSが原因で突き抜けがおきてしまっているのでしょうか？
それともCSSを追記して治すしか方法がないのでしょうか？
よくわからなくて、、、
ご教授いただけると幸いです。
トピックスターター 2021年7月16日 14:47
何度もすみません。
教えていただいたリンク先を参考に
main#main.main{/*新着記事の真上空白をへらす*/
margin:0;｝
この部分にoverflow:hidden;を追記したら治ったのでこれで様子見たいと思います。
本当にありがとうございました。
2021年7月16日 14:48
熊谷 優さん
なかなかフォーラムでは説明が難しいです。
別に熊谷 優さんの書いたCSSが原因ではなく、スキンそのものが。。。ということだと思います。
これから記載するCSSは、そのままスキンや親テーマに書かれているものではないことをご承知おきください。
もっと大量に記載されていますので、関係のあるところだけ抜粋します。
スキンには、今回関係のある親要素のメインコンテンツのpaddingは、以下のように指定があります。
main.main {
padding: 0px 29px;
}
@media screen and (max-width: 768px){
main.main, div.sidebar {
padding: 10px;
}
}
スキンでは、768px以下では上のpaddingが10px、768pxを超えると上のpaddingは無い状態です。
この状態だと、子要素h1のmargin-topは、768px以下では有効であるものの、768pxを超えると突き抜けると思います。
ただし、親テーマでは。
.main {
border: 1px solid transparent;
}
@media screen and (max-width: 834px) {
main.main,
div.sidebar {
border-width: 0;
}
}
基本的に親要素のメインコンテンツにborderが指定されています。
borderがあれば、子要素のmarginの突き抜けは起きていないみたいですね。
ただ、834px以下はborderがなくなってしまいます。
この状態で、親要素のpaddingがなければ、子要素のmarginの突き抜けが起きるのではないかと、思われます。
つまり、768px超～834px以下で、突き抜けが起きるんだと思います。
確かにことは分かりませんが。。。
確か、昔iPadの画面の大きさが変わったことがあったと思います。
その際に、親テーマはPC・モバイルの境界を、768px以下⇒834px以下へ変更したことがあったような記憶が薄っすらとあります。
推測ですが、スキンはその境界が768pxの頃に作成されたのではないかと。
対処としては、現在熊谷 優さんがお書きになっているCSSで良いのではないかと思います。
それか、スキンの境界を834px以下に合わせるならば、子テーマに以下のように書いても良いと思います。
@media screen and (max-width: 834px){
main.main, div.sidebar {
padding: 10px;
}
}
ただ、こうすると、padding分余白が増え、更に突き抜けたmargin分も増えて、かなり広くなってしまうかも知れません。
結局更なる調整が必要になる可能性があります。
わいひら reacted
2021年7月16日 14:51
熊谷 優さん
直りましたか。
本来は、はみ出した部分を非表示にするってことなんですけど。
それで直るみたいないんですよね。
トピックスターター 2021年7月16日 15:07
なるほどスキンによる影響だったんですね、、、
原因が分かってすっきりしました。
とりあえずはこのまま様子を見たいと思います。
この度は丁寧に教えてくださりありがとうございます。
また機会がありましたらその時はよろしくお願いします。
わいひら reacted
2021年7月16日 20:03
cocoonにていつものコーヒーというスキンを使わせていただいているのですが、768pxから834pxの間で記事のタイトル上の余白がおかしくなってしまいます。
ご連絡ありがとうございます。
いつものスキンで、不具合を確認しました。
修正版をGitHubにアップしておきました。
------------------------------------------------
https://github.com/yhira/cocoon
開発中の最新ファイルをダウンロードする場合は、上記ページのダウンロードボタンからzipファイルをダウンロードしてください。
FTPでのアップデート方法はこちら。
https://wp-cocoon.com/ftp-update/
------------------------------------------------
この変更は、次のアップデートで適用されます。
ｍｋ２ reacted
2021年7月16日 20:05
修正をしている間に、結構返信ががが。
トピックスターター 2021年7月16日 20:49
早い対応ありがとうございます。
アップデートがきしだい更新させていただきたいと思います。
2021年7月16日 21:32
こちらも私の環境で解消を確認しました。
ただ、私の環境は素に近く、背景真っ白でちょっと確認が難しいですが。
熊谷 優さんの環境でご確認いただくのが1番だと思いますので、ご連絡お待ちしております。
トピックスターター 2021年7月17日 14:16
更新して確認してきたら上に余白は治ったのですが左右の余白が非対称になってしまいました、、、
お手数をお掛けして申し訳ないのですが確認いただけると幸いです。
2021年7月17日 14:34
熊谷 優さん
ご連絡ありがとうございます。
当該事象を確認しました。
修正ミスのようです。
今回のスキンの修正の、以下が影響したようです。
main.main {
padding-left: 29px;
padding-left: 29px;
}
（一方は、padding-rightだと思います。）
夜には、わいひらさんがご確認してくださると思います。
しばらくお待ちください。
※やはり、ご本人にご確認いただくのが1番ですね。
トピックスターター 2021年7月17日 14:49
何度もすみません。
ウィジェットのテキストの部分にも謎の余白ができてしましました、、、
ご教授いただけると幸いです。
（ちなみにテキストを確認してみましたが空白はありませんでした）
2021年7月17日 15:15
熊谷 優さん
ウィジェットのテキストの部分にも謎の余白ができてしましました、、、
謎ではないんですが、確かに余白はできています。
ただ、他のものとの兼ね合いもありますので、こちらは熊谷 優さん側で調整していただくのが良い感じがします。
（他のブロックなどにも影響がでそう。）
熊谷 優さんは、そのウィジェットのみ調整したいのか、他のサイトバーのウィジェットも同様にしたいのかで、CSSが変わりそうです。
ご希望はありますか。
トピックスターター 2021年7月17日 15:41
他のサイトバーのウィジェットも同様、下の余白を縮めたいです！
よろしくお願いします。
2021年7月17日 16:51
熊谷 優さん
以下できくと思いますが、試してみていただけますでしょうか。
.sidebar .widget-sidebar {
margin-bottom: 0.5em;
}
数字や単位は、お好みで調整してください。
わいひら reacted
2021年7月17日 17:47
トピックが長くなってしまいましたので、ちょっと見づらいかもしれません。
わいひらさんにご確認いただきたいのは、以下のところです。
https://wp-cocoon.com/community/postid/53299/
2021年7月17日 19:57
修正ミスのようです。
今回のスキンの修正の、以下が影響したようです。main.main { padding-left: 29px; padding-left: 29px; }（一方は、padding-rightだと思います。）
rightに変更するの忘れていました。
修正したものをGitHubにアップしておきました。
ｍｋ２ reacted
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。