【裏技】STUDIOのCSSで同じIDを指定する方法

こんにちは。
ECの分かるWebデザイナー、Yukiです。

私についてはこちらをご覧ください。

さて、今日はタイトルにもあるようにSTUDIOのCSSで別のパーツを同じIDを設定する方法をお伝えします。

前置き

STUDIOはノーコードでWeb制作をするプラットフォームなのでそもそもCSSをいじる人は稀なので、どこに需要があるか分かりませんが私自身がデザインしている時に遭遇した問題なので下記に記しておきます。

STUDIOでCSSをいじるにはiframeを設定する必要があるので、中級くらいの内容になります。

同じIDを設定する方法

例えば、上記画像のようにBox AとBox Bがあったとします。

そして、左のBox Aには既に「box」というIDを指定してあります。

この状態で今度は右のBox Bに同じIDを指定しようとすると、「すでに使われています」と怒られてしまいます。このIDを別のものに指定してもいいのですが、そうするとiframe内に書いた時にイチイチIDを追加指定しないと駄目で、文字数も無駄で面倒です。

そんな時は、このBox Aをコピペで複製します。

中央が複製されたボックス

そうするとこのような状態になります。

中央のボックスをCとする

中央に複製されたBox、これをBox Cとします。

このボックスCのIDを確認していみるとしっかり複製元のID「Box」が保持されており、Box Aと Box Cで同じIDが指定されています。

これにより異なるパーツでも同じIDを使うことができました。

まとめ

このようにSTUDIOではパーツを複製し使いまわすことで、同じIDを指定することができます。

同じIDが指定されているので、もちろんCSSもしっかりと反映されます。
※ただし、CSS等の変更はライブプレビューの画面にしか反映されないのでそちらを見て作業する必要があります。

iframeには30,000文字の制限があり、IDをカンマ区切りで指摘しまくるのは文字数を圧迫していまいます。このようにうまく使いまわすことで効率的に構築しましょう。

今回の記事はこれで以上になります。

---

もし、この記事が約に立ったと思っていただけたら「いいね！」とフォローをお願いします☆

今後もEC運営やWebデザインについての情報を発信してきます！
それでは、次の記事でお会いしましょう。