Dressの項目解説

Dressは、デザイン編集を行う場合にスタイルの追加をすることができる機能です。
こちらでは詳細設定の項目より「高度な設定」をオフにした状態で、設定が可能な各スタイルを解説いたします。

スタイルの追加については、「+」マークをクリックするとスタイル一覧が表示されます。


「高度な設定」をオンにした状態の項目はこちらをご確認ください

文字スタイル

［A］の文字スタイルは、以下の設定ができます。
【文字色】
文字の色が調整できます。
【文字サイズ】
文字のサイズが調整できます。
【フォント】
文字にWebフォントが設定できます。
【装飾】
・文字の太さ
文字の太さが調整できます。
・斜体
文字を斜体に調整できます。
・ライン
文字に取り消し線、下線等が設定できます。
・縁取り
テキスト文字の輪郭線の幅と色を指定できます。
・シャドウ
テキストに影を追加できます。

【文字間隔】letter-spacing
文字と文字の間隔を数値で指定できます。
【行の高さ】line-height
文字サイズを基準に行の高さを指定できます。

段落スタイル

［B］の段落スタイルは、以下の設定ができます。
■横方向の配置 text-align
左揃え、中央揃え、右揃えが調整できます。

■インデント text-indent
段落の最初の行の先頭をインデントします。どのくらいインデントするかを共通設定、モバイル専用の設定ができます。

ボックススタイル

［C］のボックススタイルは、以下の設定ができます。
【背景】 border

■背景色
背景の色を設定できます。
■背景イメージ　background-image
画像の設定や、色のグラデーション設定ができます。
・画像ファイルを指定
・「グラデーションを指定」
・高度な設定（自由入力）
※background-imageプロパティに表示する値を入力することができます。
・背景イメージを表示させない

オプション
■背景の繰り返し
・タイル状に繰り返す repeat
・横方向に繰り返す repeat-x
・縦方向に繰り返す repeat-y
・繰り返さない no-repeat-y
■サイズ
・実寸で表示 auto
・背景領域に収まるサイズで表示 contain
・背景領域を覆うサイズで表示 cover
・背景領域にいっぱいに引き伸ばして表示 100%
■位置
背景画像の初期位置を、上下左右で設定できます。
※ブレンドモード　background-blend-modeの設定ができます。
■固定
固定表示の設定ができます。

【枠線】 border
共通設定、モバイル専用の設定にて、各辺ごとに線の太さや色の設定ができます。

【角丸】 border-radius
共通設定、モバイル専用の設定にて要素の境界の外側の角を丸くする設定ができます。
画像を丸く設定する等の設定ができます。

【シャドウ】 box-shadow
共通設定、モバイル専用に、ボックスに1つまたは複数の影を設定できます。

【余白】
共通設定、モバイル専用に外余白と内余白の設定ができます。
外余白は、要素とその周囲の要素との間の「スペース」を指定し、内余白は要素の「コンテンツと枠の間のスペース」を指定します。

【幅】
共通設定、モバイル専用に、指定したコンテンツで表示する幅を数値で指定します。自動を選択すると表示されるエリアまたは内容に合わせた幅になります。
幅の上限を指定した場合、その数値以上には広がらなくなります。

【高さ】
共通設定、モバイル専用に表示する高さを数値で指定します。自動を選択すると表示されるエリアまたは内容に合わせた幅になります。
高さの上限を指定した場合、その数値以上には広がらなくなります。

表示

［D］の表示は、以下の設定ができます。
■不透明度 opacity
共通設定、モバイル専用に不透明度の設定ができます。
1が不透明です。数値が小さくなるほど半透明になり、0で完全に透明になります。例えば「0.8」の場合は不透明度が80%になります。