記事・ウェブページ・コンテンツデータの編集画面に CSS を適用する
コンテンツ CSS ファイルを設定すると、編集画面内のエディター領域に対して CSS による装飾が有効となります。装飾が有効な領域は、記事やウェブページでは「本文」と「続き」、コンテンツデータでは「テキスト（複数行）」フィールドとなり、テキストフォーマットとしてリッチテキストやMTブロックエディタを使用した場合に反映します。また、サイトごとにそれぞれ異なる CSS を設定可能です。
MTブロックエディタでは、未選択状態のブロックに対してのみ 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 を指定する（MTブロックエディタ限定）
MTBlockEditor プラグインが提供するテキストフォーマット「MTブロックエディタ」では、属性セレクターによって、コンテンツタイプやコンテンツフィールドごとに細かく 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） |
