はじめに
スタートアップ
ホーム
編集-編集
編集-登録
編集-ツール
ブロック
コーナー
アプリケーション
設定-管理
設定-サイト
設定-システム
設定-その他
保守ツール
マルチサイト
SDEditor
プラグイン
オプション
Tips
リリースノート
よくある質問
権限と承認
用語集
編集-登録スタイルスタイルエディタ

スタイルエディタは、CSSを直感的な操作で編集できるツールです。
サイト内で共通のCSSを編集することで、サイトデザインの統一性を維持します。
公開ページ全てで読み込まれる単一のファイルを出力するため、キャッシュの有効性も向上します。

スタイルエディタの利用には権限が必要

グループ設定の権限設定において、「スタイルエディタ設定」項目で適切な権限を割り振ってください。
スタイル利用権限設定
adminユーザー、または管理グループに属するユーザーは自由にスタイルエディタを利用できます。

 スタイルエディタを開きます

 スタイルエディタはスタイルリストの「新規スタイル作成」か「スタイル編集」から開きます。

「スタイルリスト」参照

 スタイルエディタ

スタイル作成の流れ

1スタイル情報を入力します

スタイル名を入力し、必要に応じてコメント、タイプを入力します。
公開ページで読み込まれるCSSに含みたくない場合は「出力しない」を選んでください。

2セレクターを入力します

画面左上の「追加」ボタンをクリックして、表示される画面でセレクターを入力します。 CSSのセレクターについては書籍やリファレンスサイトなどを参考にしてください。

代表的なセレクター記号 「#(シャープ)」と「.(ピリオド)」

#(シャープ)はIDセレクター、.(ピリオド)はクラスセレクターです。
<div id="hoge">HOGE</div> という要素のスタイルを登録したい場合は #hoge
<div class="fuga">FUGA</div> という要素のスタイルを登録した時は .fuga を登録します。

3プレビューを見ながらCSSを登録します

クラスセレクターを登録したら、画面右のプレビューに入力が逐次反映されます。 「テキスト」「ボックス」「背景」「テーブル」「CSS3」「その他」から適切なパラメータを入力してください。
画面右下のコードミラーに直接CSSを入力することもできます。

4プレビューを切り替え・プレビューHTMLを編集します

初期から入力されているテキストプレビュー以外の状態を確認したい場合は、プレビューの種類を切り替えます。
プレビュー種類選択
「テキスト」「ボックス」「テーブル」「リスト」「混合」「独自HTML(ブランク)」があります。
プレビューテキストを変更したい場合は「編集」ボタンで内容を変更する画面に切り替わるので、プレビューしたいHTMLを入力して「適用」をクリックしてください。
これらのプレビュー用HTMLはスタイル保存時に一緒に保存されます。

5 スタイルを保存します

画面下部の「保存」をクリックしてスタイルを保存します。新規作成の場合は新しく登録され、編集の場合は上書きされます。「出力する」を選択していた場合はこの時点で出力CSSに反映されます。

保存せずに反映する

スタイルリストが「選択モード」の状態でスタイルエディタを開いた場合、保存ボタンのとなりに「保存せずに反映する」ボタンが表示されます。編集中のスタイルをブロック、エリア、ページにそれぞれ適用した状態を確認することができます。

スタイルのページへの反映について

「保存」したスタイルの内容は、「publis.css」に保存され、全てのページに反映されます。

※PC/スマートデバイスのみ。モバイルはインラインで直接出力されます。

そのため、汎用的な id や class を指定すると、意図しない箇所に反映されてしまう場合があります。
id や class を指定する際はご注意ください。

特定ページでのみ利用したいスタイル内容の場合などは、<head>要素として登録を行い、そのページでのみ<head>設定に追加する等を行ってください。

「<head>要素一覧」参照
「<head>設定」参照

ノーマルビュー

デフォルトの表示スタイルです。GUI、プレビュー、コードのすべてが表示されます。 ノーマルビュー

GUI&プレビュー

GUI、プレビューが表示されます。 GUI&プレビュー

コード&プレビュー

プレビュー、コードのみが表示されます。 コード&プレビュー

GUI

GUIのみが表示されます。 コード&プレビュー

コード

コードのみが表示されます。 コード

GUI&コード

GUI、コードが表示されます。 GUI&コード

PAGE TOP

© 2017 SITE PUBLIS CO.,Ltd All rights reserved.

このサイトはCMS SITE PUBLISを利用して構築・運営されています。

Copyright(C) 1998-2014, MICS Network Inc. All rights reserved.

このサイトはCMS SITE PUBLISを利用して構築・運営されています。