• 文字サイズ
  • 文字サイズ[小]
  • 文字サイズ[中]
  • 文字サイズ[大]

ページデザインの編集

基本デザインの編集

ベースエリアを含む「基本デザイン」のスタイルシートを編集します。

基本デザインとは

赤枠及びピンク色の領域のデザインを編集します。

基本デザインでは「ページ背景色」「文字色・サイズ」「リンク色」「見出し文字サイズ」などの共通設定や、ページレイアウトの基礎部分を構成する「ベースエリア」を編集することが出来ます。

基本デザインのCSSは「TOP」「NEWS」「CONTENTS」など各レイアウトごとに専用のCSSが存在します。

基本デザインを編集するには、ユニット編集画面内の赤いボタン「基本デザイン」クリックします。

「基本デザイン・スタイルシート」の構成

1. 全体共通指定
(1)全体基本指定[ body ]
ページの土台となる部分です。ここに記述されたプロパティ(設定項目)は各エリア内で上書きの指定がされない限りページ全体に適用されます。
出荷時には「ブラウザウィンドウ枠からの余白」「文字サイズ」「文字色」「行間」「背景色」などが指定されています。
(2)基本リンク色指定
[a:link]テキストリンク(通常時)の表示色
[a:visited]テキストリンク(訪問済み時)の表示色
[a:hover]テキストリンク(オンマウス時)の表示色
[a:active]テキストリンク(アクティブ時)の表示色
(3)見出し基本指定[ h1 ]~[ h5 ]
<h1> ~ <h5> までの見出しタグの基本指定です。
(4)画像基本指定
[ img ] イメージタグにリンクが貼られた場合の枠線、画像に文字が改行せず続く場合の文字の表示位置を指定しています。
[ img.lp ]コンテンツ記事登録の画像設定で「画像枠線を表示」を選択した場合、この指定が適用されます。
 
 
2. 基本エリア指定
(1)[ #wrapper ]全体外枠指定
コンテンツ(ページの有効範囲)全体枠のさらに外側を囲むエリアです。
※使用する場合は必ず幅指定「width(: 数値)px」を記述してください。
※[#wrapper]を使用し、ページをセンターに配置するときは、「margin:(数値)px auto;」としてください。
※使用しない場合は「margin: 0px;」「padding: 0px;」のみ記述してください。
(2)[ #container ]コンテンツ全体枠指定
コンテンツ(ページの有効範囲)全体を囲むエリアです。
※必ず幅指定「width(: 数値)px」を記述してください。
※[#wrapper]を使用せず、ページをセンターに配置するときは、「margin:(数値)px auto;」としてください。
(3)[ #header ]ヘッダー枠指定
ヘッダサブエリア4 行を囲むエリアです。
(4)[ #contents ]段組全体枠指定
[#side][#contents_main]をグループ化します。
「1 段組」を選択時は[#contents_main]のみを囲みます。
(5)[ #contents_main ]コンテンツ・サイド グループ枠指定
選択した基本レイアウトによって若干異なります。
  • 「1 段組」を選択時
    [ #main ]のみを囲みます。
  • 「2 段組」を選択時
    [ #main ]のみを囲みます。
    レイアウトの選択に合わせて左右いずれかの「float」が指定されます。
    ※「float」の指定はレイアウトの左右を制御するシステム保有(非公開)のスタイルシートに記述されていますので、記述する必要はありません。
  • 「3 段組」を選択時
    [ #main ][ #right_side ]をグループ化します。
    幅指定「width(: 数値)px」を記述してください。
    「float: right」が指定されます。
    ※「float」の指定はレイアウトの左右を制御するシステム保有(非公開)のスタイルシートに記述されていますので、記述する必要はありません。
  • 「左右分割01」を選択時
    [ #header ][ #ext_01 ][ #main ][ #ext_02 ][ #footer ]をグループ化します。
    幅指定「width(: 数値)px」を記述してください。
    レイアウトの選択に合わせて左右いずれかの「float」が指定されます。
    ※「float」の指定はレイアウトの左右を制御するシステム保有(非公開)のスタイルシートに記述されていますので、記述する必要はありません。
  • 「左右分割02」を選択時
    [ #main ][ #ext_02 ][ #footer ]をグループ化します。
    幅指定「width(: 数値)px」を記述してください。
    レイアウトの選択に合わせて左右いずれかの「float」が指定されます。
    ※「float」の指定はレイアウトの左右を制御するシステム保有(非公開)のスタイルシートに記述されていますので、記述する必要はありません。
  • 「左右分割03」を選択時
    [ #header ][ #ext_01 ][ #main ]をグループ化します。
    幅指定「width(: 数値)px」を記述してください。
    レイアウトの選択に合わせて左右いずれかの「float」が指定されます。
※「float」の指定はレイアウトの左右を制御するシステム保有(非公開)のスタイルシートに記述されていますので、記述する必要はありません。
(6)[#main]メインエリア部分指定
メインサブエリア8 行を囲むエリアです。
幅指定「width(: 数値)px」を記述してください。
※コンテンツ登録時に誤って指定された幅以上の画像が登録されてしまった場合にレイアウトが崩れることを防ぐ対策として「_overfl ow: hidden;」を指定しています。(IE6 のみ適用)
(7)[ #side ]サイドエリア指定
幅指定「width(: 数値)px」を記述してください。
  • 「1 段組」を選択時
    指定する必要はありません。
  • 「3 段組」を選択時
    「float: left」が指定されます。
  • ※「float」の指定はレイアウトの左右を制御するシステム保有(非公開)のスタイルシートに記 述されていますので、記述する必要はありません。
  • その他のレイアウトを選択時
    レイアウトの選択に合わせて左右いずれかの「float」が指定されます。
※「float」の指定はレイアウトの左右を制御するシステム保有(非公開)のスタイルシートに記述されていますので、記述する必要はありません。
(8)[ #right_side ]右サイドエリア指定
「3 段組」を選択時のみ使用されます。
「float: right」が指定されます。
※「float」の指定はレイアウトの左右を制御するシステム保有(非公開)のスタイルシートに記述されていますので、記述する必要はありません。
(9)[ #footer ]ヘッダー枠指定
フッタサブエリア3 行を囲むエリアです。
(9)[ #ext_01 ][ #ext_02 ]拡張エリア枠指定
制限はありません、デザインに応じて自由にご使用下さい。 ※基本デザインスタイルシート内のID 名は予めシステム内に組み込まれているため、変更することが出来ません。 ※各レイアウトのID 構成は次項「ベースエリアID 構成図」をご参照ください。
 
 
「基本デザインスタイルシート」から、画像アップローダでアップロードした背景画像へのファイルパス
スタイルシートは、「トップページ」や「記事ページ」とは階層が異なるため、 「画像アップローダ」でアップロードした画像へのパスが異なります。 「基本デザインスタイルシート」から背景画像へのパスは以下の通りです。
background:URL(../../../../images/フォルダ名/画像名);
list page page top
CMSの導入ならコアブロCMS このサイトはcoreblo-CMS/FORMの標準機能を使用して作成されています。 Webシステム開発は株式会社マベリカ