エディター内のCSSを設定する

概要

エディターのCSSを設定することにより、エディターの編集エリア（ワープロビュー）での表示を公開コンテンツを同じ表示にすることができます。

【設定例 】

1.YMLファイルの設定

YMLファイルの基本についてはこちらをご覧ください。

YMLファイルに以下を追記します。

COLOR_SET:
  original:
    LABEL: オリジナル
    COLOR_CODE: 0
    EDITOR.CSS: ./common_css/editor.css

EDITOR.CSS:にはエディターに設定するCSSのパスを設定します。
上記の場合、docroot直下のcommon_cssフォルダ内のeditor.cssになります。

2.サイトプロパティ設定

1. WIKIPLUS上部編集ツールバーの「サイトプロパティ」（スパナマークのアイコン）をクリックします。
   
2. 「ウェブサイトの基本設定」のウェブサイトサイトカラーのドロップダウンリストから、「オリジナル 」を選択します。
   
3. 「保存」します。
   

3.CSS作成・アップロード

エディター用CSSを作成し。FTPソフト等で該当場所にアップロードします。

CSS作成の注意点

エディター用CSSはエディター内のみのHTMLタグに適用されるCSSです。

テンプレート等で編集エリアを内包するブロックのIDやクラスがあったとしても、その情報はCSSには引き継がれません。CSSを設定する場合にはhtmlタグそのものに指定する必要があります。

例】エディター内の「見出し1」にCSSを設定する場合

〇　h2{font-size:20px;}

×  #wrap h2{font-size:20px;}

×  div.main h2{font-size:20px;}