レイアウト管理

ページデザインの編集

coreblo-cms のページは「ベースエリア」「サブエリア」の2 層で構成されています。
ページデザインの設定ではベースエリアを含む「基本デザイン」「サブエリア」のスタイルシートを編集します。

ページ構成のイメージ

ページ構成のイメージ
　　 ベースエリア

　　 サブエリア

※「サイドエリア」内はレイアウトグリッド上では行になっていますが、実際にはサブエリアは存在しません。

1. 「基本デザイン」の設定
図内赤枠で記したベースエリアの設定や、ページの背景・リンク色・見出し文字のサイズなどの設定を行います。

2. 「サブエリア」の設定
図内青枠で記したサブエリアの設定を行います。
各行・セル単位での設定が可能です。

基本デザインの編集

デザイン管理→レイアウト管理→ユニット編集画面内の赤いボタン「基本デザイン」クリックします。
スタイルシート各ID 内のプロパティを必要に応じて編集してください。
【注意】基本デザインスタイルシート内のID 名は予めシステム内に組み込まれているため、
変更することが出来ません。

サブエリアの編集

デザイン管理→レイアウト管理→ユニット編集画面内の赤いボタン「サブエリア」クリックします。
ユニットが配置された行のプロパティを必要に応じて編集してください。
【注意】サブエリアスタイルシート内のクラス名は予めシステム内に組み込まれているため、
変更することが出来ません。

CSS編集画面

CSS編集画面
「基本デザイン」「サブエリア」をクリックすると新しいウィンドウでCSS編集画面が表示されます。

  • バックアップから復元
    最後に保存した状態に戻ることができます。
  • バックアップを削除
    最後に保存したバックアップファイルを削除します。
  • 初期状態に戻す
    サイト作成時の初期状態に戻すことができます。
「基本デザインの設定」や「サブエリアの設定」などスタイルシートの設定変更は、各入力画面内の「入力内容の保存」を押した段階でページに反映されますので、スタイルシートのみ編集した場合はユニット設定画面上の「設定内容の保存」をクリックする必要はありません。

基本デザイン・サブエリアからの画像へのパス

基本デザイン・サブエリアのCSS内に「background」プロパティ等で画像へのパスを記述する場合は以下のようになります。

画像へのパス　../../../../images/画像アップロードで格納したフォルダ名

【記述例】
#header {
background: url(../../../../images/header/header_bg.gif) top repeat-x;
}
list page　page top