記事・ウェブページ・コンテンツデータの編集画面に CSS を適用する
コンテンツ CSS ファイルを設定すると、編集画面内のエディター領域に対して CSS による装飾が有効となります。装飾が有効な領域は、記事やウェブページでは「本文」と「続き」、コンテンツデータでは「テキスト（複数行）」フィールドとなり、テキストフォーマットとしてリッチテキストやブロックエディタを使用した場合に反映します。また、サイトごとにそれぞれ異なる CSS を設定可能です。
ブロックエディタでは、未選択状態のブロックに対してのみ CSS が適用されます。選択（編集）中のブロックでは CSS が解除されます。
CSS の準備
編集画面に適用する CSS ファイルを事前に用意します。CSS ファイルを作成したらサーバーにアップロードし、編集画面上からアクセス可能な状態にします。
エディター領域の CSS を指定する
リッチテキストモードでは、記事、ウェブページ、コンテンツデータの編集画面の <body> 要素に対して、それぞれ「entry」「page」「content_data」という異なる class を付与しています。
入力画面へ CSS を指定する際に、class 名として「body.entry」「body.page」「content_data」を付与することで、同じサイト内の、記事、ウェブページ、コンテンツデータの編集時に、それぞれ異なる CSS を適用することができます。
記事、ウェブページ、コンテンツデータでそれぞれ異なる CSS を適用する場合の記述例
body {
font-family: serif;
}
body.entry {
background: pink;
}
body.entry p {
color: red;
}
body.page {
background: green;
}
body.page p {
color: yellow;
}
body.content_data {
background: gray;
}
body.content_data p {
color: blue;
}
コンテンツタイプやフィールドごとに CSS を指定する（ブロックエディタ限定）
MTBlockEditor プラグインが提供するテキストフォーマット「ブロックエディタ」では、属性セレクターによって、コンテンツタイプやコンテンツフィールドごとに細かく CSS を指定することが可能です。
コンテンツタイプやコンテンツフィールドごと CSS を適用する場合の記述例
[data-content-type-name="コンテンツタイプ名"] {
color: #000;
}
[data-content-type-unique-id="ユニークID"] {
color: #000;
}
[data-field-name="フィールド名"] {
color: #000;
}
[data-field-unique-id="ユニークID"] {
color: #000;
}
CSS の設定
作成した CSS ファイルをサーバーにアップロードしたら、サイトの管理画面の設定項目から CSS を指定します。
管理画面での設定手順
- サイトの管理画面のサイドメニューから [設定] - [投稿] を選択する
- [WYSIWYGエディタの設定] の [コンテンツCSSファイル] で CSS ファイルを指定する
- [変更を保存] ボタンをクリックする
※ [コンテンツCSSファイル] は URL での指定になります。指定方法は後述するテーマの theme.yaml と同じ入力値を利用できます。
Movable Type のテーマに編集画面用の CSS の設定を含める
Movable Type のテーマ内にある theme.yaml ファイルには、編集画面に適用する CSS の設定を含めることができます。
theme.yaml ファイル内での設定
theme.yaml ファイル内で CSS を指定する場合、以下の例のように記述します。
elements:
default_prefs:
importer: default_prefs
data:
content_css: "{{theme_static}}path/to/cssfile.css"
CSS ファイルを指定する際の入力値と解釈
| 入力値 | 解釈（https://www.example.com/mt/mt.cgi の場合） |
|---|---|
| /path/to/cssfile.css | URL として判断 （https://www.example.com/path/to/cssfile.css） |
| {{theme_static}}path/to/cssfile.css | テーマ内のファイルと判断 （https://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） |
