1 「ページ」タブ＞「ページ一覧」メニュー＞「サイト初期設定」をクリックします
2 開いた編集画面で「デザイン設定」をクリックします
出力先設定
デザインは、デバイスごとに設定することも可能です。初期状態では、モバイル、スマートフォンともに、
「PCと同じデザイン設定を利用する」 設定になっています。
PCと別のデザイン設定を利用する場合は、それ以外のデザイン設定を使用します。
モバイルアイコン、スマートフォンアイコンをクリックし、デザイン設定を行うことができます。
モバイルデザイン設定
モバイルは、「PCと同じデザイン設定を使用する」「モバイル独自のデザインを設定する」を選択できます。
スマートフォンデザイン設定
スマートフォンは、 「PCと同じデザイン設定を使用する」「モバイルと同じデザイン設定を使用する」
「スマートフォン独自のデザインを設定する」を選択できます。
最適化
モバイルやスマートフォン端末からアクセスすると、設定したデザイン設定やスタイルシートはアクセスされた端末に応じて最適化されます。
基本設定
| 項目 | 説明 | |
|---|---|---|
|
全体 <body> |
標準スタイル | サイト全体のスタイルを設定します。 |
| ページ | ページ幅 | ページの幅を設定します。ピクセル単位で設定した場合、罫線や余白など（他の部分のスタイルも含む）の影響により、この値どおりにならない場合があります。 |
| 標準スタイル | ページのスタイルを設定します。 | |
| エリア | レイアウト | レイアウトを設定します。 |
| 左エリアの幅 | 左エリアの幅をピクセル単位で設定します。最小値は50ピクセルです。左エリアを使用しない場合でも、50ピクセル以上の値を入力しておいてください。 | |
| 左エリアのスタイル | 左エリアのスタイルを設定します。 | |
| 右エリアの幅 | 右エリアの幅をピクセル単位で設定します。最小値は50ピクセルです。右エリアを使用しない場合でも、50ピクセル以上の値を入力しておいてください。 | |
| 右エリアのスタイル | 右エリアのスタイルを設定します。 | |
|
メインエリアのスタイル ヘッダーエリアのスタイル フッターエリアのスタイル |
メイン、ヘッダー、フッターエリアのスタイルを設定します。 | |
| ブロック | 標準スタイル | ブロックのスタイルを設定します。 |
モバイル設定
| 項目 | 説明 | |
|---|---|---|
| 携帯電話設定 | docomoのVGA表示を指定するmetaタグを出力する |
docomoの携帯電話端末に、ページをVGA表示するように指定するためのmetaタグを出力します。 ※本設定が有効な場合、以下のタグが出力されます。 <meta name="disparea" content="vga" /> |
| 画像リサイズ設定 | 携帯電話端末向けのページの生成のときの画像リサイズの基準サイズを設定します。 | |
| スマートフォンviewport設定 | 自動設定 | チェックすると、スマートフォン端末の横幅にちょうどページが収まるように、以下の設定項目を自動で設定します。（3.2.0以降のバージョンから利用できます。） |
| 表示幅 | コンテンツ全体の表示幅を指定します。 | |
| 拡大縮小設定 | ユーザーによる表示領域の拡大縮小を許可するかどうかの設定です。ユーザーによる拡大縮小を許可した場合は、「最小表示倍率」、「最大表示倍率」の範囲内で拡大縮小が可能になります。 許可しないように設定した場合は、閲覧ユーザーによる拡大、縮小が行えなくなるため、コンテンツのサイズを適切に作成していくよう注意が必要です。 | |
| 最小表示倍率 | 縮小時の最低表示倍率を指定します。指定可能な値は0～10(0は含まない)です。デフォルトでは、0.25が設定されます。 | |
| 最大表示倍率 | 拡大時の最大表示倍率を指定します。指定可能な値は0～10(0は含まない)です。デフォルトでは、10が設定されます。 | |
| 初期表示倍率 | コンテンツ初期表示時の表示倍率を指定します。デフォルトでは、1が設定されます。なお、ここで指定する値については、「最小表示倍率」と「最大表示倍率」の範囲に収まるように設定してください。 | |
| iPhone設定 | Webクリップアイコン | Webクリップとは、iPhone、iPod、iPadのSafariの機能で、ブックマークとしてホーム画面にサイトのショートカットを配置する機能です。このときに表示されるショートカットアイコンを設定します。 |
見出し
見出し1<h1>～見出し6<h6>のスタイルを設定します
リスト
リスト全体<ul>、リスト項目<li>のスタイルを設定します。
画像
画像<img> のスタイルを設定します。
段落
段落<p>のスタイルを設定します。
その他
その他、以下の項目のスタイルを設定します。
アドレス<address> / 引用文<blockquote> / 強調（斜体）<em> / 強調（太字）<strong> / 小さな文字<small> / 大きな文字<big>
エクストラ
デザイン設定画面を使用しない、またはもっと詳細にスタイルを設定したい場合は、CSSを記述できます。
手書き
「手書き」にチェックを入れ、「編集」
をクリックすると「カスタム編集」画面が開きます。CSSを記述して「OK」 をクリックします。
クラス名は、登録したスタイルの「スタイルのクラス名」を使用します。
ただし、「デザイン設定」の「基本設定」で設定する全体、ページ、エリアに対してCSSを記述する場合は、以下のクラス名を指定してください。
システムが記述しているスタイルに追加されます。
| 対象 | クラス名 |
|---|---|
| 全体 | クラス名はありません。bodyに設定してください。 |
| ページ…div class="pbPage" | pbPage |
| ヘッダーエリア…div class="pbHeaderArea" | pbHeaderArea |
| 左エリア…div class="pbLeftArea" | pbLeftArea |
| メインエリア…div class="pbMainArea" | pbMainArea |
| 右エリア…div class="pbRightArea" | pbRightArea |
| フッターエリア…div class="pbFooterArea" | pbFooterArea |
※pbで始まるクラス名は、SITE PUBLISで使用しています。
外部ファイル
外部のCSSファイルを読み込む場合は「外部ファイル」にチェックを入れ、「選択」ボタンをクリックします。
「ローカルファイルから選択」「サーバのライブラリから選択」からファイルを選択します。
絶対パスの指定
外部ファイルのCSS では、相対パスで指定すると、表示するページのURL階層が変わると、
正しく画像等が表示されなくなります。このため、絶対パス（「/」で始まるパス）で表記してください。
【例】
CSS 外部ファイルをライブラリ登録で「library/sample.css」に登録し、背景画像のファイルとしてライブラリの「library/aaa.jpg」を参照する場合、CSS ファイルでの背景画像の指定は「/library/aaa.jpg」のように絶対パス（「/」で始まるパス）で記述します。
● sample.css の記述
.example {
background-image: url(/library/aaa.jpg);
}
●エイリアスベース運用
【例】
http://www.＊＊＊＊＊.co.jp/web/index.html
↑/web（エイリアスベース）
●ドキュメントルート運用
【例】
http://www.＊＊＊＊＊co.jp/index.html
↑/（ドキュメントルート）
「ローカルファイルから選択」を使用してCSSファイルをアップロードする場合も同様に、ファイルを指定するパスは、ドキュメントルートで指定もしくは、エイリアスベースで指定する必要があります。
