サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
トピックスターター 2019年4月26日 11:52
いつもお世話になっております。
ありがとうございます。
トグルボックス内で改行すると、うまく反映されないようです。
改行しても反映させるには、個別で対応、設定をするべきでしょうか？
以下の記事のように参照記事をリンクを入れてボックス内にいれたいと思っていますが、全てうまくいくわけではないようです。（記事下、画像１）
ナニが嘘？データで見る地球温暖化の原因９つ 日本がかかえる現状と現在の対策方法 | 22世紀を生きる君へ
https://22nd-century.jp/environment-issues/global-warming/#toc37
以下のように改行なし、ハイパーリンクなしだとうまく作動します。（画像２）
【2019】日本と世界が抱える環境問題24つ。身近にある原因と現在の対策・取り組みとは？ | 22世紀を生きる君へ
https://22nd-century.jp/environment-issues/solutions/#toc24
エディターの「テキスト」で保存している場合は、うまくいくようです。（画像３）
１年で95%のサンゴ礁が白化…壊滅的な現状から回復するためにできることは？ | 22世紀を生きる君へ
https://22nd-century.jp/environment-issues/sango-bleaching/#toc19
2019年4月26日 19:58
よろしければ以下の方法で、トグルボックスに入力している内容をアップしていただいてよろしいでしょうか。
https://wp-cocoon.com/notepad-pw/
同様のテキストでこちらのテスト環境でも動作確認したく思います。
2019年4月26日 19:59
添付の画像も、エラーで表示できませんでした。
出来れば、画像形式のままアップしていただいてよろしいでしょうか（複数ある場合は数回書き込んでいただいて良いので）。
トピックスターター 2019年4月28日 03:29
ご対応いただきありがとうございます。
============================
①ナニが嘘？データで見る地球温暖化の原因９つ 日本がかかえる現状と現在の対策方法 | 22世紀を生きる君へ
https://22nd-century.jp/environment-issues/global-warming/#toc37
↓
https://notepad.pw/share/bjjs3nc9a
============================
============================
【2019】日本と世界が抱える環境問題24つ。身近にある原因と現在の対策・取り組みとは？ | 22世紀を生きる君へ
https://22nd-century.jp/environment-issues/solutions/#toc24
↓
https://notepad.pw/share/tlct2p2x2
============================
============================
③１年で95%のサンゴ礁が白化…壊滅的な現状から回復するためにできることは？ | 22世紀を生きる君へ
https://22nd-century.jp/environment-issues/sango-bleaching/#toc19
↓
https://notepad.pw/share/5kv79c2kj
============================
エディターの「テキスト」で保存している場合は、うまくいくようです。（画像３）
現象としては
<span class="toggle-content">が消えたり、何度もトライすると逆にいくつも<span class="toggle-content">の部分が生成される、</span>がランダムに（トグル内の一番最初の改行に）追記され、一番最後の</div>前の</span>が削除されるようです。
トピックスターター 2019年4月28日 03:29
画像１
トピックスターター 2019年4月28日 03:30
画像２
トピックスターター 2019年4月28日 03:30
画像３
トピックスターター 2019年4月28日 03:31
いつも、ご丁寧に対応いただき感謝いたします。
2019年4月28日 08:15
数年前に試したことがあって。改行を必要としないspanタグで、改行を必要とするpタグなどで囲むと、無理だったんですよね。
対応できる方法として、おっしゃる通りテキストエディタで保存しておくとイケますが、ビジュアルエディタにしたらアウトで。
ほかの方法はPHPファイルに直接書けば、『WordPressの仕様』に邪魔されず表示可能でした。
もしカスタマイズを考えるのであれば、WPの仕様をカスタマイズでやめる。さらに、トグルboxのみ適応させる。みたいなカスタマイズがいりそうかも？です。
※可能かどうかは別として。
※私も最近トグルボックスを使って思ったんですが、段落を入れ込むのは避け端的な文字列にして公開しました。
わいひら reacted
2019年4月28日 20:02
一応、確認なんですがビジュアルエディターのみでの不具合ですか？
ブロックエディターでも同様の動作になりますでしょうか。
投稿画面のビジュアルエディター上での「画像１」の入力状態のキャプチャもいただいてよろしいでしょうか。
ビジュアルエディターの場合は、かうたっくさんが書かれているように、自動整形されしまう場合があります。
アップされた画像を見て、同様に入力してみて、ビジュアルエディターの自動設計を避けられる方法があれば探ってみたいと思います。
トピックスターター 2019年4月29日 08:37
かうたっくさん
返信ありがとうございます。
改行できるとユーザービリティを上げることができると思い、どのようにしようか考えていました。
WPの使用を変えるのが、一括して対応できるので良さそうですね。ただ、今後のアップデートで対応が必要になると、他の方法も考えてみようかと思います。
丁寧にコメントいただき、ありがとうございます。
トピックスターター 2019年4月29日 11:36
使っているのは、ビジュアルエディターでのエラーです。
ブロックエディターで試してみたらうまく表示することができました。
今後はブロックエディターでの編集も考えたほうが良さそうですね...
もしビジュアルエディターで避けられる方法がありましたら、とてもうれしく思います。
エディター、ビジュアル画面のスクリーンショットも添付いたしました。
2019年4月29日 19:58
調べてみたところ、
トグルボックスのコンテンツ表示は「span class="toggle-content"」といったようにインライン要素のspanを利用しているので、要素内に段落pは作れないのだと思います（※正確にはビジュアルエディターに強制変換される）。
なので、ビジュアルエディターで改行を含むコンテンツを挿入したい場合は、以下のようにbr改行を用いて入力するしかないかと思います。
https://notepad.pw/code/mfyyc2y5t
「span class="toggle-content"」のように、インライン要素を利用しているからダメでブロック要素の「div class="toggle-content"」を利用すればよいのではないか？と思われるかもしれません。
けれど、divを使用した場合は、また別の形でビジュアルエディターに変換されて、不具合が出てしまいます。
実は最初divにしていたのですが、ビジュアルエディター上の不具合が出たためにspanにしたという経緯があります。
ですので、これに関しては、ビジュアルエディターの仕様ということで改行挿入する場合は、brを入力するということで対応していただくしかないかもしれません。
もしくはブロックエディターのものを利用するか。
cocoon-user1206 reacted
トピックスターター 2019年4月30日 05:51
調査・提案いただきありがとうございます。
br改行にて対応したいところ無事に解決できました。
ありがとうございます。
今後とも宜しくおねがいします。
わいひら reacted
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。