リッチテキストエディタ編集時にエディタ上に反映されるスタイルシートを設定することができます。ワークスペース、スペースごとに、それぞれ異なるスタイルシートを設定することが可能です。
CSS ファイルの設定
- サイドメニューから [設定] - [投稿] を選択する
- [WYSIWYGエディタの設定] - [コンテンツCSSファイル] に、適用したい CSS ファイルを指定する
- [変更を保存] ボタンをクリックする
ウェブページ / 記事で class を切り替える
リッチテキストモードでは、ウェブページ、記事の編集画面のリッチテキストエディタを構成する <body> 要素に対して、それぞれ「page」「entry」という異なる class を付与しています。そのため、スタイルシート内で class「body.page」「body.entry」を使うことで、同じスペース内の「ウェブページ」「記事」編集時に、それぞれ異なる CSS を適用することができます。
例: ウェブページ、記事でそれぞれ異なるCSSを適用する場合
編集画面に適用する CSS ファイルに以下のように記述します。
body {
font-family: serif;
}
body.entry {
background: pink;
}
body.entry p {
color: red;
}
body.page {
background: green;
}
body.page p {
color: yellow;
}PowerCMS のテーマにリッチテキストエディタ用の CSS を設定する
PowerCMS のテーマに含まれる、theme.yaml ファイルに、編集画面で使用する CSS ファイルの設定を行うことができます。
| 入力値 | 解釈 (http://www.example.com/mt/mt.cgi の場合) |
|---|---|
| /path/to/cssfile.css | URL として判断 (http://www.example.com/path/to/cssfile.css) |
| {{theme_static}}path/to/cssfile.css | テーマ内のファイルと判断 (http://www.example.com/mt/mt-static/support/theme_static/path/to/cssfile.css) |
| https://www.example.com/styles.css | 入力値のまま URL として判断 (https://www.example.com/styles.css) |
theme.yaml での設定
theme.yaml でスタイルを指定する場合、以下の様に設定を行います。
elements:
default_prefs:
importer: default_prefs
data:
content_css: "{{theme_static}}path/to/cssfile.css"
