カスタムフィールドグループを開閉式にする

以前のブログはこちら

広告

こんにちは。ましじめの田村です。

私が執筆した著書、『現場のプロから学ぶ CSSコーディングバイブル』は、Web制作の現場で役立つテクニックやノウハウをまとめています。
興味を持っていただけた方は、ぜひご覧ください。
https://amzn.to/3A8kNHC

このリンクは Amazon のアフィリエイトプログラムを通じて設定されています。

カスタムフィールドグループまたはカスタムユニットフィールドグループ使ってますか?
繰り返しの情報が登録できて便利ですよね。
しかし、情報が多くなってくるとどうしても長くなってしまい順番の入れ替えが大変だったりします。

そんなカスタムフィールドグループを少し使いやすくするテクニックです。
サンプルコードは記事の最後に貼り付けていますので参考にしてください。


解説

HTMLのdetails要素とsummary要素を使用します。


まずカスタムフィールドをつくりましょう。
カスタムフィールドは『カスタムフィールドメーカー』で作るのが良いいです。
例では「カスタムユニット」を利用しました。
ここでは縦向きレイアウトで「見出し、本文」のカスタムユニットを作りまます。


次に入れ子のtableにdetailsとsummaryを追加します。
上のtable側に追加したsummaryは「見出しのカスタムフィールド」の値をいれます。
下のtable側に追加したsummaryは「保存されていません」としておきます。

サンプルコードは記事の最後に貼り付けていますので参考にしてください。



ざっくりですが以上でカスタムフィールドグループ内で開閉できるようになりました。
これで数が増えても安心ですね!



コード


<td>
  <details>
        <summary>{title}</summary>
      <table>
        <tr>
          <th>見出し</th>
          <td>
            <input type="text" name="title[]" value="{title}">
          </td>
        </tr>
        <tr>
          <th>本文</th>
          <td>
            <textarea name="content[]">{content}</textarea>
          </td>
        </tr>
      </table>
 </details>
</td>
    <td>
  <details>
        <summary>保存されていません</summary>
      <table>
        <tr>
          <th>見出し</th>
          <td>
            <input type="text" name="title[]" value="">
          </td>
        </tr>
        <tr>
          <th>本文</th>
          <td>
            <textarea name="content[]"></textarea>
          </td>
        </tr>
      </table>
  </details>
    </td>

関連するタグ

全 1 件中 1 〜 1 件目を表示

この記事を書いた人

たむら しょうご

HTML&CSSコーダー

ウェブアクセシビリティ対応、フロントエンド開発、CMSを利用したウェブサイト制作を担当しています。
趣味はガーデニングです。

ましじめのスキルが必要ですか?

遠慮なくご相談ください。我々はあなたのプロジェクトに最善を尽くし、あなたのウェブサイトの制作を強力にサポートいたします。

お問い合わせはこちらから