公開ページのデザインをリッチテキストエディタ内で使いたい
リッチテキストエディタには CSS ファイルを設定でき、デザインを変更できます。
CSS ファイルの設定は「PowerCMS 設定」もしくは「投稿設定」の画面で行えます。
「PowerCMS 設定」画面にはウェブサイト(ブログ)のメニューから[設定]-[PowerCMS]を選択して移動し、 見出し[TinyMCE 設定]の下、[コンテンツCSSファイル]へ CSS ファイルの URL を設定できます。
「投稿設定」画面にはウェブサイト(ブログ)のメニューから[設定]-[投稿設定]を選択して移動し、見出し[WYSIWYGエディタの設定]の下、[コンテンツCSSファイル]へ CSS ファイルの URL を設定できます。
双方の画面で CSS ファイルの設定を行われた場合、「PowerCMS 設定」「投稿設定」画面の順序で CSS ファイルが読み込み、CSS ファイルの内のスタイルシートが適用されます。
CSS ファイル内の記述について
[コンテンツCSSファイル]へ設定する CSS ファイルについては、入力内容が body タグ 直下に配置されたことを想定したセレクタを利用する必要があり、 公開ページで利用している CSS ファイルをそのまま設定されても意図したデザインで表示されないことがあります。
リッチテキストエディタへ入力した内容
<p>私が本文だ</p>
テンプレートの記述
<body>
<main>
<$MTEntryBody$>
</main>
</body>
テンプレートの出力結果 (公開ページの内容)
<body>
<main>
<p>私が本文だ</p>
</main>
</body>
CSS ファイルが適用されるリッチテキストエディタ内の HTML
<body class="mce-content-body wysiwyg entry">
<p>私が本文だ</p>
</body>
[コンテンツCSSファイル]の内容
body main p {
/* この宣言ブロックは適用されない */
}
body p {
/* この宣言ブロックは適用される */
}
p {
/* この宣言ブロックは適用される */
}
CSS ファイルが適用されるリッチテキストエディタ内の HTML は入力内容を body タグの直下に配置された状態となり、上記例の場合は公開ページだと入力内容は main タグの配下に出力されますますが、リッチテキストエディタ内だと入力内容は main タグの配下にないため、main タグを使ったセレクタの宣言ブロックは適用されない動作をします。
