Cocoonフォーラム

サイト内検索
書き込みの前に以下の3点をご確認ください。
  1. 1つのトピックにつき1つの質問を書き込んでください
  2. 不具合・カスタマイズ対象ページのURLを提示高速化を無効にしてください
  3. 該当部分のキャプチャ・環境情報とともに書き込んでいただけると助かります

何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。

不具合・カスタマイズ対象ページのURL:

相談内容:

不具合の発生手順:

解決のために試したこと:

※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報:

※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。

環境情報の取得方法はこちら。
https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
https://wp-cocoon.com/theme-trouble/

フォーラム利用ガイドリンク

  1. フォーラムガイドライン
  2. よくある質問と答え(FAQ)
  3. サポート対象外のケース
  4. 原因不明の不具合用トラブルシューティング
  5. トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw
  6. 真っ白画面でのエラーメッセージの確認方法
  7. ブラウザ環境チェックツール
  8. Cocoonカスタマイズ依頼

フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。

トグルボックスでの改行について
 
共有:
通知
すべてクリア

[解決済] トグルボックスでの改行について

14 投稿
3 ユーザー
3 Reactions
2,885 表示
(@shinny)
Active Member Registered
結合: 6年前
投稿: 14
Topic starter  

いつもお世話になっております。

ありがとうございます。

 

トグルボックス内で改行すると、うまく反映されないようです。

改行しても反映させるには、個別で対応、設定をするべきでしょうか?

 

以下の記事のように参照記事をリンクを入れてボックス内にいれたいと思っていますが、全てうまくいくわけではないようです。(記事下、画像1)

ナニが嘘?データで見る地球温暖化の原因9つ 日本がかかえる現状と現在の対策方法 | 22世紀を生きる君へ
https://22nd-century.jp/environment-issues/global-warming/#toc37

 

以下のように改行なし、ハイパーリンクなしだとうまく作動します。(画像2)

【2019】日本と世界が抱える環境問題24つ。身近にある原因と現在の対策・取り組みとは? | 22世紀を生きる君へ
https://22nd-century.jp/environment-issues/solutions/#toc24

 

エディターの「テキスト」で保存している場合は、うまくいくようです。(画像3)

1年で95%のサンゴ礁が白化…壊滅的な現状から回復するためにできることは? | 22世紀を生きる君へ
https://22nd-century.jp/environment-issues/sango-bleaching/#toc19

 

 

 


   
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17220
 

よろしければ以下の方法で、トグルボックスに入力している内容をアップしていただいてよろしいでしょうか。
https://wp-cocoon.com/notepad-pw/

同様のテキストでこちらのテスト環境でも動作確認したく思います。


   
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17220
 

添付の画像も、エラーで表示できませんでした。

出来れば、画像形式のままアップしていただいてよろしいでしょうか(複数ある場合は数回書き込んでいただいて良いので)。


   
(@shinny)
Active Member Registered
結合: 6年前
投稿: 14
Topic starter  

ご対応いただきありがとうございます。

 

============================

①ナニが嘘?データで見る地球温暖化の原因9つ 日本がかかえる現状と現在の対策方法 | 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

============================

 

 

============================

③1年で95%のサンゴ礁が白化…壊滅的な現状から回復するためにできることは? | 22世紀を生きる君へ
https://22nd-century.jp/environment-issues/sango-bleaching/#toc19


https://notepad.pw/share/5kv79c2kj

============================

エディターの「テキスト」で保存している場合は、うまくいくようです。(画像3)

 

 

 

 

現象としては

<span class="toggle-content">が消えたり、何度もトライすると逆にいくつも<span class="toggle-content">の部分が生成される、</span>がランダムに(トグル内の一番最初の改行に)追記され、一番最後の</div>前の</span>が削除されるようです。

 

 

 


   
(@shinny)
Active Member Registered
結合: 6年前
投稿: 14
Topic starter  

画像1

 


   
(@shinny)
Active Member Registered
結合: 6年前
投稿: 14
Topic starter  

画像2


   
(@shinny)
Active Member Registered
結合: 6年前
投稿: 14
Topic starter  

画像3


   
(@shinny)
Active Member Registered
結合: 6年前
投稿: 14
Topic starter  

いつも、ご丁寧に対応いただき感謝いたします。

 


   
かうたっく
(@kautakku)
Famed Member Moderator
結合: 7年前
投稿: 4764
 

数年前に試したことがあって。改行を必要としないspanタグで、改行を必要とするpタグなどで囲むと、無理だったんですよね。

対応できる方法として、おっしゃる通りテキストエディタで保存しておくとイケますが、ビジュアルエディタにしたらアウトで。

ほかの方法はPHPファイルに直接書けば、『WordPressの仕様』に邪魔されず表示可能でした。

もしカスタマイズを考えるのであれば、WPの仕様をカスタマイズでやめる。さらに、トグルboxのみ適応させる。みたいなカスタマイズがいりそうかも?です。

※可能かどうかは別として。

※私も最近トグルボックスを使って思ったんですが、段落を入れ込むのは避け端的な文字列にして公開しました。


   
わいひら reacted
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17220
 

一応、確認なんですがビジュアルエディターのみでの不具合ですか?
ブロックエディターでも同様の動作になりますでしょうか。

投稿画面のビジュアルエディター上での「画像1」の入力状態のキャプチャもいただいてよろしいでしょうか。

ビジュアルエディターの場合は、かうたっくさんが書かれているように、自動整形されしまう場合があります。
アップされた画像を見て、同様に入力してみて、ビジュアルエディターの自動設計を避けられる方法があれば探ってみたいと思います。


   
(@shinny)
Active Member Registered
結合: 6年前
投稿: 14
Topic starter  

かうたっくさん

返信ありがとうございます。

 

改行できるとユーザービリティを上げることができると思い、どのようにしようか考えていました。

 

WPの使用を変えるのが、一括して対応できるので良さそうですね。ただ、今後のアップデートで対応が必要になると、他の方法も考えてみようかと思います。

 

丁寧にコメントいただき、ありがとうございます。


   
(@shinny)
Active Member Registered
結合: 6年前
投稿: 14
Topic starter  

使っているのは、ビジュアルエディターでのエラーです。

ブロックエディターで試してみたらうまく表示することができました。

 

 

今後はブロックエディターでの編集も考えたほうが良さそうですね...

 

もしビジュアルエディターで避けられる方法がありましたら、とてもうれしく思います。

 

エディター、ビジュアル画面のスクリーンショットも添付いたしました。

 


   
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17220
 

調べてみたところ、
トグルボックスのコンテンツ表示は「span class="toggle-content"」といったようにインライン要素のspanを利用しているので、要素内に段落pは作れないのだと思います(※正確にはビジュアルエディターに強制変換される)。

なので、ビジュアルエディターで改行を含むコンテンツを挿入したい場合は、以下のようにbr改行を用いて入力するしかないかと思います。
https://notepad.pw/code/mfyyc2y5t

「span class="toggle-content"」のように、インライン要素を利用しているからダメでブロック要素の「div class="toggle-content"」を利用すればよいのではないか?と思われるかもしれません。

けれど、divを使用した場合は、また別の形でビジュアルエディターに変換されて、不具合が出てしまいます。
実は最初divにしていたのですが、ビジュアルエディター上の不具合が出たためにspanにしたという経緯があります。

ですので、これに関しては、ビジュアルエディターの仕様ということで改行挿入する場合は、brを入力するということで対応していただくしかないかもしれません。
もしくはブロックエディターのものを利用するか。


   
(@shinny)
Active Member Registered
結合: 6年前
投稿: 14
Topic starter  

調査・提案いただきありがとうございます。

br改行にて対応したいところ無事に解決できました。

ありがとうございます。

 

今後とも宜しくおねがいします。

 

 


   
わいひら reacted
共有:

問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。

また、有用な回答があった場合は返信右下にある「いいね!」もご活用ください。回答者の励みになります。

「いいね!」機能はフォーラム登録者のみが利用できる機能です。

CC BY-ND 2.1)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。

フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。

最近の書き込みはこちら。

詳細なカスタマイズ依頼をするならこちら。

タイトルとURLをコピーしました