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;
}
ご参考まで。
(キュー小坂)
三角が表示できました!
ありがとうございます。
いつもShopifyをご利用いただき、ありがとうございます。 Shopifyは、皆様の日本語での利用体験の向上に努めております。さらなる改善のために皆様のご意見をお寄せい...
By JasonH May 9, 2025Shopify アカデミーの学習パスと認定スキルバッジExpanding Your Shopify Business Internationallyを活用して、国際的にビジネ...
By Shopify Feb 7, 2025Shopify アカデミーの学習パスB2B on Shopify:立ち上げとカスタマイズで卸売販売に進出しましょう。これら3つの無料コースは、ShopifyストアでB2B機能...
By Shopify Jan 31, 2025