パネル / デザインタブ

デザインタブでは、ブロックのデザインを設定できます。

デザインタブ概要

ブロックは公開時に、HTMLタグに変換されますが、デザインタブでは、そのタグのclass属性 , style属性を設定します。

ブロックの種類が違っても、デザインタブの内容はかわりませんが、一部のブロックは、デザインタブがないものもあります。

プリセットCSS

JS CMSでは、沢山のプリセットCSSが用意されています。

ブロックごとのプリセットと、汎用プリセット

プリセットには、ブロックごとのプリセットクラスと、すべてのブロックに適用できる、汎用プリセットクラスが用意されています。

プリセットCSSのカスタマイズ

登録されているプリセットは、完全にカスタマイズすることができます。
初期登録のプリセットをすべて削除して、サイトに応じたプリセットを定義できます。

プリセットCSSの仕組み

CMSでは、プリセットCSSファイル( /html/css/cms.css )のCSS定義を読み込んで、プリセットのリストを構築しています。
プリセットCSSファイルは、CMSからも、公開サイトのHTMLページからもロードされており、管理画面と公開ページで同じCSSデザインを適応できます。

プリセットCSSファイルの表示と編集

編集ボタンから、各プリセットの定義を確認できます。自動的に、ファイルマネージャでプリセットCSSを開き、該当箇所に移動します。
定義を修正し、保存すれば、すぐに画面に反映されます。

プリセットの定義

以下は、プリセットCSSの、見出しブロックのCSS定義のコードです。

/* [ h1.default , H1-デザイン標準 ] */
h1.default{ margin: 0 0 1em 0; font-size:36px;}

/* [ h1.line , H1-デザイン枠線 ] */
/* [ h1.line-b , H1-デザイン下線 ] */
/* [ h1.glay , H1-デザイン塗り-グレー ] */
/* [ h1.white , H1-デザイン塗り-白 ] */
/* [ h1.black , H1-デザイン塗り-黒 ] */
h1.line{padding:1em;border:1px solid #ddd; }
h1.line-b{padding:0.5em 0 1em 0;border-bottom:1px solid #ddd; }
h1.glay{padding:0.5em; background: #f7f7f7; }
h1.white{padding:0.5em; background: #fff; }
h1.black{padding:0.5em; background: #333;color: #fff;font-size:24px; }

/* [ h1.--- , ] */
/* [ h1.big , H1-文字大きく ] */
/* [ h1.small , H1-文字小さく] */
h1.big{font-size: 48px;}
h1.small{font-size: 28px;}

この中で、以下のフォーマットでコメントしている部分を、CMSではプリセット定義に追加します。
※実際のCSS定義はなくても、プリセット定義の記述があれば、プリセットに追加されます。

ファイルマネージャからプリセットCSSを編集した場合、保存時にすぐにプリセットリストに反映されます。

ひととおりのブロックのプリセットが定義されているので、見出しブロック以外の表記については、それぞれの定義を参考にしてください。

プリセットの用途アイデア

プリセットのカスタマイズを行えば、サイト制作者がサイト構築時にプリセットを定義しておいて、運営者がプリセットを利用して、表現力のたかいデザインのサイトを運営できます。

もちろん、すべてのブロックをカスタマイズする必要はありませんが、見出しや文書ブロックなど、使用頻度の高いブロックなどは、カスタマイズしてみてはいかがでしょう。

必要ない定義を削除する場合は、単純に、プリセットの定義を削除してください。

プリセットCSSのファイル変更

CSM設定ファイルで、プリセットCSSパスを設定できます。

プリセットCSSは必須ではありません

プリセットCSSは、あくまで補助機能なので、プリセットCSSファイルを削除しても問題ありません。

プリセットCSSへの新規クラスの追加

直接CSSを記述して新規プリセットを追加することもできますが、JS CMSでは、支援機能として、デザインライブラリウィンドウで、ブロックのデザインのカスタマイズが行えます。
カスタマイズをおこなったブロックのデザインは、CSSコードを取得できます。
※このウィンドウはCMSとは連動はしていません。単独で動作しています。