details-block の異なる見た目

開発
1

フィンランドのメディア企業が使用しているものと同様の外観を実現しようとしました。

スクリーンショットを見れば十分だと思います。

IMG_3465
IMG_34651306×887 166 KB

CSSを操作するスキルは基本的なものしかなく、それが（簡単に）CSSで実現できるかどうかわかりません。しかし、最初の試みは…まあ、あまりうまくいきませんでした。

これを使用しました（コメントは私用です）。

/*- details要素のカスタムスタイル - */
/* ボタンの背景画像と外観を変更 */
summary {
  background-color: #f5f5f5; /* 背景色 */
  border: 1px solid #d8d8d8; /* 境界線 */
  padding: 10px; /* パディング */
  border-radius: 5px; /* 角丸 */
  cursor: pointer; /* カーソルタイプ */
  display: flex; /* Flexboxの使用 */
  justify-content: space-between; /* 配置 */
  align-items: center; /* 中央揃え */
}
summary:hover {
  background-color: #eaeaea;
}
summary::marker {
  display: none; /* デフォルトのリストマーカーを削除 */
}
summary::after {
  content: '⮟'; /* 矢印を追加 */
  font-size: 20px; /* 矢印のサイズ */
}

/*- details要素の内容のカスタムスタイル - */
details[open] summary::after {
  content: '⮝'; /* 開いたときに矢印を上に変更 */
}
details {
  margin-bottom: 10px; /* ブロック間のマージン */
}
details > div {
  padding: 10px; /* コンテンツのパディング */
}

自分で作成したものと、GPTからの提案をいくつか含んでいます。

何かアイデアはありますか？

「いいね！」 2
2

@Jagsterさん、こんにちは :wave:

これのためのテーマコンポーネントを作成しました… :tada:

「いいね！」 9
3

素晴らしいですね👍 さて、何をしたのか調べてみます。

ありがとうございます！

「いいね！」 3
4

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.

6

まず、20年ほど前にVisual Basicで「Hello, World!」のようなものを一つやったことがあります。そして、試行錯誤でWordPressプラグインをいくつか調整し、かつてはルートから始めてVPSのすべての所有権を変更することに成功しました。

その素晴らしいソリューションは、もはや[details .. open]に従っていません。これに関連して、Details block doesn’t obey open を参照していると思います。

この部分が原因でしょうか？

cookedDetails.forEach((details) => {
            details.setAttribute("open", "");

なぜなら、これはDiscourseのものと似ているからです :joy:

expect(cooked_html).to match_html <<~HTML
      <details open="">
      <summary></summary>
        <p>bar</p>
      </details>
「いいね！」 1