前略、けん さん

おそらく、以下のトピックと関係があるような気がします。

CVボタンが変になった為、原因が分かれば教えて頂きたいです。

もし、お差し支えがなければ、Cocoonの高速化設定をOFFにして、URLをご提示いただければ、具体的なアドバイスがいただけるかもしれません。

けん さん

過去のトピックのリンク先を間違えていたので、修正しました。

@leafytree

リフィトリーさん、アドバイス＆参考記事の詳解有難うございます。

ご指定頂いた記事も見ていたんですが、ボタン下だけの事ではないので、新しくトピックを立てしましました。ルール違反であれば申し訳ございません。

さて、現在公開にしていないサイトなので、URLを書き込む前に何とかなればと思い書き込みました。

ただ、私の場合は、ボタン下の余白ではなく、カラムそのものがおかしいような気がしています。

やはり、URLを書き込んだほうが良いのでしょうか？

アドバイスを頂く身なのに、こちらの手前勝手な事情で申し訳ないですが、アドバイスのほどよろしくお願いします。

@けん さん

私のテスト環境では、２カラムも同じ高さを保っているようです。

やはり、実際のURLを頂いた方が、原因は掴みやすいかもしれません。（お差し支えがなければの話なので無理なことは申せません）

@けん さん

クラッシックエディターのタグのメニューから、２カラムも、同じ高さになるようです。

やはり、何らかの高さが揃わない要因があるのかもしれません。

@leafytree

リフィトリーさん

ご自身のサイトで確認までして頂き有難うございます。大変恐縮です。

URLをアップしました。

こちらです。

お解りになるますでしょうか？

@けん さん

２カラム部分のソースコードはどのようになっていますか？

@leafytreeさん

<div class="column-wrap column-2">
<div class="column-left blank-box">
<p style="text-align: center;"> </p>
</div>
<div class="column-right blank-box">
<p style="text-align: center;"> </p>
</div>
</div>
<div class="column-wrap column-2">
<div class="column-left blank-box">
<p style="text-align: center;"><span style="color: #125480; font-size: 20px;"><strong>お電話でのお問合せ</strong></span></p>
<p style="text-align: center;"><strong><span style="font-size: 24px;"><i class="fas fa-phone-square-alt"> </i>050-000-000</span></strong></p>
<p style="text-align: center;">受付時間:10:00~18:30</p>
</div>
<div class="column-right blank-box">
<p style="text-align: center;"><span style="color: #125480;"><strong>WEBからのお問合せ</strong></span></p>
<p style="text-align: center;"><a class="btn btn-indigo btn-m" href="https://incre.official.jp/otoiawase/" target="_blank" rel="noopener">お問合せフォームから</a></p>
<p style="text-align: center;">24時間受付中</p>
</div>
</div>

です。

CVボタンが変になった為、原因が分かれば教えて頂きたいです。

こちらのトピックでリフィトリーさんがご紹介下さっている内容で修正はできそうですが、根本的な問題がいまいちわかりませんね。

私の環境でも再現できなかったので、プラグインか何かの影響なんですかね。

@けん

やはり、過去のトピックのボタンのときと同じ要因かもしれません。

私のテスト環境のバージョンが少し古いものなのかもしれません。

ちょっと、応急の方法を考えてみます。

@mofumofuさん

アドバイス有難うございます。

実は、ボタン下の余白　のCSSも試して見たんですが、だめだったので、藁にもすがるきもちでフォーラムに書き込ませて頂きました。

プラグインの問題もあるんですかね。

再現確認までして頂き有難うございます。大変感謝しております。

@けん さん

２カラム部分に付与されているClassが、Cocoonのものと、ちょっと違うんですよね。

私の添付した画像と比べていただけると分かるかと思いますが・・

環境情報をいただくことは可能でしょうか？

@leafytreeさん

当方のご面倒な事にご助力頂き、有難うございます。

なにか、私の設定の問題かもしれませんね。

ご助力頂けますこと、大変有難い＆心強いです。

けんさん

もし、style.cssに

.article .column-wrap :last-child {
margin-bottom:1.4em;
}

を追加しても改善されない場合は、少し強引な方法になりますが、

該当するタグに

style="margin-bottom: 1.4em;"

を追加するのが一番手っ取り早いと思います。

あくまで応急措置ですので、引き続き根本原因を見つけていく必要はありそうですが。。。

@けん さん

Cocoonのクラシックエディターの２カラムだと以下のようなソースコードになるのではないかと思われます。

<div class="wp-block-cocoon-blocks-column-2 column-wrap column-2 column-2-2-1-1 layout-box">
<div class="wp-block-cocoon-blocks-column-left column-left">
<p>２カラムの左側のテキストです。</p>
</div>


<div class="wp-block-cocoon-blocks-column-right column-right">
<p>２カラムの右側のテキストです。</p>
</div>
</div>

@leafytreeさん

サイト名は削除しておりますが、情報は下記の通りです。

----------------------------------------------
サイト名：
サイトURL：
ホームURL：
コンテンツURL：/wp-content
インクルードURL：/wp-includes/
テンプレートURL：/wp-content/themes/cocoon-master
スタイルシートURL：/wp-content/themes/cocoon-child-master
親テーマスタイル：/wp-content/themes/cocoon-master/style.css
子テーマスタイル：/wp-content/themes/cocoon-child-master/style.css
スキン：/wp-content/themes/cocoon-master/skins/skin-template/style.css
WordPressバージョン：5.6
PHPバージョン：7.3.16
ブラウザ：Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:84.0) Gecko/20100101 Firefox/84.0
サーバーソフト：Apache
サーバープロトコル：HTTP/1.1
言語：ja,en-US;q=0.7,en;q=0.3
----------------------------------------------
テーマ名：Cocoon
バージョン：2.2.5.3
カテゴリ数：33
タグ数：61
ユーザー数：1
----------------------------------------------
子テーマ名：Cocoon Child
バージョン：1.1.1
style.cssサイズ：719バイト
functions.phpサイズ：203バイト
----------------------------------------------
Gutenberg：0
AMP：0
PWA：0
Font Awesome：5
Auto Post Thumbnail：0
Retina：0
ホームイメージ：/wp-content/themes/cocoon-master/screenshot.jpg
----------------------------------------------
ブラウザキャッシュ有効化：0
HTML縮小化：0
CSS縮小化：0
JavaScript縮小化：0
Lazy Load：0
WEBフォントLazy Load：0
----------------------------------------------
利用中のプラグイン：
AddQuicktag 2.5.3
Advanced Editor Tools (previously TinyMCE Advanced) 5.6.0
Akismet Anti-Spam 4.1.7
BackWPup 3.8.0
Category Order and Taxonomy Terms Order 1.5.7.4
Contact Form 7 5.3.2
Contact Form 7 add confirm 5.1
Flamingo 2.2.1
PDF Embedder 4.6.1
Really Simple CSV Importer 1.3
Really Simple SSL 4.0.5
Shortcodes Ultimate 5.9.6
WP Multibyte Patch 2.9
Yoast Duplicate Post 3.2.6
----------------------------------------------

@けん さん

私も応急措置としては、mofumofuさんの書いた２番目の方法が良いと思います。

でも、なんで、ソースコードのClassが違うんだろう・・？

@leafytreeさん

記載して頂いたリフィトリーさんんのソースコードをそのまま張り付けた結果でも、左右の高さが違うんです。。（泣

@けん さん

ちょっとテスト環境のCocoonをバージョン：2.2.5.3 にしてみますね。

けんさん

<div class="wp-block-cocoon-blocks-column-2 column-wrap column-2 column-2-2-1-1 layout-box">
<div class="wp-block-cocoon-blocks-column-left column-left">
<p>２カラムの左側のテキストです。</p>
</div>


<div class="wp-block-cocoon-blocks-column-right column-right" style="margin-buttom:1.4em;">
<p>２カラムの右側のテキストです。</p>
</div>
</div>

これをコピペで張り付けていただくとどうなりますでしょうか？

@mofumofuさん

有難うございます。

記入していただいた方法を今試したところ、正常に表示されました！

応急処置　本当に助かりました。

私のような知識なしの素人にも気さくに教えて頂き、大変感謝いたしております。

@leafytreeさん

有難うございます。先ほどリフィトリーさんからも御指南頂いたとおり、mofumofuさんのアドバイスをCSSに記載したところ、正常に表示されました！

リフィトリーさん、mofumofuさんには、貴重なお時間を割いていただき、ご助力頂けましたことを大変ありがたく思っております。

まだ、mofumofuさんのご指摘の通り、根本的な解決にはならないのかも知れませんので、以降も引き続き試行してみます。

ともあれ、本当にありがとうございました！

大変心強かったです。

classの違いについては、カラムはWordpressのものとCocoonのものとがあるので違うのだと思います。

テスト環境のCocoonのバージョンを2.2.5.3 にしたら、クラシックエディターのタグから選択する２カラムのClass名が変わりました。

でも、私の環境だと、「blank-box」というClassはつかないいんですよね。

<div class="column-wrap column-2">
   <div class="column-left">
      <p>左側に入力する内容</p>
   </div>
   <div class="column-right">
     <p>右側に入力する内容</p>
   </div>
</div>

「blank-box」というClass名が付くと、左側の子要素の下に1.4emのマージンが付いてしまうようです。

そのあたりが、まだ不明です。

どういった条件だと左右のカラムコンテナに「blank-box」というClass名が付与されるのか、ちょっとよくわからないです。

ただ、

.article .blank-box

というセレクタが、今回の仕様変更に含まれているので、わいひらさんが何かご存じかもしれません。

@けん さん

URLをご提示くださり、ありがとうございました。

もしからしたら、Cocoonの開発に役立つかもしれません。

@けん さん

ところで、ひとつ伺いたいのですが、カラムに枠線が付いていましたが、枠線はどのようにして付けていらっしゃいましたか？

@leafytreeさん

こちらこそありがとうございました。すみません。URL消してしまいました。

一応、CSSに書いたことで、高さが同じに表示されるようになりました。（ので、解決ボタンをおしました）

以前よりは、高さが広がった（間延びした？）ような気がしてますが…。

私は専門的な事は良く解りませんが、以前は、

左側の子要素の下に1.4emのマージンが付いてしまうようです。

両方ともそのくらいの高さだったと思います。左側の狭いほうの高さくらいだったような気が…。

@leafytreeさん

２カラムで枠線をつけるまでの手順は、下記のようにしてました。

１．エディタのタグボタンで「2カラム（１：１）を選択」

２．左カラム入力、右カラム入力　の後、

３．エディタのスタイルボタンからボックス（白抜き）を選択。

私の入力の仕方が悪いんでしょうか？

ワープロ感覚で入力してます。。

@けん さん

どうも、3 番の「エディタのスタイルボタンからボックス（白抜き）を選択。」が原因のようです。

私の環境でも、再現できました。

@けん さん

「エディタのスタイルボタンからボックス（白抜き）を選択。」をすることで、左右のカラムのコンテナ（divタグ）に「blank-box」というClass名が付与されてしまうため、そうなってしまうようです。

やはり、今回のCocoonの仕様変更の影響です。

ただ、わいひらさんも、四苦八苦されていらっしゃるようですので、今後、対応策をお考えになるのではないかと思います。

@leafytreeさん

えっそうなんですね！入力の仕方で表示が変わるとは、知りませんでした。

ちなみに、皆さんは、このような場合、どのように入力されるのでしょう？

（どのように入力すれば、崩れなく入力できるのでしょう？）

お忙しいとは思いますが、自分のような素人の入力作業のために教えて頂けないでしょうか？

@けんさん

とりあえず、わいひらさんの回答を待ちましょう。

ちょっと小用で、外します。

URLが消えてしまっていて…。
おおよその内容は分かったのですが、出来れば一度状態を見せていただけないでしょうか。
本サイトで表示させとくのがまずい場合は、同様の状態のテストサイトなどでも良いです。

@yhira さん

https://wp-cocoon.com/community/postid/43120/

旧エディターで上記のやり方で再現できるかと思います。

私の記述も少し間違っていたかもしれません。

「blank-box」ではなく、

.article .column-wrap :last-child

で下のマージンをゼロにしているためかもしれません。

@yhira さん

やはり、「blank-box」のクラスも関係していますね。

下方向のマージン1.4emを有効にする場合と最後の子要素の下方向のマージンをゼロにする場合の組み合わせによって、左右の下方向のマージンが異なってしまうことで、高さが変わってしまうようです。

@yhiraさん

cocoonを利用させて頂いており、ありがとうございます。

URL削除してしまってすみませんでした。

こちらになります。

先ほど、CSSに

.article .column-wrap :last-child {
margin-bottom:1.4em;
}

を書いて、とりあえず見栄えは直ったので、削除してしまってました。

現在は、追加したCSSを再度削除して、ずれている状態ですのでご確認頂けると幸いです。

URL削除いたしますね。

URL削除いたしますね。

30分前に消されて今回も見れなかった ? 
僕は基本的に、この時間しか対応する余裕がないです。
URLを有効なままにしておくのは何か問題があるのでしょうか。

投稿者:: @leafytree

@yhira さん

https://wp-cocoon.com/community/postid/43120/

旧エディターで上記のやり方で再現できるかと思います。

消えたURLの先もこれと同じ状態になるのでしょうか。
まず、それを確認したかったので。
とりあえずこれでもやってみます。

@yhiraさま

わいひら様

こちらがURLです。

基本的には、リフィトリーさんがあげて頂いたそのものです。（多分…）

本日、色々と作業している中で、新たに

・「表」（table）の下の空白が広がっていたりしていた症状が出ていたり（適当にCSSで応急処置）

・エディタで改行時の余白が全くなくなって行間が詰まった状態になったり（解決済）

・テーブルアイコンから表の行削除をした場合に、削除しなかった行に「新たな列」が挿入されたり、

と色々な不具合が出たため、

「cocoonを以前のバージョンに戻せば直るかも？」との素人考えで、「cocoon-2.2.4.10」に戻そうとしたためです。

（書き込んだ時点のものと、バージョンが違っていては余計にややこしい質問になって迷惑をかける結果になるのではないかと心配しまして…。）

結果、バージョンを落としてもカラムの高さの症状は改善はされませんでしたので、もっと以前のバージョンに戻さないといけないのか、このままアップデートを待ったほうが良いのか考えていた最中でした。

URLはしばらく置いておきます。

結果的にわいひらさんを急かすような状況を作ってしまったようで申し訳ございません。

様々なご対応をされている事と存じてしていますので、お時間のある時にご確認頂ければ幸いです。

URLありがとうございます。
もう消して大丈夫です。
確認してソースコードを得てこちゃん環境でも試し不具合を修正してみました。
------------------------------------------------
https://github.com/yhira/cocoon
開発中の最新ファイルをダウンロードする場合は、上記ページのダウンロードボタンからzipファイルをダウンロードしてください。

FTPでのアップデート方法はこちら。
https://wp-cocoon.com/ftp-update/
------------------------------------------------

・「表」（table）の下の空白が広がっていたりしていた症状が出ていたり（適当にCSSで応急処置）

・エディタで改行時の余白が全くなくなって行間が詰まった状態になったり（解決済）

こちらも、スクリーンショット（可能ならURL）をいただければ、可能であれば修正いたします。

・テーブルアイコンから表の行削除をした場合に、削除しなかった行に「新たな列」が挿入されたり

ただこれに関しては、Cocoon義体ケーブルの行を操作する処理は書いていないため、テーマとは別の問題かもしれません。

@yhiraさま

修正有難うございます。修正ファイルは明日にでもダウンロードして試してみます。

• テーブルの行削除の際の列が挿入される問題は、ダウングレードした現在のcocoon-2.2.4.10では症状が出ていないのでスクショが取れません。（お役に立てずすみません。明日、２．２．５にアップデート後に、修正頂いたファイルを適用した後にもう一度、確認してみます）

エディタで改行時の余白が全くなくなって行間が詰まった状態の件は、

投稿者:: @ponpon178

お疲れ様です。

この度cocoonをアップデートしました。

その際画像のように行間が乱れたように感じます。これがcocoon-master-2.2.5.1でのスクショになります

の方と同じ症状でした。

解決策は、このフォーラム内のどなたかが書かれていたかと思いますが、cocoon設定の「目次」をオン・オフする事で、解消しました。

具体的には、目次の表示にチェックを入れて、一旦更新。その後、チェックを外し再度更新をしました。

ちなみにオン・オフの切り替えを試してみたのは、ダウングレートする前の最新バージョンのcocoonでした。

私はcocoonの目次をオフにしている状態で使用しており、サイトのどこにも目次を使用していませんでしたが、試してみた所、フツーに表示されるようになっていました。

（その後、数ページ編集しておりましたが問題なく使用できていました。）

現在は、ダウングレードしている状態ですので、その症状はまったくございません。

（オンオフの効果なのか、ダウングレードの効果なのか…。）

テーブルの件も、エディタの行間の件も、現在の状況ではスクショを撮ったり再現することができませんが、何かの改善のきっかけになればと、オンオフを試してみた結果をお知らせいたしました。

@yhira さん

２カラム + ボックス（白抜き）の組み合わせの高さのズレの件、早速、Version: 2.2.5.5 をインストールして確認したところ、問題が解消されているようです。

けん さん

行間の問題は、もしかしたら、けんさんのおっしゃるように以下のトピックと同じ原因かもしれませんね。

cocoon-master-2.2.5.1にアップデート後行間が乱れた

ロコさんのご案内で、解決された様子です。

@yhiraさま

ご多忙の中、修正された最新ファイル有難うございました。

最新ファイルを試した結果を下記３点ご報告いたします。

1. 固定ページ・投稿ページにて、エディタに直接記載しているものはブラウザでキチンと表示されるよう修正されました。ご多忙の中、ご対応頂きまして有難うございます。大変ありがたく思っております。
2. カスタムHTMLやテキストに記載し、ウィジェットで表示したものは、高さが違うまま表示されます。（電話番号など変わった場合に、一括修正できるようウィジェットで表示を試みたんですが…）
   URLこちら
3. テーブルの行・列の件に関しては、現在の所、全く問題なくフツーに操作可能です。
   （何だったんだろう…という感じです）

以上です。

ブログ作成なども初心者ですので、私の使用の仕方（入力の仕方？）が問題なのかも…（汗。。

@leafytreeさん

何かとご助力有難うございます。私も本日、最新で試してみました。

エディタ入力の場合、きちんと表示されるようになりました。

わいひら様にも大変ありがたく思っており、返信を書いておりました。

私の使用の仕方（入力）が悪いのか、ウィジット表示では、従来のままの表示でした。。

色々とご助力ありがとうございます。ほんとに助かります。今後ともよろしくお願いします。

ご連絡ありがとうございます。
修正してみました。
https://github.com/yhira/cocoon

@yhiraさま

修正有難うございました。すべてうまく表示されています。

開発作業も大変な作業かとおもいますが、ご自愛頂きまして、頑張ってください！

cocoonでサイトを作れる事を大変ありがたく思っております。

ご確認いただきありがとうございます！