ここでは、デザイン崩れの少ないセレクターの選び方について記述いたします。

セレクターとは

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

詳しくは こちら をご覧ください。

GUI上で操作した時のセレクタ

エディターのコンテキストメニューから選択した場合、自動でコードが追加されます。
詳しくはこちら → UIエディターのJavaScriptコードについて

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

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

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

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

という意味になります。(eq:(0)の説明は こちら )

この場合、先程選択したセレクターの間に、「div」が一つでも入ると正常に当たらなくなります

オファーの中には、「ログインをすると要素が追加・削除」されたり、「お知らせのため要素が追加・削除」など、
動的に 要素が追加・削除 されるページがあります。
その場合、ログイン前と後、お知らせがある・ないなど二つのパターンでチェックするため崩れることが多いです。

id名やclass名をセレクターで使用する

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

元ページを確認すると、下記の部分が class「text-content」となっています。

なので、セレクタの部分を下記のように更新すると正常に当たっていることがわかります。

これだと、動的に要素の追加・削除が行われても影響することなくデザインが当たるようになります。