サイト管理_ユーザーCSS編集

サイト管理 ＞ ユーザーCSS編集

1.CSSを使って編集したい

デザインを自由に編集されたい場合、ユーザーCSSを使用することができます。

共通、スマートフォン、タブレット、ＰＣ別に記述エリアを用意しております。

【共通エリア】は全デバイス共通、【スマホ・タブレット・ＰＣ】はそれぞれのデバイスごとに適用させるCSSを記述します。

共通設定 > 基本設定で設定したブレイクポイントが、適用されます。

auの一部の機種では4KB以内までしか読み込まれないものがあります。docomoの古い機種ではCSSが読み込まれません。

【保存】を押下して設定完了です。

図.ユーザーCSS設定画面

1.1.便利機能

CSS入力欄では「Crtl+F」のショートカットキーにて検索メニューの表示が可能です。また検索メニュー左の矢印ボタンにて置換メニューの利用も可能です。他にも右クリックメニューから様々な機能がご利用いただけます。

例えば、選択範囲のCSSの整形を行う際には「Format Selection」の機能がご利用いただけます。

図.ユーザーCSS設定画面

図.右クリックメニュー_選択範囲の整形の例

1.2.差分を見る

「差分を見る」ボタンを押下することで差分確認モーダルウィンドウが展開します。保存済みの情報と、画面で変更した箇所の差異を比較しハイライト表示します。

図.差分を見る

2.ログイン時のみに特定のCSSを適用させる方法

2.1.管理画面で変更できない文言を調整する

CSSを調整して、お客様が会員ログインした際にページのレイアウトを変更する設定の紹介です。

1.「ユーザーCSS編集」を選択する。

管理画面上部の「サイト管理」を開き、左メニューから「ユーザーCSS編集」を選択します。

2.コードを追記します。

セレクタに[data-member-login=”true”]を付与します。

例えば、顧客がログインしている時のみ「#sysAll」の背景色（background-color）を黒（#000）にしたい場合は以下の様なコードになります。

表.ログインしている時のみ背景色を黒にする記入例

3.注意事項

・ユーザーCSS編集への入力・保存については必ず、バックアップをご用意した上でお客様にて実施していただきますようお願いいたします。

・また、CSSの編集については弊社による動作保証をいたしかねます。

編集後の動作の確認・検証につきましてもお客様にて行っていただきますよう、よろしくお願いします。