サイト内検索
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月22日 15:09
cocoonを使用させて頂いており有難うございます。
不具合なのか、私の設定にミスがあるのかわからないのですが、cocoonの最新版にバージョンアップした直後からの症状なので、こちらに書かせて頂きます。
固定ページに、タグのメニューから「２カラム」を挿入した場合、左の部分と右の部分の高さが違うようになってしまいました。
（ビジュアルエディタの画面では正常に左右同じ高さで表示されています。）
（また、バージョンアップする前までは、左右同じ高さで表示されておりました。）
左カラム、右カラムの幅、高さを同じにするにはCSSにどう書けば良いのか教えて頂けないでしょうか？
よろしくお願いします。
2020年12月22日 15:46
前略、けん さん
おそらく、以下のトピックと関係があるような気がします。
CVボタンが変になった為、原因が分かれば教えて頂きたいです。
もし、お差し支えがなければ、Cocoonの高速化設定をOFFにして、URLをご提示いただければ、具体的なアドバイスがいただけるかもしれません。
This post was modified 4年前 by リフィトリー
わいひら reacted
2020年12月22日 15:51
けん さん
過去のトピックのリンク先を間違えていたので、修正しました。
Topic starter
2020年12月22日 16:04
リフィトリーさん、アドバイス＆参考記事の詳解有難うございます。
ご指定頂いた記事も見ていたんですが、ボタン下だけの事ではないので、新しくトピックを立てしましました。ルール違反であれば申し訳ございません。
さて、現在公開にしていないサイトなので、URLを書き込む前に何とかなればと思い書き込みました。
ただ、私の場合は、ボタン下の余白ではなく、カラムそのものがおかしいような気がしています。
やはり、URLを書き込んだほうが良いのでしょうか？
アドバイスを頂く身なのに、こちらの手前勝手な事情で申し訳ないですが、アドバイスのほどよろしくお願いします。
2020年12月22日 16:16
@けん さん
私のテスト環境では、２カラムも同じ高さを保っているようです。
やはり、実際のURLを頂いた方が、原因は掴みやすいかもしれません。（お差し支えがなければの話なので無理なことは申せません）
わいひら reacted
Topic starter
2020年12月22日 16:33
2020年12月22日 16:37
@けん さん
２カラム部分のソースコードはどのようになっていますか？
Topic starter
2020年12月22日 16:42
@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>
です。
2020年12月22日 16:42
CVボタンが変になった為、原因が分かれば教えて頂きたいです。
こちらのトピックでリフィトリーさんがご紹介下さっている内容で修正はできそうですが、根本的な問題がいまいちわかりませんね。
私の環境でも再現できなかったので、プラグインか何かの影響なんですかね。
2020年12月22日 16:43
@けん
やはり、過去のトピックのボタンのときと同じ要因かもしれません。
私のテスト環境のバージョンが少し古いものなのかもしれません。
ちょっと、応急の方法を考えてみます。
Topic starter
2020年12月22日 16:48
@mofumofuさん
アドバイス有難うございます。
実は、ボタン下の余白 のCSSも試して見たんですが、だめだったので、藁にもすがるきもちでフォーラムに書き込ませて頂きました。
プラグインの問題もあるんですかね。
再現確認までして頂き有難うございます。大変感謝しております。
Topic starter
2020年12月22日 16:53
@leafytreeさん
当方のご面倒な事にご助力頂き、有難うございます。
なにか、私の設定の問題かもしれませんね。
ご助力頂けますこと、大変有難い＆心強いです。
2020年12月22日 16:56
@けん さん
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>
Topic starter
2020年12月22日 16:56
@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 ----------------------------------------------
2020年12月22日 17:00
@けん さん
私も応急措置としては、mofumofuさんの書いた２番目の方法が良いと思います。
でも、なんで、ソースコードのClassが違うんだろう・・？
This post was modified 4年前 2回 by リフィトリー
Topic starter
2020年12月22日 17:01
@leafytreeさん
記載して頂いたリフィトリーさんんのソースコードをそのまま張り付けた結果でも、左右の高さが違うんです。。（泣
2020年12月22日 17:07
けんさん
<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>
これをコピペで張り付けていただくとどうなりますでしょうか？
わいひら reacted
Topic starter
2020年12月22日 17:09
@mofumofuさん
有難うございます。
記入していただいた方法を今試したところ、正常に表示されました！
応急処置 本当に助かりました。
私のような知識なしの素人にも気さくに教えて頂き、大変感謝いたしております。
Topic starter
2020年12月22日 17:16
@leafytreeさん
有難うございます。先ほどリフィトリーさんからも御指南頂いたとおり、mofumofuさんのアドバイスをCSSに記載したところ、正常に表示されました！
リフィトリーさん、mofumofuさんには、貴重なお時間を割いていただき、ご助力頂けましたことを大変ありがたく思っております。
まだ、mofumofuさんのご指摘の通り、根本的な解決にはならないのかも知れませんので、以降も引き続き試行してみます。
ともあれ、本当にありがとうございました！
大変心強かったです。
2020年12月22日 17:41
テスト環境の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のマージンが付いてしまうようです。
そのあたりが、まだ不明です。
2020年12月22日 17:50
どういった条件だと左右のカラムコンテナに「blank-box」というClass名が付与されるのか、ちょっとよくわからないです。
ただ、
.article .blank-box
というセレクタが、今回の仕様変更に含まれているので、わいひらさんが何かご存じかもしれません。
2020年12月22日 17:55
@けん さん
URLをご提示くださり、ありがとうございました。
もしからしたら、Cocoonの開発に役立つかもしれません。
2020年12月22日 18:03
@けん さん
ところで、ひとつ伺いたいのですが、カラムに枠線が付いていましたが、枠線はどのようにして付けていらっしゃいましたか？
Topic starter
2020年12月22日 18:13
@leafytreeさん
こちらこそありがとうございました。すみません。URL消してしまいました。
一応、CSSに書いたことで、高さが同じに表示されるようになりました。（ので、解決ボタンをおしました）
以前よりは、高さが広がった（間延びした？）ような気がしてますが…。
私は専門的な事は良く解りませんが、以前は、
左側の子要素の下に1.4emのマージンが付いてしまうようです。
両方ともそのくらいの高さだったと思います。左側の狭いほうの高さくらいだったような気が…。
Topic starter
2020年12月22日 18:19
@leafytreeさん
２カラムで枠線をつけるまでの手順は、下記のようにしてました。
１．エディタのタグボタンで「2カラム（１：１）を選択」
２．左カラム入力、右カラム入力 の後、
３．エディタのスタイルボタンからボックス（白抜き）を選択。
私の入力の仕方が悪いんでしょうか？
ワープロ感覚で入力してます。。
2020年12月22日 18:23
@けん さん
どうも、3 番の「エディタのスタイルボタンからボックス（白抜き）を選択。」が原因のようです。
私の環境でも、再現できました。
2020年12月22日 18:28
@けん さん
「エディタのスタイルボタンからボックス（白抜き）を選択。」をすることで、左右のカラムのコンテナ（divタグ）に「blank-box」というClass名が付与されてしまうため、そうなってしまうようです。
やはり、今回のCocoonの仕様変更の影響です。
ただ、わいひらさんも、四苦八苦されていらっしゃるようですので、今後、対応策をお考えになるのではないかと思います。
Topic starter
2020年12月22日 18:34
@leafytreeさん
えっそうなんですね！入力の仕方で表示が変わるとは、知りませんでした。
ちなみに、皆さんは、このような場合、どのように入力されるのでしょう？
（どのように入力すれば、崩れなく入力できるのでしょう？）
お忙しいとは思いますが、自分のような素人の入力作業のために教えて頂けないでしょうか？
2020年12月22日 18:51
@けんさん
とりあえず、わいひらさんの回答を待ちましょう。
ちょっと小用で、外します。
2020年12月22日 20:09
URLが消えてしまっていて…。
おおよその内容は分かったのですが、出来れば一度状態を見せていただけないでしょうか。
本サイトで表示させとくのがまずい場合は、同様の状態のテストサイトなどでも良いです。
2020年12月22日 20:27
@yhira さん
https://wp-cocoon.com/community/postid/43120/
旧エディターで上記のやり方で再現できるかと思います。
私の記述も少し間違っていたかもしれません。
「blank-box」ではなく、
.article .column-wrap :last-child
で下のマージンをゼロにしているためかもしれません。
This post was modified 4年前 5回 by リフィトリー
2020年12月22日 20:51
@yhira さん
やはり、「blank-box」のクラスも関係していますね。
下方向のマージン1.4emを有効にする場合と最後の子要素の下方向のマージンをゼロにする場合の組み合わせによって、左右の下方向のマージンが異なってしまうことで、高さが変わってしまうようです。
Topic starter
2020年12月22日 21:53
@yhiraさん
cocoonを利用させて頂いており、ありがとうございます。
URL削除してしまってすみませんでした。
こちらになります。
先ほど、CSSに
.article .column-wrap :last-child {
margin-bottom:1.4em;
}
を書いて、とりあえず見栄えは直ったので、削除してしまってました。
現在は、追加したCSSを再度削除して、ずれている状態ですのでご確認頂けると幸いです。
Topic starter
2020年12月23日 19:18
URL削除いたしますね。
2020年12月23日 20:11
URL削除いたしますね。
30分前に消されて今回も見れなかった ?
僕は基本的に、この時間しか対応する余裕がないです。
URLを有効なままにしておくのは何か問題があるのでしょうか。
@yhira さん
https://wp-cocoon.com/community/postid/43120/
旧エディターで上記のやり方で再現できるかと思います。
消えたURLの先もこれと同じ状態になるのでしょうか。
まず、それを確認したかったので。
とりあえずこれでもやってみます。
Topic starter
2020年12月23日 21:03
@yhiraさま
わいひら様
こちらがURLです。
基本的には、リフィトリーさんがあげて頂いたそのものです。（多分…）
本日、色々と作業している中で、新たに
・「表」（table）の下の空白が広がっていたりしていた症状が出ていたり（適当にCSSで応急処置）
・エディタで改行時の余白が全くなくなって行間が詰まった状態になったり（解決済）
・テーブルアイコンから表の行削除をした場合に、削除しなかった行に「新たな列」が挿入されたり、
と色々な不具合が出たため、
「cocoonを以前のバージョンに戻せば直るかも？」との素人考えで、「cocoon-2.2.4.10」に戻そうとしたためです。
（書き込んだ時点のものと、バージョンが違っていては余計にややこしい質問になって迷惑をかける結果になるのではないかと心配しまして…。）
結果、バージョンを落としてもカラムの高さの症状は改善はされませんでしたので、もっと以前のバージョンに戻さないといけないのか、このままアップデートを待ったほうが良いのか考えていた最中でした。
URLはしばらく置いておきます。
結果的にわいひらさんを急かすような状況を作ってしまったようで申し訳ございません。
様々なご対応をされている事と存じてしていますので、お時間のある時にご確認頂ければ幸いです。
2020年12月23日 23:39
URLありがとうございます。
もう消して大丈夫です。
確認してソースコードを得てこちゃん環境でも試し不具合を修正してみました。
------------------------------------------------
https://github.com/yhira/cocoon
開発中の最新ファイルをダウンロードする場合は、上記ページのダウンロードボタンからzipファイルをダウンロードしてください。
FTPでのアップデート方法はこちら。
https://wp-cocoon.com/ftp-update/
------------------------------------------------
2020年12月23日 23:40
・「表」（table）の下の空白が広がっていたりしていた症状が出ていたり（適当にCSSで応急処置）
・エディタで改行時の余白が全くなくなって行間が詰まった状態になったり（解決済）
こちらも、スクリーンショット（可能ならURL）をいただければ、可能であれば修正いたします。
・テーブルアイコンから表の行削除をした場合に、削除しなかった行に「新たな列」が挿入されたり
ただこれに関しては、Cocoon義体ケーブルの行を操作する処理は書いていないため、テーマとは別の問題かもしれません。
Topic starter
2020年12月24日 00:23
@yhiraさま
修正有難うございます。修正ファイルは明日にでもダウンロードして試してみます。
- テーブルの行削除の際の列が挿入される問題は、ダウングレードした現在のcocoon-2.2.4.10では症状が出ていないのでスクショが取れません。（お役に立てずすみません。明日、２．２．５にアップデート後に、修正頂いたファイルを適用した後にもう一度、確認してみます）
エディタで改行時の余白が全くなくなって行間が詰まった状態の件は、
お疲れ様です。
この度cocoonをアップデートしました。
その際画像のように行間が乱れたように感じます。これがcocoon-master-2.2.5.1でのスクショになります
の方と同じ症状でした。
解決策は、このフォーラム内のどなたかが書かれていたかと思いますが、cocoon設定の「目次」をオン・オフする事で、解消しました。
具体的には、目次の表示にチェックを入れて、一旦更新。その後、チェックを外し再度更新をしました。
ちなみにオン・オフの切り替えを試してみたのは、ダウングレートする前の最新バージョンのcocoonでした。
私はcocoonの目次をオフにしている状態で使用しており、サイトのどこにも目次を使用していませんでしたが、試してみた所、フツーに表示されるようになっていました。
（その後、数ページ編集しておりましたが問題なく使用できていました。）
現在は、ダウングレードしている状態ですので、その症状はまったくございません。
（オンオフの効果なのか、ダウングレードの効果なのか…。）
テーブルの件も、エディタの行間の件も、現在の状況ではスクショを撮ったり再現することができませんが、何かの改善のきっかけになればと、オンオフを試してみた結果をお知らせいたしました。
2020年12月24日 01:10
@yhira さん
２カラム + ボックス（白抜き）の組み合わせの高さのズレの件、早速、Version: 2.2.5.5 をインストールして確認したところ、問題が解消されているようです。
けん さん
行間の問題は、もしかしたら、けんさんのおっしゃるように以下のトピックと同じ原因かもしれませんね。
cocoon-master-2.2.5.1にアップデート後行間が乱れた
ロコさんのご案内で、解決された様子です。
Topic starter
2020年12月24日 11:10
@yhiraさま
ご多忙の中、修正された最新ファイル有難うございました。
最新ファイルを試した結果を下記３点ご報告いたします。
- 固定ページ・投稿ページにて、エディタに直接記載しているものはブラウザでキチンと表示されるよう修正されました。ご多忙の中、ご対応頂きまして有難うございます。大変ありがたく思っております。
- カスタムHTMLやテキストに記載し、ウィジェットで表示したものは、高さが違うまま表示されます。（電話番号など変わった場合に、一括修正できるようウィジェットで表示を試みたんですが…）
URLこちら - テーブルの行・列の件に関しては、現在の所、全く問題なくフツーに操作可能です。
（何だったんだろう…という感じです）
以上です。
ブログ作成なども初心者ですので、私の使用の仕方（入力の仕方？）が問題なのかも…（汗。。
わいひら reacted
Topic starter
2020年12月24日 11:17
@leafytreeさん
何かとご助力有難うございます。私も本日、最新で試してみました。
エディタ入力の場合、きちんと表示されるようになりました。
わいひら様にも大変ありがたく思っており、返信を書いておりました。
私の使用の仕方（入力）が悪いのか、ウィジット表示では、従来のままの表示でした。。
色々とご助力ありがとうございます。ほんとに助かります。今後ともよろしくお願いします。
リフィトリー reacted
2020年12月27日 19:51
ご確認いただきありがとうございます！
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。