movabletype.jp
検索

記事編集画面に、CSSを適用する

CSSの設定

CSSの指定を行うと、編集時にCSSによる装飾が有効となります。ウェブサイト、ブログごとに、それぞれ異なるCSSを設定することが可能です。

CSS の設定

  1. サイドメニューから [設定] - [投稿] を選択する
  2. CSS 設定の入力フィールドに、適用したい CSS ファイルを指定する
  3. [変更を保存] ボタンをクリックする

ウェブページ、記事ごとに 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

Updated on 2013-10-08, 12:47 .

関連ページ