新規ページテスト

デフォルトの固定ページで作成したページです。

ここはクラス「margin_10」「padding_10」「bg-color_White」「font-color_Black」で作成したブロック（段落です。）

ここはクラス「margin_20」「padding_20」「bg-color_Black」「font-color_White」で作成したブロックです。

ここは「margin_20」「padding_10」「bg-color_White」「font-color_Black」「border-radius_10」「font-weight_500」「bg_shadow」で作成したブロックです。

このように「ブロック」→「高度な設定」→「追加CSSクラス」に汎用CSSを利用することでページの装飾が容易となります。

サンプルタイトル

また↑の様に、汎用CSSを利用して見出しを作成・装飾する事もできます。
※使用CSSクラス
「margin_20 padding_5 bg-color_VBlue font-color_Black font-weight_900 border-Radius_10 text-align_center」

文字色のリセットについて

一部ページではCSSの優先度の問題で「font-color_定義済みカラー名」が効かない場合があります。

その場合は「font-color_Reset」を記述し、その次に「font-color_定義済みカラー名」を記述してみて下さい。

利用できる汎用CSS一覧

/* 汎用CSS */

/* フォントウェイト　数値が大きいほど太くなる */
.font-weight_100 {font-weight: 100;}
.font-weight_300 {font-weight: 300;}
.font-weight_500 {font-weight: 500;}
.font-weight_600 {font-weight: 600;}
.font-weight_900 {font-weight: 900;}

/* 汎用フォントカラー */
.font-color_White   {color: #fff;}
.font-color_Black   {color: #000;}
.font-color_Red     {color: #f00;}
.font-color_Green   {color: #0f0;}
.font-color_Blue    {color: #00f;}
.font-color_Magenta {color: #f0f;}
.font-color_Yellow  {color: #ff0;}
.font-color_Aqua    {color: #0ff;}

/* k-broad向けフォントカラー */
.font-color_Gray    {color: #333;}
.font-color_Ash     {color: #999;}
.font-color_VBlue   {color: #00acff;}
.font-color_DBlue   {color: #0066ff;}

/* フォントカラーリセット */
.font-color_Reset * {color: inherit;}

/* テキストレイアウト　div・pなどブロック要素で利用します */
.text-align_right   {text-align: right;}
.text-align_center  {text-align: center;}
.text-align_left    {text-align: left;}

/* ほぼk-broad向け背景色 */
.bg-color_White {background-color: #fff;}
.bg-color_Black {background-color: #000;}
.bg-color_Gray  {background-color: #333;}
.bg-color_Ash   {background-color: #999;}
.bg-color_VBlue {background-color: #00acff;}
.bg-color_DBlue {background-color: #0066ff;}

/* ブロック要素のドロップシャドウ */
.bg_shadow {box-shadow: 5px 5px 15px rgba(0,0,0,0.5);}

/* 要素の角丸 */
.border-Radius_3  {border-radius: 3px;}
.border-Radius_5  {border-radius: 5px;}
.border-Radius_10 {border-radius: 10px;}
.border-Radius_15 {border-radius: 15px;}
.border-Radius_20 {border-radius: 20px;}

/* 上下のマージン（余白） */
.margin_5   {margin: 5px auto;}
.margin_10  {margin: 10px auto;}
.margin_15  {margin: 15px auto;}
.margin_20  {margin: 20px auto;}
.margin_30  {margin: 30px auto;}

/* ４隅のマージン （要素内の余白） */
.padding_5  {padding: 5px;}
.padding_10 {padding: 10px;}
.padding_15 {padding: 15px;}
.padding_20 {padding: 20px;}
.padding_30 {padding: 30px;}

/* リンク装飾 */
.ancher-deco_Underline       {text-decoration: none;}
.ancher-deco_Underline:hover {text-decoration: underline;}