概要

ここでは、デザイン崩れのリスクを最小限にするセレクタの選び方について記載します。
思わぬ表示崩れを避けるためにも、jQueryの要素指定方法を理解し、コンテクストメニューに100%頼り切らないデザイン案作成が必要となってきます。

セレクタとは

jQueryにて、「どの部分を操作したいのか」を記述する部分です。

セレクタの指定方法など、詳しくは こちら をご覧ください。(jQuery公式、外部サイトです。Kaizenで利用可能なjQueryのバージョンとは異なるバージョンの説明がされている場合があります。ご注意ください。)

コンテクストメニューで操作した時のセレクタ

エディターのコンテクストメニューから要素を操作した場合、自動でコードが追加されます。
詳しくは コンテクストメニューを使ったデザイン作成時に自動生成されるJavaScriptコードについて をご確認ください。

自動で生成された際のセレクタはどのようになるのか下記に示します。

例: 背景色を黒に、文字色を白に変更した場合

上記のようにセレクタが長くなります。これは、

class「site_main」要素の中の、2番目のdivの要素の中の、1番目のdivの要素の中の、1番目のdiv

という意味になります。(eq:(0)の説明は コンテクストメニューを使ったデザイン作成時に自動生成されるJavaScriptコードについて JavaScriptタブ内に自動生成される「:Eq(0)」の意味 をご参照ください)

そしてこの場合、先程選択したセレクタの間に、「div」が一つでも入ると、変更が正常に反映されなくなります。

ページの中には、「ログインをすると要素が追加・削除」されたり、「お知らせのため要素が追加・削除」など、動的に 要素が追加・削除される場合があります。
その場合、ログイン前と後、お知らせがある・ないなど二つのパターンでデザイン案を利用すると、崩れてしまうことが多いです。

解決法

指定するセレクターを詳細にすることで、要素が追加・削除されてもデザイン崩れを防ぐことができます。

先程の文章の箇所には、「text-content」というclass名がついているので、

セレクタの部分を下記のように更新すると、該当部分の前に要素が入ったりしても、正常に変更が反映されるようになります。