サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2022年9月17日 21:24
過去の投稿なども拝見したのですが直し方がわからずこちらでお伺いさせてください。
グーテンベルクの2カラム機能を使ってPC上でボタンを横並びにさせている部分があります。
PCの2カラムがスマホで縦並び表示される際、以前は何もしなくても余白ありで表示されていましたがアップデート後か分かりませんが最近になって確認したところ、くっついて表示されるようになってしまいました。
例） https://b-fitness.net/urawa-hikaku#toc2
ただし、以下のように今まで通り余白アリで表示されるものもあります。
例） https://b-fitness.net/urawa-hikaku#toc21
くっついてしまう応急処置として左カラムの下に半角スペースを入れてみたところ、以下の記事ではちょうどよい感じの余白に成功しました。
例） https://b-fitness.net/kameari-hikaku#toc11
ただ、すべての記事を書き直すとなると膨大な量なので余白アリに統一できないかと考えているのですが素人でCSSもどう記載したら良いかわかりません。
原因と対策方法を教えていただけないでしょうか？
2022年9月17日 22:41
mana72さん
同じように見えて、違うブロックで作成なさっていると思います。
①以下の状態を確認しますと・・・
https://b-fitness.net/urawa-hikaku#toc2
以下のような表示
このソースを確認すると以下。
divタグは以下のような感じで
<div class="wp-block-cocoon-blocks-button-1 button-block">
aタグは以下のような感じ
<a href="https://b-fitness.net/renaissance-waribiki" class="btn btn-l has-background has-green-background-color" target="_blank">ルネサンスの割引情報</a>
結果的には、以下のCSSがあたり、margin-botoomはゼロ。
②もう一方の以下を確認しますと・・・
https://b-fitness.net/urawa-hikaku#toc21
以下のような表示
そのソースを確認すると以下。
divタグは以下のような感じで
<div class="wp-block-cocoon-blocks-button-wrap-1 btn-wrap btn-wrap-block button-block btn-wrap-l has-background has-green-background-color">
aタグは以下のような感じ
<a rel="nofollow noopener" target="_blank" href="https://t.felmat.net/fmcl?ak=C7229H.1.Q1127661.O69346J">App Storeをチェックする</a>
結果的には、以下のCSSがあたり、margin-bottonは1.4em。
分かりにくいと思いますが、
「has-background」「has-green-background-color」の場所が、①と②では違います。
おそらく、違うブロックで作成されています。
長いので返信を分けます。
わいひら reacted
2022年9月17日 22:51
続きです。
どうすれば、同じようにmana72さんと同じように作れるのか、試してみました。
以下は、一見同じように見えますが、違うブロックで作成しました。
ボタン1のソースを確認すると以下。
aタグの方に「has-background」「has-green-background-color」がある状態。
divタグの方に「has-background」「has-green-background-color」がある状態。
これは、mana72さんの以下のものと同じ構造だと思います。
私は、ボタン1をCocoonの「ボタンブロック」で
ボタン2は、「囲みボタンブロック」で作成しました。
そもそも、違うもので作成なさっているので、表示に差異があるのではないかと、推測します。
（実際のところは、分かりませんけれど、少なくとも同じではないです）
（実際のところは、分かりませんけれど、少なくとも同じではないです）
本当は、同じように作成した方が良さそうには思いますが・・・。
以下をあてれば、間隔は開くと思いますが、あまり確認はしていません。
.wp-block-cocoon-blocks-button-1 a.btn.btn-l {
margin-bottom: 1.4em;
}
わいひら reacted
Topic starter
2022年9月18日 16:06
ｍｋ２様
詳細にお返事いただきありがとうございます。
確かにボタンブロックと囲みボタンブロックを併用して使っておりました。
おっしゃる通り、2カラムとも「囲みボタンブロック」にすれば間隔は1.4開きました。
ただ普通の「ボタンブロック」を2カラムで並べるとやっぱりくっついてしまいます。
なので、単純に「違うブロックで作成しているからくっつく」という理由だけではなさそうです。
未だ原因不明なのでボタンブロックの下にはすべて半角スペースを入れる形で対応しようと思います。
ボタンは揃えたほうが良いとのご意見は大変参考になりました。
ありがとうございました。
2022年9月18日 16:19
mana72さん
スマホからなもので、簡単に。
先に書いたとおり、「囲みボタンブロック」と「ボタンブロック」では、「margin-bottom」(ブロック下部の余白)の値が違います。
「ボタンブロック」は余白がゼロです。(「囲みボタンブロック」では、余白は1.4emある。）
そのため、「ボタンブロック」はくっつきます。
「ボタンブロック」で間隔を「囲みボタンブロック」と同じにするには、直上の返信に書いたCSSを書く必要があると思います。
ということを、長々と先のいくつかの返信では書かせていただきました。（分かりにくいとは思いますが。）
2022年9月18日 19:28
テスト的に該当箇所を修正してみました。
以下のファイルでアップデートするとどうなりますでしょうか。
------------------------------------------------
https://github.com/xserver-inc/cocoon
開発中の最新ファイルをダウンロードする場合は、上記ページのダウンロードボタンからzipファイルをダウンロードしてください。
WordPressでの手動アップデート方法はこちら
https://wp-cocoon.com/manual-update-of-cocoon-theme/
------------------------------------------------
2022年9月18日 22:53
ご確認いただきありがとうございます！
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。