enpekoubouさん

私は使ったことはないですが、以下のようなものがあります。（只今スマホですので、試せないですが）

Simple Definition List Blocks
https://ja.wordpress.org/plugins/simple-definition-list-blocks/

またまた、早速の回答ありがとうございます。

これって外部のプラグインですよね。
サイトの重さとかCocoonへの影響とか考えると、
なるべくプラグインは使用したくなくて…
紹介いただいたサイトを拝見し、
この程度のプラグインなら大丈夫なのかなと思っているところもありますが、
そういった不安があるため、
Cocoonに定義リストのブロックを作成していただければ大変助かるなと思った次第です。

とりあえずは、「横並びブロック」のCSSをカスタマイズすれば、
思ったリストが作成できそうな気がしています。

回答に大変感謝しています。
また回答いただけると大変うれしいです。

ありがとうございました。

ブロックの開発は工数を要します。

プラグインを使わないなら、カスタムHTMLに書けばいいだけの事。

それに、dl、dt、ddに拘る必要ありますか？
テーブルでセルに、住所、京都府...と書いてもいいように思います。

●ご参考

https://ss1.xrea.com/chuya.s239.xrea.com/temp/sample-turicco/sample-sticky/sample-restaurant/

enpekoubouさん

投稿者:: @enpekoubou

↑

サイトの重さとかCocoonへの影響とか考えると、
なるべくプラグインは使用したくなくて…

これはあまり理由にはならないような気はします。
Cocoonだって、コードの量が増えたり、ファイルが増えれば、重くなりません？

WordPressにおいて、機能追加のためにプラグインを使うことは普通だと思います。
（もちろん、使う量はあるでしょうけれど。）

私は、定義リストは部分的にしか使っていないですし、このプラグインを使っていないもので、使い勝手などは分からないのですけれど。
（私はHTMLタグをそのまま書いています。定義リストはそんなに複雑ではないですので。Excelを使ったりしますけれど）

例えば、このプラグインには、こういう機能がない、こういうところが不便だから、という理由であれば分かり易いと思います。
（このプラグインでは要望を満たさないという理由・・・でしょうか）

chu-yaさん、mk2さん、素晴らしいご回答をありがとうございます。

chu-yaさん

「プラグインを使わないなら、カスタムHTMLに書けばいいだけの事」
→ご指摘の通りですね。私も以前はその方法を取っていました。
ただ、今回はウェブサイト作成に不慣れな方でも簡単に修正できる方法を模索しています。
カスタムHTMLはHTMLとCSSの知識があれば難しくないですが、そういった知識がない方には難しいかもしれません。

「それに、dl、dt、ddに拘る必要ありますか？テーブルでセルに、住所、京都府...と書いてもいいように思います。」
→最初の質問で「項目と内容をPCでは横並びに、モバイルでは縦並びに表示したい」と書きましたが、テーブルタグでもそれが可能かどうかを検討しています。
前回の回答で「横並びブロック」のCSSをカスタマイズすればできそうだと書きましたが、私も定義リストに特にこだわっているわけではありません。

ｍｋ２さん

最初に書いたように、私はWPにそれほど詳しくないので、難しい点もありますが、
半年間学んだ通信制の学校で、WPのプラグインには不正なものも多いと聞いています。
そのため、プラグインの導入には慎重になっています。必要最小限で安全なものだけを利用したいと考えています。

確かにこのプラグインは評価が5つ星ですが、評価の数が少ないため、少し不安に思っています。それが、プラグインを利用したくない理由の一つです。

お二人とも、貴重なご意見をありがとうございました。今後も色々とご教示いただけると幸いです。
どうぞよろしくお願いいたします。

ちなみに、ブロックの作成方法は、以下のサイトにあったので、また手があいたら自分でブロックの作成にチャレンジしてみようと思いました。
https://rakuraku-engineer.com/

enpekoubouさん

投稿者:: @enpekoubou

↑

半年間学んだ通信制の学校で、WPのプラグインには不正なものも多いと聞いています。
そのため、プラグインの導入には慎重になっています。必要最小限で安全なものだけを利用したいと考えています。

私は、その辺の野良プラグインをご紹介した訳ではありません。

WordPress.org公式に掲載されているプラグインをご紹介致しました。

WordPress.org公式プラグインディレクトリにあるということは、WordPress.orgの審査を通過したものであることは、ご承知おきください。

WordPress.org公式ディレクトリに掲載されるということは、そんなに簡単ではないと思いますけれど。
（ちなみにCocoonは、公式テーマディレクトリには掲載されていません。）

【ご参考】
https://ja.wordpress.org/plugins/developers/add/

投稿者:: @enpekoubou

↑

確かにこのプラグインは評価が5つ星ですが、評価の数が少ないため、少し不安に思っています。それが、プラグインを利用したくない理由の一つです。

定義リストの需要が、それ程ないのではないかと思われます。
（ちなみに、ご紹介したもの以外にも、定義リスト用のプラグインはあります、検索なさってみてください）

機能とか、そういうことがご要望を満たさないということではないということですか。

こうなってしまうと、enpekoubouさんがこのプラグインをご使用になりたくないから、同じ機能をCocoonに実装して欲しいという風に聞こえてしまいますが・・・。

少しお考えを整理したり、他にもお調べになってみてはいかがでしょう。
今のままでは、無理筋な感じがします。

ご参考として、別テーマ「SNOW MONKEY」のフォーラムのやりとりをリンクさせていただきます。
（WordPress本体側でも、話が進まなかった様子）
https://snow-monkey.2inc.org/forums/topic/%E5%AE%9A%E7%BE%A9%E3%83%AA%E3%82%B9%E3%83%88%E3%80%90dl%E3%82%BF%E3%82%B0%E3%80%91-%E3%82%92%E3%80%80snow-monkey-blocks-%E3%81%AB%E5%AE%9F%E8%A3%85%E3%81%97%E3%81%A6%E3%82%82%E3%82%89%E3%81%88/

投稿者:: @enpekoubou

↑

「項目と内容をPCでは横並びに、モバイルでは縦並びに表示したい」

そもそも、作成者が意図するレイアウトは、作成者がCSSを書き実現する話です。
機能追加を要望する事ではないです。

ネットに方法は色々書かれています。
これを機に、もう少しHTML、CSSを勉強しましょう。

●HTML

• テーブルブロックで作成。
• 高度な設定→追加CSSクラスに例「row」と入力。
• CSSを追加。

以下に例を示します。

<table>
  <tbody>
    <tr>
      <td>住所</td>
      <td>京都府京丹後市</td>
    </tr>
    <tr>
      <td>連絡先</td>
      <td>000-00-0000</td>
    </tr>
  </tbody>
</table>

●CSS

通常、テーブルのセルは、display:table-cellとなり横並びになる。
これをblockに変え、縦並びにする。

.body .row td:first-child {
  width: 150px;
}

.body .row td {
  border: 0;
}

@media (width <=480px) {
  .body .row td:first-child {
    text-align: center;
    width: 100%;
  }
  .body .row td {
    display: block;
    width: 100%;
  }
}

mk2さん、chu-yaさん回答ありがとうございます。

mk2さん

「WordPress.org公式プラグインディレクトリ」に掲載されていれば安全
プラグインの安全性について、なるほどそういう見方ができるんですね。
今後、プラグインインストール時には、「WordPress.org公式プラグインディレクトリ」を
参考にさせていただきます。

「SNOW MONKEY」のフォーラムも拝見しました。
テーマは違えど同じ要望を出している人がいたんですね。
そして、「SNOW MONKEY」でも同じプラグインで対応してくださいとのこと
ご紹介いただいたプラグインの信頼感が高まりました。
今回はプラグインを使わずにいけそうなので使わない方法を試してみて、
だめなときはインストールしてみます。

ちなみにですが、
定義リストのプラグインはあるのは以前から知ってましたよ。
ただ、私が前回の回答で書いたようにプラグインのインストールに躊躇していたため、
使用はしていませんでした。
そのため、以前は私も「カスタムHTMLブロック」で対応していました。

chu-yaさん

なるほど！横並びのテーブルセルをCSSで縦並びにする方法はあったんですね。
目から鱗で大変勉強になりました。
これは今後使えそうです。
勉強不足でしたm(_ _)m

mk2さんから考えを整理するようにあったので、
いちおう自分のプランを話すと、
（上から順番でうまくいかないときは下におりていきます）
１、「横並びブロック」を使用する
２、「テーブルブロック」を縦並びにできるようにする
３、定義リストのプラグインを使用する

時間がある時、
自作のブロック作成も挑戦してみる

としています。

今回お二方から回答をいただいて大変勉強になりました。
重ね重ねありがとうございました。
またよろしくお願いします。

ちなみに、私が定義リストを使う際は、フォーマットというのかパターンが決まっています。（ある特定のカテゴリーの投稿に必ず使うような感じ）

そのため、Excelに入力して、マクロでHTMLを出力し、そのHTMLを貼り付けています。

定義リストだけでなく、他の複数のHTMLタグやショートコードとの組み合わせもあり、それらをまとめてマクロで出力しています。（スマホの縦長画面で、1.5画面分くらい。ブロックエディタでも扱えるように、ブロック制御用のコメントも出力させています）

今であれば、非同期型のパターンを使うのも有りかなとは思いますが、入力のことを考えると、Excelの方が楽で間違いもないもので。

エディタからの入力だけにこだわる必要はないのかと思います。

（テーブル等も、Excelを使うと楽な場合があります）

本件はこれでクローズです。

投稿者:: @enpekoubou

↑

１、「横並びブロック」を使用する
２、「テーブルブロック」を縦並びにできるようにする
３、定義リストのプラグインを使用する

1なら、カラムブロックです。

3で、プラグイン「Simple Definition List Blocks」を用い、dl、dl、dtで入力してみました。
そもそもdl、dl、dtは縦並びです。（HTML基礎の話です。）
参考ページですが、横並びにする為に、CSSを追記しています。

●Gutenbergエディター

.row {
  display: flex;
}

.row dt {
  width: 150px;
}

.row dd {
  margin: 0;
}

@media (width<=480px) {
  .row {
    flex-direction: column;
    align-items: center;
  }

  .row dt {
    width: fit-content;
  }
}

●ご参考

「カラム」ブロックを使えば、CSS記述なしで、モバイル表示（画面幅＜782pxで縦並び）に切り替わります。

ｍｋ２さん、chu-yaさんまたまた回答ありがとうございます。

ｍｋ２さん

なるほど、エクセルのそんな盲点的な使用方法があったんですね。
プライベートではAppleを使用しているため、AppleのNumbersにはその機能はないようなのですが、
職場はWindowsなので、また機会があったら使用してみたいです。

「他の複数のHTMLタグやショートコードとの組み合わせもあり、それらをまとめてマクロで出力しています。」これ以降の内容は私の知識ではついていけませんでした。
「同期、非同期、そういえば、JSでそういったものがあったなー」ぐらいです。

chu-yaさん

おっしゃるとおりですね、dl,dt,ddは縦並びでしたね。

わざわざ「Simple Definition List Blocks」をプラグインしてくれたんですか？
ありがとうございます。
CSSのコードまで書いていただいて、プラグイン使用の際には参考にします。

あと、たしかに「横並びブロック」より「カラムブロック」のほうがいいかなと思いました。

ところでchu-yaさんは、メイドインヘブンのスキンの制作者だったんですね！
サイトも拝見しました。
なぜかメインビジュアルが吉川晃司ｗ（ちがったらすいません、テレビ見ないのであいまい）久しぶりに見ましたがかっこいいですね！

お二方とも何度も回答をいただき重ね重ね大変ありがとうございました。
chu-yaさんから、クローズとの言葉があったので、
これでこの質問はクローズにさせていただこうと思います。
また、質問した際には回答いただけると大変うれしいです。
今後ともよろしくお願いします。