Liquid、JavaScriptなどに関する質問
Dawn 14.0.0.0でdetailsとsummaryを使用したアコーディオンを作成しています。
ページエディタでは三角が表示されていますが、プレビューで見ると三角が消えてしまいます。
テスト環境はWindows 11とChromeです。
以下のようにCSSで表示する設定にしてもダメでした。
[HTML]
<details>
<summary class="summary-1">アコーディオン</summary>
</details>
[base.css]
.summary-1 {
display: list-item;
}
どのようにすれば三角を表示できるかわかりますでしょうか。
凝ったアコーディオンではなく、単純なデフォルト状態の三角が表示できればそれで十分です。
解決済! ベストソリューションを見る。
成功
Dawn 14.0.0のテーマですと、base.cssの629行目あたりにある下記コードの「list-style: none;」で三角を非表示にしています。
/* base-details-summary */
summary {
cursor: pointer;
list-style: none;
position: relative;
}
ただ、上記のsummaryのlist-style: none;を消してしまうと、テンプレートで使用している、
他のsummaryにも影響してしまいますので、下記の様にすると良いかと思われます。
detailsにclassを設定
<details class="accordion_box">
<summary class="summary-1">アコーディオン</summary>
</details>
base.cssに下記を追記
.accordion_box summary {
list-style: revert !important;
}
ご参考まで。
(キュー小坂)
成功
Dawn 14.0.0のテーマですと、base.cssの629行目あたりにある下記コードの「list-style: none;」で三角を非表示にしています。
/* base-details-summary */
summary {
cursor: pointer;
list-style: none;
position: relative;
}
ただ、上記のsummaryのlist-style: none;を消してしまうと、テンプレートで使用している、
他のsummaryにも影響してしまいますので、下記の様にすると良いかと思われます。
detailsにclassを設定
<details class="accordion_box">
<summary class="summary-1">アコーディオン</summary>
</details>
base.cssに下記を追記
.accordion_box summary {
list-style: revert !important;
}
ご参考まで。
(キュー小坂)
三角が表示できました!
ありがとうございます。
サポートの選択肢が増えていく中、最適となる選択の判断が難しくなっているかと存じます。今回は問題の解決に最適となるサポートの選択方法を、紹介させて頂きます。 選択肢のご紹介...
By Mirai Oct 6, 20242023年初頭、Shopifyペイメントアカウント、及びShopifyアカウント全体のセキュリティを強化する為の変更が適用されました。ユーザーのアカウントセキュリティを強化す...
By Mirai Sep 29, 2024概要: 年末/年明けは、消費者が最もショッピングを行う時期の一つです。特に、ブラックフライデー・サイバーマンデー(BFCM)は、世界中で注目される大規模なセールイベントであ...
By JapanGuru Sep 25, 2024