サポート » 使い方全般 » 編集画面で文章を折り畳んだり展開をしたい

  • 編集画面で長い文章を書いていると、
    h2 見出し1
    本文1
    h2 見出し2
    本文2
    h2 見出し3
    本文3
    ・・・
    のような繰り返しになりますよね。
    この時に、本文の部分を折り畳んで見出しだけの表示に出来るようなプラグインは無いでしょうか?
    h2 見出し1
    h2 見出し2
    h2 見出し3
    今は、本文3を書いている

    こんな感じです。もしh3やh4が有る場合はそれらの見出しでも折り畳みと展開が出来れば理想的です。

    なぜこんな機能が欲しいかと言うと、長い文章を書いていると、見出しをどんな風に付けたのか
    確認したい場合があります。
    すでに本文を書いたセクションは本文を折り畳んで見出しだけになっているとスッキリして見易いと思うのです。
    現状では、ページをスクロールして上に戻ってどんな見出しだったのか確認する作業が面倒なのです。

    そんなプラグインは無いけれと、長文を書く上で、ここで指摘した問題を解消できるテクニックなど
    ありましたら教えて下さい。

7件の返信を表示中 - 1 - 7件目 (全7件中)
  • こんにちは、

    役に立つかどうかは、わかりませんが

    例えば、

    
    <h2 class="toggle" tabindex="0">hello</h2>
    <div class="content">lorem...</div>
    <h2>hello</h2>
    <div class="content">lorem...</div>
    <h2>hello</h2>
    <div class="content">lorem...</div>
    

    といったHTMLを記述するといった前提だと、

    
    .toggle:focus ~ .content,.toggle:active ~ .content{
         visibility:hidden;
         position:absolute;
    }
    .content{
         visibility:visible;
         position:relative;
    }
    

    といったCSSを記述してやれば、プリビューなどで最初のh2をクリックすると、divは非表示になります。

    普通は、h2をクリックする事は出来ないですが、tabindexを使うと、クリックできるようになります。

    実際にこれが、動くかどうかは、それぞれのテーマ次第ですが、

    raindrops — Free WordPress Themes

    というテーマで、投稿本文と、cssはこの投稿のCSSというテキストエリアに、上記のコードを記述して確認しています。(Chrome)

    ビジュアルエディタでは、クリックして押しっぱなしにしないとタイトルだけ表示は出来ないみたいですが、プリビューや、ブログを表示した場合には、動作するみたいです。

    動作原理が解かったら、いろいろ工夫できると思います。

    HTML5のdetail要素でも、コンテンツの開閉は出来るみたいなので、そういうのも一度確認しておくといいかも、、、

    Can I use… Support tables for HTML5, CSS3, etc

    • この返信は5 ヶ月、 2 週間前に  nobita さんが編集しました。
    • この返信は5 ヶ月、 2 週間前に  nobita さんが編集しました。

    nobitaさん
    サンプルコードありがとうございました。
    Simplicity2で試してみました。
    Preview画面で、
    最初のhelloをクリックすると全部のdivが畳まれました。
    二番目、三番目のhelloクリックで全部のdivが展開され元に戻りました。
    確かにこの方式で、見出しだけが表示できました。
    ただ、目次表示系のプラグインを入れていると、記事先頭に見出しだけが表示できますので、現状では私はそれで
    見出しを確認しています。
    出来れば編集画面で見出しの折り畳みと展開が出来れば良いのですが、難しそうですね。
    でも教えていただいたコードはとても参考になりますので、応用して実験してみます。
    ありがとうございました。

    ただ、目次表示系のプラグインを入れていると、記事先頭に見出しだけが表示できますので、現状では私はそれで
    見出しを確認しています。

    そうなんですね、私もTOCプラグインを使えばいいんじゃないかとも思っていたのですが、、、

    ビジュアルエディター上で、TOC が表示できるといいという事ですかね?

    プラグインがどんな仕組みかわからないので、確たることは言えませんが、ショートコードなんかで表示できるものだと、

    ショートコードの実行結果を表示できるフィルターもあるので、そういうのも検討してみてはどうでしょう

    投稿内でショートコードを実行する – WordPress Snippet

    役に立たない答えばかりでごめんなさい

    >ビジュアルエディター上で、TOC が表示できるといいという事ですかね?

    ええっと、そうではなくて、長い文章を書いていて、必要に応じて本文を折り畳みたいのです。
    例えば、長い文章があり、

    h2 見出し1
    本文1・・・・・・・・・・・・・・・・・・・・・・・・・・・・
    ・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・
    ・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・
    h2 見出し2
    本文2・・・・・・・・・・・・・・・・・・・・・・・・・・・・
    ・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・
    ・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・
    h2 見出し3
    本文3・・・・・・・・・・・・・・・・・・・・・・・・・・・・
    ・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・
    ・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・

    今は、本文2を書いている状態として、本文1と本文3は折り畳んでいる状態が下です。

    h2 見出し1
    h2 見出し2
    本文2・・・・・・・・・・・・・・・・・・・・・・・・・・・・
    ・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・
    ・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・
    h2 見出し3

    こんな風に、必要に応じて長い本文を折り畳めたら見出しだけが見えるので、私には文章の全体像を掴み易いのです。
    もしWordPressのビジュアルエディターで出来ないなら、何か単体のエディターでそう言う機能を持つ物はご存じ無いでしょうか?

    そうなんですね、

    テキストエディタなんかでそういった機能を持っているものは、あると思います。

    秀丸エディタ、表示/折り畳み なんかのメニューで本文を折りたたむことが出来ると思います。

    多分いろんなエディターで、折り畳み機能はあるんじゃないかと思います。

    あと、余計な事ですが WordPress5で、エディタが gutenberg に変更になるかも、って話は聞いていますか?

    今だと、Gutenberg — WordPress Plugins で、試用できるようになっていますが、そのエディタでは、
    Content Structureという〇にiて書いてるボタンがあって、そこに見出しなどのアウトラインが表示されて、例えばh2を使っていたら、クリックすると、そのh2に移動する機能があるので、そういうもので、結構わかりやすくなるかも、なんて思いました。

    gutenberg試してみました。
    いい感じですね。
    「Content Structureという〇にiて書いてるボタン」を使うと確かに見出しが確認出来ます。
    私の要望にかなり近いです。
    ただ、残念ながら折り畳みと展開機能が無さそうでした。
    リクエストを送っておけば、将来追加してもらえますかね?
    とりあえずgutenbergを使ってみます。
    それにしてもnobita さん、WordPressの最新情報に詳しいですね。
    一体、どうやってそんな最新情報を入手しているんですか?
    プロのWEBデザイナーさんとか、何かそう言う専門家ですか?
    とにかく、ありがとうございました。

    GutenbergプラグインのSupportのページで、私の希望する機能をリクエストしてみました。
    下手な英語が通じるかどうか心配ですが、どんな反応があるか様子を見てみたいです。
    https://wordpress.org/support/topic/section-collapse-expand-function-request/

7件の返信を表示中 - 1 - 7件目 (全7件中)
  • このトピックに返信するにはログインが必要です。