記事編集画面に、CSSを適用する
最終更新日: 2017.10.06
CSSの設定
Movable Type 5.2からは、リッチテキストエディタを使った編集画面(ウェブページ、ブログ記事共)に、任意のCSSを指定することができます。CSSの指定を行うと、編集時にCSSによる装飾が有効となります。ウェブサイト、ブログごとに、それぞれ異なるCSSを設定することが可能です。
CSSの設定
サイドメニューから [設定] の [投稿] をクリックします。CSS設定の入力フィールドに、適用したいCSSファイルを指定してください。[変更を保存]をクリックすることで、編集画面に適用するCSSが有効となります。
ウェブページ、ブログ記事ごとにclassを切り替える
リッチテキストモードでは、ウェブページ、ブログ記事の編集画面の<body>要素に対して、それぞれ「page」「entry」いう異なるclassを付与しています。
入力画面へCSSを指定する際に、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;
}
Movable Typeのテーマに編集画面用のCSSを設定する
Movable Typeのテーマに含まれる、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"
以下は、Movable Typeのテーマ「pico」に、test.cssを編集画面のスタイルとして指定する場合のサンプルコードです。
label: Pico
id: pico
author_name: Six Apart, Ltd.
author_link: http://www.movabletype.org/
version: 1.0
class: blog
protected: 1
description: <__trans phrase="Pico is the microblogging theme, designed for keeping things simple to handle frequent updates. To put the focus on content we've moved the sidebars below the list of posts.">
thumbnail_file: thumb.png
thumbnail_file_medium: thumb-medium.png
thumbnail_file_small: thumb-small.png
elements:
default_prefs:
importer: default_prefs
data:
content_css: "{{theme_static}}style_library/test.css"
template_set:
component: core
importer: template_set
name: template set
data:
label: Pico
...
サンプルCSS
ウェブページとブログ記事を書き分けるサンプルCSSを用意しました。ダウンロードして、実際に編集画面用のCSSとして指定してみて下さい。どんなデザインになるか、お楽しみに！
テスト用サンプルテーマ Mt-theme-sample.zip
