【SWELLコピペ用】よくあるご質問ページで使うタブ切り替え機能付きのFAQ

<!-- wp:loos/tab {"tabId":"35bfbea8","tabWidthPC":"flex-50","tabWidthSP":"flex-50","tabHeaders":["タブ1","タブ2","タブ3"],"className":"is-style-balloon"} -->
<div class="swell-block-tab is-style-balloon" data-width-pc="flex-50" data-width-sp="flex-50"><ul class="c-tabList" role="tablist"><li class="c-tabList__item" role="presentation"><button role="tab" class="c-tabList__button" aria-selected="true" aria-controls="tab-35bfbea8-0" data-onclick="tabControl">タブ1</button></li><li class="c-tabList__item" role="presentation"><button role="tab" class="c-tabList__button" aria-selected="false" aria-controls="tab-35bfbea8-1" data-onclick="tabControl">タブ2</button></li><li class="c-tabList__item" role="presentation"><button role="tab" class="c-tabList__button" aria-selected="false" aria-controls="tab-35bfbea8-2" data-onclick="tabControl">タブ3</button></li></ul><div class="c-tabBody"><!-- wp:loos/tab-body {"tabId":"35bfbea8"} -->
<div id="tab-35bfbea8-0" class="c-tabBody__item" aria-hidden="false"><!-- wp:loos/faq {"iconRadius":"circle","qIconStyle":"fill-custom","aIconStyle":"fill-custom","className":"is-style-faq-stripe"} -->
<dl class="swell-block-faq -icon-circle is-style-faq-stripe" data-q="fill-custom" data-a="fill-custom"><!-- wp:loos/faq-item -->
<div class="swell-block-faq__item"><dt class="faq_q">このサイトは宇宙人が作ったんですか？</dt><dd class="faq_a"><!-- wp:paragraph -->
<p>ええ、確かに宇宙人の技術が使われています。でもご安心を、彼らは友好的な宇宙人です。まだ地球にやってきてはいませんが、ウェブデザインのお手伝いをしてくれました！</p>
<!-- /wp:paragraph --></dd></div>
<!-- /wp:loos/faq-item -->

<!-- wp:loos/faq-item -->
<div class="swell-block-faq__item"><dt class="faq_q">ページの下にある小さな文字、読めないんですけど！</dt><dd class="faq_a"><!-- wp:paragraph -->
<p>それは秘密のメッセージですよ！もちろん、ウェブディレクターの中でしか理解できない特別な言語です。でも、気になるならモノクルとスパイ鏡を手に入れてチャレンジしてみてください！</p>
<!-- /wp:paragraph --></dd></div>
<!-- /wp:loos/faq-item -->

<!-- wp:loos/faq-item -->
<div class="swell-block-faq__item"><dt class="faq_q">サイトに流れ星を追加してほしいです！</dt><dd class="faq_a"><!-- wp:paragraph -->
<p>それは素晴らしいアイデアですね！でも、残念ながら私たちのウェブディレクターの力では現実にはできません。でも、夜空を見上げて流れ星を追いかけることは自由にできますよ！</p>
<!-- /wp:paragraph --></dd></div>
<!-- /wp:loos/faq-item -->

<!-- wp:loos/faq-item -->
<div class="swell-block-faq__item"><dt class="faq_q">サイトのデザインが壊れて見えるんですが、これって新しいファッションですか？</dt><dd class="faq_a"><!-- wp:paragraph -->
<p>それは新しいデザイントレンドというわけではなく、おそらくバグが発生している可能性があります。ファッションの観点からは、それはちょっと怪しいファッションですね！</p>
<!-- /wp:paragraph --></dd></div>
<!-- /wp:loos/faq-item --></dl>
<!-- /wp:loos/faq --></div>
<!-- /wp:loos/tab-body -->

<!-- wp:loos/tab-body {"id":1,"tabId":"35bfbea8"} -->
<div id="tab-35bfbea8-1" class="c-tabBody__item" aria-hidden="true"><!-- wp:loos/faq {"iconRadius":"circle","qIconStyle":"fill-custom","aIconStyle":"fill-custom","className":"is-style-faq-stripe"} -->
<dl class="swell-block-faq -icon-circle is-style-faq-stripe" data-q="fill-custom" data-a="fill-custom"><!-- wp:loos/faq-item -->
<div class="swell-block-faq__item"><dt class="faq_q">フッターに書いてある「シークレットコード」とは何ですか？</dt><dd class="faq_a"><!-- wp:paragraph -->
<p>ああ、それは秘密のアクセスコードです！正確には言えませんが、入力するとサイト内の隠しコンテンツやウェブディレクターの隠された秘密が見えるかもしれません。ぜひ試してみてください！</p>
<!-- /wp:paragraph --></dd></div>
<!-- /wp:loos/faq-item -->

<!-- wp:loos/faq-item -->
<div class="swell-block-faq__item"><dt class="faq_q">サイトの背景にネコの絵がちらほら見えるんですけど、これってネコの聖地なんですか？</dt><dd class="faq_a"><!-- wp:paragraph -->
<p>はい、正解です！当サイトはネコの聖地として知られています。おそらくウェブディレクターが愛してやまないペットたちの影響が反映されているのでしょう。ネコの聖地で楽しい時間をお過ごしください！</p>
<!-- /wp:paragraph --></dd></div>
<!-- /wp:loos/faq-item -->

<!-- wp:loos/faq-item -->
<div class="swell-block-faq__item"><dt class="faq_q">ページの背景音楽が鳴りっぱなしですが？</dt><dd class="faq_a"><!-- wp:paragraph -->
<p>おっと、申し訳ありません！実は私が音楽大好きで、ついつい自分のプレイリストをサイトに流し込んでしまいました。もし気になる場合は、音量ボタンをクリックしてBGMを調節してください！</p>
<!-- /wp:paragraph --></dd></div>
<!-- /wp:loos/faq-item -->

<!-- wp:loos/faq-item -->
<div class="swell-block-faq__item"><dt class="faq_q">サイトの中にドラゴンがいますか？？</dt><dd class="faq_a"><!-- wp:paragraph -->
<p>はい、ドラゴンがサイトの奥深くに住んでいます！でもご安心ください、彼は友好的なドラゴンで、サイトの安全を守ってくれています。もし見つけたら、ドラゴンに「こんにちは」と挨拶してみてください！</p>
<!-- /wp:paragraph --></dd></div>
<!-- /wp:loos/faq-item --></dl>
<!-- /wp:loos/faq --></div>
<!-- /wp:loos/tab-body -->

<!-- wp:loos/tab-body {"id":2,"tabId":"35bfbea8"} -->
<div id="tab-35bfbea8-2" class="c-tabBody__item" aria-hidden="true"><!-- wp:loos/faq {"iconRadius":"circle","qIconStyle":"fill-custom","aIconStyle":"fill-custom","className":"is-style-faq-stripe"} -->
<dl class="swell-block-faq -icon-circle is-style-faq-stripe" data-q="fill-custom" data-a="fill-custom"><!-- wp:loos/faq-item -->
<div class="swell-block-faq__item"><dt class="faq_q">サイトをスーパーヒーローにする方法はありますか？</dt><dd class="faq_a"><!-- wp:paragraph -->
<p>もちろん！当サイトをスーパーヒーローに変身させるには、スーパーパワーの開発が必要です。でも、ウェブディレクターのスーパーパワーはサイトのデザインや機能を改善することで発揮されます！</p>
<!-- /wp:paragraph --></dd></div>
<!-- /wp:loos/faq-item -->

<!-- wp:loos/faq-item -->
<div class="swell-block-faq__item"><dt class="faq_q">ユニコーンの秘密の魔法を教えてください！</dt><dd class="faq_a"><!-- wp:paragraph -->
<p>ユニコーンの秘密の魔法はとっても貴重ですが、残念ながら私たちはそれを共有する権限がありません！でも、サイト内でユニコーンを見つけると、ひょっとしたら魔法のような特別なサプライズが待っているかもしれません！</p>
<!-- /wp:paragraph --></dd></div>
<!-- /wp:loos/faq-item -->

<!-- wp:loos/faq-item -->
<div class="swell-block-faq__item"><dt class="faq_q">サイトでダンスが踊れますか？</dt><dd class="faq_a"><!-- wp:paragraph -->
<p>もちろん、サイト内で踊ることができます！音楽を感じて、足元が踊りたくなったら踊ってください！でも、デスクトップの画面の前で目撃されると、少しだけ恥ずかしいかもしれませんよ！</p>
<!-- /wp:paragraph --></dd></div>
<!-- /wp:loos/faq-item -->

<!-- wp:loos/faq-item -->
<div class="swell-block-faq__item"><dt class="faq_q">ページをスクロールすると星が舞い降りてきますね！</dt><dd class="faq_a"><!-- wp:paragraph -->
<p>そうなんです！星たちは宇宙からやってきて、私たちのサイトを美しく彩ってくれています。星のショーがあなたを楽しませることを願っています！</p>
<!-- /wp:paragraph --></dd></div>
<!-- /wp:loos/faq-item --></dl>
<!-- /wp:loos/faq --></div>
<!-- /wp:loos/tab-body --></div></div>
<!-- /wp:loos/tab -->