サポート » 使い方全般 » 表をたたみたい

  • 解決済 7110naito

    (@7110naito)


    こんにちは。

    表を作成しており、列が多い(50くらい)ので項目ごとにたたみたいのですが、うまくできません。何かいい方法はありませんでしょうか?

    【CSS】コピペするだけ!アコーディオンボックスのつくり方
    を参考にアコーディオンボックスを作ってみたのですが、展開した内容がテキストなら良いのですが、表にすると機能しませんでした。

    展開したい表の構成は、1列目が表題で、3行の内容を記載したいです。

    表の作成には「Advanced Editor Tools」をしようしています。

10件の返信を表示中 - 1 - 10件目 (全10件中)
  • 7110naitoさん、こんにちは。

    個人的な意見ですが、アコーディオンブロックを導入できるプラグインも探せばありますので、探してみてはいかがでしょうか。

    ご参考になれば。

    トピック投稿者 7110naito

    (@7110naito)

    shokun0803さん こんにちは
    返信ありがとうございます。

    「Shortcodes Ultimate」というプラグインで、アコーディオンブロックを作成し表示する部分にテーブルを入れることができました。

    イメージ ←のように表にアコーディオン機能を持たせてたたむ方法が見つからず困っております。

    助言を頂ければ幸いです。

    7110naitoさん、こんにちは。

    OneDrive の共有を使用しているようですが、アクセスできないので見ることができません。
    全体に共有設定を行うか、他の一般的な画像共有サイト等を利用されるとよろしいかと。

    ご参考になれば。

    トピック投稿者 7110naito

    (@7110naito)

    shokun0803さん

    失礼いたしました。イメージ が理想です。

    こんにちは、

    こんな感じでどうでしょう。

    <table>
    <tr tabindex="0" class="group-1" style="background:#eee"><td>hello</td><td>world</td></tr>
    <tr class="group-1"><td >group1 hello</td><td>world</td></tr>
    <tr class="group-1"><td>group1 hello</td><td>world</td></tr>
    <tr class="group-2" tabindex="0" style="background:#eee"><td>hello</td><td>world</td></tr>
    <tr class="group-2"><td>group2 hello</td><td>world</td></tr>
    <tr class="group-2"><td>group2 hello</td><td>world</td></tr>
    </table>
    
    tr:not([tabindex]){
    display:none;
    }
    .group-2:focus-within ~ tr.group-2,
    .group-1:focus-within ~ tr.group-1{
    display:table-row;
    }

    ブロックエディタでエラーになりますが、HTMLで編集で何とかなるのでしょう。
    セルにリンクなどがある場合は、もうちょっとCSSの検討が必要になるでしょう。

    • この返信は1年、 7ヶ月前にnobitaが編集しました。
    トピック投稿者 7110naito

    (@7110naito)

    nobitaさん こんにちは

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

    すいません。私は先月からワードプレスを触り始めた初心者で、HTMLとかCSSの編集ができません。
    ただ表が表示されるだけで、アコーディオンの様にならないのですが・・・

    大変お手数ですが、具体的に教えていただけますでしょうか?

    htmlは、カスタムHTMLブロックに貼り付けてください。

    カスタマイザー/追加CSSに以下を張り付けてみてください

    テーマによってCSSが効かない場合もあるので、効きやすい指定に変更しました。

    
    table:not(#specificity) tr:not([tabindex]){
    display:none;
    }
    table:not(#specificity) .group-2:focus-within ~ tr.group-2,
    table:not(#specificity)  .group-1:focus-within ~ tr.group-1{
     display:table-row;
    }

    サンプルはこちら、

    https://www.tenman.info/wp3/emulsion/en/2022/11/04/%e8%a1%a8%e3%81%ae%e6%8a%98%e3%82%8a%e7%95%b3%e3%81%bf%e3%82%b5%e3%83%b3%e3%83%97%e3%83%ab/

    • この返信は1年、 7ヶ月前にnobitaが編集しました。

    補足

    
    <tr tabindex="0" class="group-1" style="background:#eee">
    

    tabindex=”0″ を追加すると、クリックできるようになります。group-1 というのは、関連して開きたい行に追加します。
    表示する行が10個あれば、それぞれgroup-2…group-10のように異なるクラスを割り当てます。

    対応するCSSも、併せて変更します

    
    table:not(#specificity) .group-10:focus-within ~ tr.group-10,
    ...
    table:not(#specificity) .group-2:focus-within ~ tr.group-2,
    table:not(#specificity)  .group-1:focus-within ~ tr.group-1{
        display:table-row;
    }
    

    意味は、group-xをクリックすると、フォーカスが働きますので、隣接するgroup-xを、テーブルの行として表示するという意味です。

    
    table:not(#specificity) tr:not([tabindex]){
    display:none;
    }
    

    このCSSの意味は、tabindexという属性のない trは表示しない。という意味です。

    ブロックエディタで、エラーが出るというのは、リンク先の画像を確認してください。

    Convert to HTML をクリックすると、HTMLが表示されるので、編集できます。

    ただし、マルチサイトの場合だと、まだ古いタイプのエラーになるので、マルチサイトだと編集できない可能性があります。

    • この返信は1年、 7ヶ月前にnobitaが編集しました。
    • この返信は1年、 7ヶ月前にnobitaが編集しました。
    • この返信は1年、 7ヶ月前にnobitaが編集しました。
    トピック投稿者 7110naito

    (@7110naito)

    nobitaさん こんにちは。

    大変詳しい返信ありがとうございます。

    取り急ぎやってみたところ出来ました!!

    nobitaさんのご説明がまだ理解できてませんが、勉強しながら修正していきたいとおもいます。

    shokun0803さん、nobitaさんありがとうございました。またお願いします!!

    @7110naito さん、こんにちは。

    解決済みになってよかったですね!
    さすがは nobita さんです。

    別解ですが、個人的に気になてちょっと調べてみたら、以下のような方法もあるようです。

    HTMLとかCSSの編集ができません

    とのことなので、今後勉強しながら理解していければいいですね!

    以下のリンクの一番下のコードが希望の方法を実現しそうです。
    WordPress 上の投稿だけで実施するには少し工夫する必要があるかな?
    HTMLとCSSのみで、縮小/展開出来るテーブルを作りたい。

    ご参考になれば。

10件の返信を表示中 - 1 - 10件目 (全10件中)
  • トピック「表をたたみたい」には新たに返信することはできません。