{"id":22052,"date":"2023-04-04T15:47:16","date_gmt":"2023-04-04T06:47:16","guid":{"rendered":"https:\/\/motoki-design.co.jp\/wordpress\/?p=22052"},"modified":"2025-02-07T11:53:15","modified_gmt":"2025-02-07T02:53:15","slug":"swell-faq-accordion","status":"publish","type":"post","link":"https:\/\/motoki-design.co.jp\/wordpress\/swell-faq-accordion\/","title":{"rendered":"SWELL\u2502FAQ\u30d6\u30ed\u30c3\u30af\u3092\u30a2\u30b3\u30fc\u30c7\u30a3\u30aa\u30f3\u306b\u3059\u308b\u30ab\u30b9\u30bf\u30de\u30a4\u30ba"},"content":{"rendered":"\n<p>SWELL\u306eFAQ\u30d6\u30ed\u30c3\u30af\u306fFAQ\u3092\u8a2d\u5b9a\u3067\u304d\u308b\u3060\u3051\u3067\u306a\u304f\u3001<\/p>\n\n\n\n<p>FAQ\u306e\u69cb\u9020\u5316\u30c7\u30fc\u30bf\u3082\u51fa\u529b\u3067\u304d\u308b\u306e\u3067\u3001\u304b\u306a\u308a\u5b9f\u7528\u7684\u306a\u30d6\u30ed\u30c3\u30af\u3067\u3059\u3002<\/p>\n\n\n\n<p>\u305f\u3060\u3057FAQ\u306f\u5197\u9577\u306b\u306a\u308a\u3059\u304e\u308b\u306e\u3067\u3001\u30a2\u30b3\u30fc\u30c7\u30a3\u30aa\u30f3\u306b\u3057\u3066\u958b\u9589\u306b\u3057\u305f\u3044\u3068\u3044\u3046\u65b9\u3082\u591a\u3044\u3068\u601d\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u672c\u8a18\u4e8b\u3067\u306f\u3001SWELL\u3067FAQ\u30d6\u30ed\u30c3\u30af\u3092\u30a2\u30b3\u30fc\u30c7\u30a3\u30aa\u30f3\u306b\u3059\u308b\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u7d39\u4ecb\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<p class=\"is-style-border_left\">\u30b5\u30f3\u30d7\u30eb<\/p>\n\n\n\n<p>\u30bf\u30c3\u30d7\u3059\u308b\u3068\u56de\u7b54\u304c\u78ba\u8a8d\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<dl class=\"swell-block-faq\" data-q=\"fill-main\" data-a=\"col-main\">\n<div class=\"swell-block-faq__item\"><dt class=\"faq_q\">\u8cea\u554f1<\/dt><dd class=\"faq_a\">\n<p>\u56de\u7b541<\/p>\n<\/dd><\/div>\n\n\n\n<div class=\"swell-block-faq__item\"><dt class=\"faq_q\">\u8cea\u554f2<\/dt><dd class=\"faq_a\">\n<p>\u56de\u7b542<br>\u56de\u7b542<br>\u56de\u7b542<br>\u56de\u7b542<br>\u56de\u7b542<br>\u56de\u7b542<\/p>\n<\/dd><\/div>\n<\/dl>\n<script type=\"application\/ld+json\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@id\":\"#FAQContents\",\"@type\":\"FAQPage\",\"mainEntity\":[{\"@type\":\"Question\",\"name\":\"\u8cea\u554f1\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"<p>\u56de\u7b541<\\\/p>\"}},{\"@type\":\"Question\",\"name\":\"\u8cea\u554f2\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"<p>\u56de\u7b542<br>\u56de\u7b542<br>\u56de\u7b542<br>\u56de\u7b542<br>\u56de\u7b542<br>\u56de\u7b542<\\\/p>\"}}]}<\/script>\n\n\n\n<h2 class=\"wp-block-heading\">SWELL\u3067FAQ\u30d6\u30ed\u30c3\u30af\u3092\u30a2\u30b3\u30fc\u30c7\u30a3\u30aa\u30f3\u306b\u3059\u308b\u30ab\u30b9\u30bf\u30de\u30a4\u30ba<\/h2>\n\n\n\n<p>SWELL\u3067FAQ\u30d6\u30ed\u30c3\u30af\u3092\u30a2\u30b3\u30fc\u30c7\u30a3\u30aa\u30f3\u306b\u3059\u308b\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u3059\u308b\u65b9\u6cd5\u306f\u7c21\u5358\u3067\u3059\u3002<\/p>\n\n\n\n<p>CSS\u3068JS\u3092\u633f\u5165\u3057\u3066\u4e0a\u66f8\u304d\u3059\u308b\u3060\u3051\u3067\u3059\u3002<\/p>\n\n\n\n<p>\u4ee5\u4e0b\u3001\u8a73\u3057\u304f\u8aac\u660e\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">CSS\u306e\u8a2d\u5b9a<\/h3>\n\n\n\n<p>CSS\u3092\u633f\u5165\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u5916\u89b3 \uff1e \u30c6\u30fc\u30de\u30a8\u30c7\u30a3\u30bf \uff1e style.css \u304b\u3089\u4e0b\u8a18\u306e\u30b3\u30fc\u30c9\u3092\u633f\u5165\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u203b\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u306e\u8ffd\u52a0CSS\u3067\u3082OK\u3067\u3059\u3002<\/p>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-css\" data-file=\"style.css\" data-lang=\"CSS\"><code>.faq_q {\n    background-color: var(--color_main);\n    color: #fff;\n}\n.faq_a {\n    max-height: 0;\n    overflow: hidden;\n    transition: max-height 0s;\n    padding: 0!important;\n}\n.faq_a.open {\n    max-height: fit-content;\n    padding: 1em 1em 1em 3em!important;\n    border: solid 1px var(--color_main);\n}\n.swell-block-faq .faq_q:before,\n.swell-block-faq .faq_a:before {\n    box-shadow: none;\n    left: 1px;\n}\n.swell-block-faq .swell-block-faq__item+.swell-block-faq__item {\n    position: relative;\n}\n.swell-block-faq__item .faq_q:after {\n    content: &quot;\\e910&quot;;\n    font-family: icomoon!important;\n    color: #fff;\n    font-weight: bold;\n    position: absolute;\n    right: 30px;\n    top: 50%;\n    transform: translateY(-50%);\n    font-size: 1.4em;\n}\n.swell-block-faq__item.open .faq_q:after {\n    content: &quot;\\e912&quot;;\n}<\/code><\/pre><\/div>\n\n\n\n<h4 class=\"wp-block-heading\">\u30a2\u30a4\u30b3\u30f3\u3092\u30d7\u30e9\u30b9\u30de\u30a4\u30ca\u30b9\u306b\u5909\u66f4\u3059\u308b<\/h4>\n\n\n\n<p>\u540c\u69d8\u306bSWELL\u30a2\u30a4\u30b3\u30f3\u3092\u5229\u7528\u3057\u3066\u5909\u66f4\u3057\u307e\u3057\u3087\u3046\u3002<\/p>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-css\" data-lang=\"CSS\"><code>.swell-block-faq__item .faq_q:after {\n    content: &quot;\\e91c&quot;;\n}\n.swell-block-faq__item.open .faq_q:after {\n    content: &quot;\\e919&quot;;\n}<\/code><\/pre><\/div>\n\n\n<div class=\"swell-block-postLink\">\t\t\t<div class=\"p-blogCard -internal\" data-type=\"type1\" data-onclick=\"clickLink\">\n\t\t\t\t<div class=\"p-blogCard__inner\">\n\t\t\t\t\t<span class=\"p-blogCard__caption\">\u3042\u308f\u305b\u3066\u8aad\u307f\u305f\u3044<\/span>\n\t\t\t\t\t<div class=\"p-blogCard__thumb c-postThumb\"><figure class=\"c-postThumb__figure\"><img decoding=\"async\" src=\"https:\/\/motoki-design.co.jp\/wordpress\/wp-content\/uploads\/swell-icon-382x215.jpg\" alt=\"\" class=\"c-postThumb__img u-obf-cover\" width=\"320\" height=\"180\"><\/figure><\/div>\t\t\t\t\t<div class=\"p-blogCard__body\">\n\t\t\t\t\t\t<a class=\"p-blogCard__title\" href=\"https:\/\/motoki-design.co.jp\/wordpress\/swell-icon\/\">SWELL\u2502\u6700\u65b0\u7248\uff01CSS\u3067\u3082\u4f7f\u3048\u308bSWELL\u30a2\u30a4\u30b3\u30f3\u4e00\u89a7 \u516863\u500b\u307e\u3068\u3081<\/a>\n\t\t\t\t\t\t<span class=\"p-blogCard__excerpt\">SWELL\u306fWeb\u30a2\u30a4\u30b3\u30f3\u306eFont Awesome\u3092\u4f7f\u3063\u3066\u3044\u307e\u305b\u3093\u3002 \u9ad8\u901f\u5316\u3092\u8003\u3048\u3066\u3001\u72ec\u81ea\u306b\u62bd\u51fa\u3057\u305f\u30a2\u30a4\u30b3\u30f3\uff08IcoMoon\uff09\u3092\u4f7f\u7528\u3057\u3066\u3044\u307e\u3059\u3002 \u30b7\u30e7\u30fc\u30c8\u30b3\u30fc\u30c9\u3067\u4f7f\u7528\u3067\u304d\u308b CSS\u3067\u3082\u4f7f\u7528&#8230;<\/span>\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t<\/div>\n\n\n<h3 class=\"wp-block-heading\">functions.php\u306e\u8a2d\u5b9a<\/h3>\n\n\n\n<p>\u6b21\u306bJavascript\u3092\u8a2d\u5b9a\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u5916\u89b3 \uff1e \u30c6\u30fc\u30de\u30a8\u30c7\u30a3\u30bf \uff1e functions.php \u304b\u3089\u4e0b\u8a18\u306e\u30b3\u30fc\u30c9\u3092\u633f\u5165\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u203b\u30a8\u30e9\u30fc\u304c\u6016\u3044\u4eba\u306fCode Snippet\u306e\u30d7\u30e9\u30b0\u30a4\u30f3\u306b\u5165\u529b\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-php\" data-file=\"functions.php\" data-lang=\"PHP\"><code>function motoki_faq_accordion() {\necho &lt;&lt;&lt; EOM\n&lt;script&gt;\n\tconst faqItems = document.querySelectorAll(&#39;.swell-block-faq__item&#39;);\n\tfor (const faqItem of faqItems) {\n\t  const faqQuestion = faqItem.querySelector(&#39;.faq_q&#39;);\n\t  const faqAnswer = faqItem.querySelector(&#39;.faq_a&#39;);\n\t  if (faqItem.classList.contains(&#39;open&#39;)) {\n\t    faqAnswer.classList.add(&#39;open&#39;);\n\t  }\n\t  faqQuestion.addEventListener(&#39;click&#39;, () =&gt; {\n\t\tfaqAnswer.classList.toggle(&#39;open&#39;);\n\t\tfaqItem.classList.toggle(&#39;open&#39;);\n\t  });\n\t}\n&lt;\/script&gt;\nEOM;\n}\nadd_action( &#39;wp_footer&#39;, &#39;motoki_faq_accordion&#39; );<\/code><\/pre><\/div>\n\n\n\n<p>\u3061\u306a\u307f\u306bQ\u8981\u7d20\u306bopen\u3068\u3044\u3046\u30af\u30e9\u30b9\u3092\u8ffd\u52a0\u3059\u308b\u3068\u6700\u521d\u304b\u3089\u958b\u3044\u305f\u72b6\u614b\u3067\u8868\u793a\u3055\u308c\u307e\u3059\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"812\" height=\"243\" src=\"https:\/\/motoki-design.co.jp\/wordpress\/wp-content\/uploads\/2023-04-22_14h11_32-812x243.png\" alt=\"\" class=\"wp-image-22443\" srcset=\"https:\/\/motoki-design.co.jp\/wordpress\/wp-content\/uploads\/2023-04-22_14h11_32-812x243.png 812w, https:\/\/motoki-design.co.jp\/wordpress\/wp-content\/uploads\/2023-04-22_14h11_32-382x114.png 382w, https:\/\/motoki-design.co.jp\/wordpress\/wp-content\/uploads\/2023-04-22_14h11_32-768x230.png 768w, https:\/\/motoki-design.co.jp\/wordpress\/wp-content\/uploads\/2023-04-22_14h11_32.png 924w\" sizes=\"(max-width: 812px) 100vw, 812px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">FAQ\u30d6\u30ed\u30c3\u30af\u306e\u78ba\u8a8d<\/h3>\n\n\n\n<p>\u6700\u5f8c\u306b\u78ba\u8a8d\u3057\u307e\u3057\u3087\u3046\u3002<\/p>\n\n\n\n<p>\u30bf\u30c3\u30d7\u3059\u308b\u3068\u56de\u7b54\u304c\u78ba\u8a8d\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<dl class=\"swell-block-faq\" data-q=\"fill-main\" data-a=\"col-main\">\n<div class=\"swell-block-faq__item\"><dt class=\"faq_q\">\u8cea\u554f1<\/dt><dd class=\"faq_a\">\n<p>\u56de\u7b541<\/p>\n<\/dd><\/div>\n\n\n\n<div class=\"swell-block-faq__item\"><dt class=\"faq_q\">\u8cea\u554f2<\/dt><dd class=\"faq_a\">\n<p>\u56de\u7b542<br>\u56de\u7b542<br>\u56de\u7b542<br>\u56de\u7b542<br>\u56de\u7b542<br>\u56de\u7b542<\/p>\n<\/dd><\/div>\n<\/dl>\n<script type=\"application\/ld+json\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@id\":\"#FAQContents\",\"@type\":\"FAQPage\",\"mainEntity\":[{\"@type\":\"Question\",\"name\":\"\u8cea\u554f1\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"<p>\u56de\u7b541<\\\/p>\"}},{\"@type\":\"Question\",\"name\":\"\u8cea\u554f2\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"<p>\u56de\u7b542<br>\u56de\u7b542<br>\u56de\u7b542<br>\u56de\u7b542<br>\u56de\u7b542<br>\u56de\u7b542<\\\/p>\"}}]}<\/script>\n\n\n\n<h3 class=\"wp-block-heading\">\u7de8\u96c6\u753b\u9762\u306b\u30a2\u30f3\u30b5\u30fc\u304c\u898b\u3048\u306a\u3044\u5834\u5408<\/h3>\n\n\n\n<p>\u4e0b\u8a18\u306eCSS\u306f\u30a8\u30c7\u30a3\u30bf\u3067\u306f\u8868\u793a\u3057\u306a\u3044\u3088\u3046\u306b\u3057\u307e\u3057\u3087\u3046\u3002<\/p>\n\n\n\n<p>\u30d5\u30ed\u30f3\u30c8\u306e\u307f\u306b\u3059\u308b<\/p>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-css\" data-lang=\"CSS\"><code>.faq_a {\n    max-height: 0;\n    overflow: hidden;\n    transition: max-height 0s;\n    padding: 0!important;\n}<\/code><\/pre><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">\u307e\u3068\u3081<\/h2>\n\n\n\n<p>SWELL\u516c\u5f0f\u3068\u3057\u3066\u306fFAQ\u306f\u30a2\u30b3\u30fc\u30c7\u30a3\u30aa\u30f3\u5316\u3057\u306a\u3044\u305d\u3046\u306a\u96f0\u56f2\u6c17\u3067\u3057\u305f\u306e\u3067\u3001\u4e0a\u66f8\u304d\u3057\u3066\u958b\u9589\u3067\u304d\u308b\u3088\u3046\u306b\u3057\u3066\u307f\u307e\u3057\u305f\u3002<\/p>\n\n\n\n<p>\u3082\u3057\u6c17\u306b\u306a\u3063\u305f\u65b9\u306f\u662f\u975e\u53c2\u8003\u306b\u3057\u3066\u307f\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"<p>SWELL\u306eFAQ\u30d6\u30ed\u30c3\u30af\u306fFAQ\u3092\u8a2d\u5b9a\u3067\u304d\u308b\u3060\u3051\u3067\u306a\u304f\u3001 FAQ\u306e\u69cb\u9020\u5316\u30c7\u30fc\u30bf\u3082\u51fa\u529b\u3067\u304d\u308b\u306e\u3067\u3001\u304b\u306a\u308a\u5b9f\u7528\u7684\u306a\u30d6\u30ed\u30c3\u30af\u3067\u3059\u3002 \u305f\u3060\u3057FAQ\u306f\u5197\u9577\u306b\u306a\u308a\u3059\u304e\u308b\u306e\u3067\u3001\u30a2\u30b3\u30fc\u30c7\u30a3\u30aa\u30f3\u306b\u3057\u3066\u958b\u9589\u306b\u3057\u305f\u3044\u3068\u3044\u3046\u65b9\u3082\u591a\u3044\u3068\u601d\u3044\u307e\u3059 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":22076,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"pochipp_cv_data":"","swell_btn_cv_data":"","footnotes":""},"categories":[110],"tags":[],"area":[],"class_list":["post-22052","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-swell-customize"],"_links":{"self":[{"href":"https:\/\/motoki-design.co.jp\/wordpress\/wp-json\/wp\/v2\/posts\/22052","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/motoki-design.co.jp\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/motoki-design.co.jp\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/motoki-design.co.jp\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/motoki-design.co.jp\/wordpress\/wp-json\/wp\/v2\/comments?post=22052"}],"version-history":[{"count":3,"href":"https:\/\/motoki-design.co.jp\/wordpress\/wp-json\/wp\/v2\/posts\/22052\/revisions"}],"predecessor-version":[{"id":26737,"href":"https:\/\/motoki-design.co.jp\/wordpress\/wp-json\/wp\/v2\/posts\/22052\/revisions\/26737"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/motoki-design.co.jp\/wordpress\/wp-json\/wp\/v2\/media\/22076"}],"wp:attachment":[{"href":"https:\/\/motoki-design.co.jp\/wordpress\/wp-json\/wp\/v2\/media?parent=22052"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/motoki-design.co.jp\/wordpress\/wp-json\/wp\/v2\/categories?post=22052"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/motoki-design.co.jp\/wordpress\/wp-json\/wp\/v2\/tags?post=22052"},{"taxonomy":"area","embeddable":true,"href":"https:\/\/motoki-design.co.jp\/wordpress\/wp-json\/wp\/v2\/area?post=22052"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}