スタイルエディタは、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>設定に追加する等を行ってください。
ノーマルビュー
デフォルトの表示スタイルです。GUI、プレビュー、コードのすべてが表示されます。
GUI&プレビュー
GUI、プレビューが表示されます。
コード&プレビュー
プレビュー、コードのみが表示されます。
GUI
GUIのみが表示されます。
コード
コードのみが表示されます。
GUI&コード
GUI、コードが表示されます。