movabletype.jp
検索

新しいリッチテキストエディタ

Movable Type 5.2 から、リッチテキストエディタが刷新されました。新しいエディタで、より快適な記事作成をお楽しみ下さい。

リッチテキストフォーマットの入力画面

フォーマットをリッチテキストに設定すると、WYSIWYGモードでの記事編集が可能となります。

入力支援ボタンの詳細

WYSIWYGモードでの記事編集では、入力支援ボタンが刷新されました。今まで以上に、細やかな設定が可能です。

新リッチテキストエディタ

html編集モード

入力支援ボタンの右端にある「</>」ボタンをクリックすることで、html編集モードに切り替わり、htmlを直接編集できます。もう一度クリックすると、WYSIWYGモードに切り替わります。

入力支援ボタンの機能詳細

html編集モードの際に表示される、入力支援ボタンの機能は以下のとおりです。

ボタン 動作 タグ
icon-bold.png 文字を最強調します <strong>text</strong>
icon-italic.png 文字を強調します <em>text</em>
icon-italic.png 下線を表示します <span style="text-decoraton:under-line;">text</span>
icon-italic.png 打ち消し線を表示します <del datetime="YYYY-MM-DDTHH:MM:SS">text</del> datetime
icon-italic.png リンクを挿入します <a href="url">text</a>
icon-italic.png リンクを解除します n/a
icon-italic.png 引用を表します <blockquote></blockquote>
icon-italic.png インデントをします <p style="padding-left: 30px;">text</p>
icon-italic.png インデントがあった場合、解除します インデントをひとつ解除(-30px)
インデントが0になったときは設定を消去
icon-italic.png 番号なしリストを表示をします <ul>
  <li>text</li>
</ul>
icon-italic.png 番号付きリストを表示します <ol>
  <li>text</li>
</ol>
icon-italic.png 文字を左寄せします <p style="text-align:left;">text</p>
icon-italic.png 文字を中央に配置します <p style="text-align:Center;">text</p>
icon-italic.png 文字を右寄せします <p style="text-align:right;">text</p>
icon-italic.png 画像を挿入します 挿入時の設定に準じます
icon-italic.png アイテム類を挿入します <a href="FileURL">File</a>
icon-italic.png アンドゥを行います n/a
icon-italic.png リドゥを行います n/a
icon-italic.png テキストの装飾を削除します n/a
icon-italic.png 水平線を挿入します <hr />
icon-italic.png フルスクリーンモードに切り替えます n/a
icon-italic.png テキストの文字色を設定します <span style="color:#ff0000;">Text</span>
icon-italic.png 文字の背景色を設定します <span style="background-color:#ff0000;">text</span>
icon-italic.png テキストフォーマットを設定します <hn>Text</hn>, <pre>Text</pre>, <p>Text</p>

WYSIWYGモード以外の編集画面

リッチテキスト以外のフォーマットを選択するか、もしくはリッチテキストでhtml編集モードを選択すると、入力支援ボタンが切り替わります。

html編集モードボタン

これらのフォーマットを選択した場合、文字装飾ボタンの動作は以下のようになります。

テキストを選択して装飾ボタンをクリックした場合

選択したテキストを挟んで、前後に開始タグと終了タグが挿入されます。装飾完了後は、終了タグの後ろにカーソルが移動します。

<strong>Text</strong>|

テキストを選択せずに装飾ボタンをクリックした場合

カーソル位置の前に、開始タグが挿入されます。もう一度同じ装飾ボタンを押すと、カーソル位置の後ろに終了タグが挿入され、カーソルが終了タグの後ろに移動します。

<strong>Text Foo Bar
<strong>Text</strong> Foo Bar

フルスクリーンモード

フルスクリーンアイコンをクリックするすることで、全画面を使って記事編集を行うフルスクリーンモードに切り替わります。もう一度クリックすると、通常の編集画面に戻ります。

通常画面

通常画面

フルスクリーン画面

フルスクリーン画面

CSSの設定

編集画面(ウェブページ、ブログ記事共)に、任意のCSSを指定することができます。CSSの指定を行うと、編集時にCSSによる装飾が有効となります。ウェブサイト、ブログごとに、それぞれ異なるCSSを設定することが可能です。

CSSの設定

サイドメニューから [設定] [投稿] をクリックします。CSS設定の入力フィールドに、適用したい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;
    }
    

サンプルCSSを適用した時の、ウェブページの出力

サンプルCSSを適用した時の、ウェブページの出力

サンプルCSSを適用した時の、ブログ記事の出力

サンプルCSSを適用した時の、ブログ記事の出力

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

本ドキュメントはベータ版の仕様にもとづいて記述されています。記述内容は予告なく変更することがあります。あらかじめご了承下さい。