サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
26/04/2019 11:52 am
いつもお世話になっております。
ありがとうございます。
トグルボックス内で改行すると、うまく反映されないようです。
改行しても反映させるには、個別で対応、設定をするべきでしょうか？
以下の記事のように参照記事をリンクを入れてボックス内にいれたいと思っていますが、全てうまくいくわけではないようです。（記事下、画像１）
ナニが嘘？データで見る地球温暖化の原因９つ 日本がかかえる現状と現在の対策方法 | 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
26/04/2019 7:58 pm
よろしければ以下の方法で、トグルボックスに入力している内容をアップしていただいてよろしいでしょうか。
https://wp-cocoon.com/notepad-pw/
同様のテキストでこちらのテスト環境でも動作確認したく思います。
Topic starter
28/04/2019 3:29 am
ご対応いただきありがとうございます。
============================
①ナニが嘘？データで見る地球温暖化の原因９つ 日本がかかえる現状と現在の対策方法 | 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>が削除されるようです。
Topic starter
28/04/2019 3:29 am
画像１
Topic starter
28/04/2019 3:30 am
画像２
Topic starter
28/04/2019 3:30 am
画像３
Topic starter
28/04/2019 3:31 am
いつも、ご丁寧に対応いただき感謝いたします。
28/04/2019 8:15 am
数年前に試したことがあって。改行を必要としないspanタグで、改行を必要とするpタグなどで囲むと、無理だったんですよね。
対応できる方法として、おっしゃる通りテキストエディタで保存しておくとイケますが、ビジュアルエディタにしたらアウトで。
ほかの方法はPHPファイルに直接書けば、『WordPressの仕様』に邪魔されず表示可能でした。
もしカスタマイズを考えるのであれば、WPの仕様をカスタマイズでやめる。さらに、トグルboxのみ適応させる。みたいなカスタマイズがいりそうかも？です。
※可能かどうかは別として。
※私も最近トグルボックスを使って思ったんですが、段落を入れ込むのは避け端的な文字列にして公開しました。
わいひら reacted
Topic starter
29/04/2019 8:37 am
かうたっくさん
返信ありがとうございます。
改行できるとユーザービリティを上げることができると思い、どのようにしようか考えていました。
WPの使用を変えるのが、一括して対応できるので良さそうですね。ただ、今後のアップデートで対応が必要になると、他の方法も考えてみようかと思います。
丁寧にコメントいただき、ありがとうございます。
Topic starter
29/04/2019 11:36 am
使っているのは、ビジュアルエディターでのエラーです。
ブロックエディターで試してみたらうまく表示することができました。
今後はブロックエディターでの編集も考えたほうが良さそうですね...
もしビジュアルエディターで避けられる方法がありましたら、とてもうれしく思います。
エディター、ビジュアル画面のスクリーンショットも添付いたしました。
29/04/2019 7:58 pm
調べてみたところ、
トグルボックスのコンテンツ表示は「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
Topic starter
30/04/2019 5:51 am
調査・提案いただきありがとうございます。
br改行にて対応したいところ無事に解決できました。
ありがとうございます。
今後とも宜しくおねがいします。
わいひら reacted
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。