Movable Typeのリッチテキストのフォーマットを確認する

以前にMovable Typeのエディタについて調べた際にリッチテキストのフォーマットについても調べましたが、挿入できるタグなどが以前から変わっているようだったので、改めて確認してみます。
今回使用する環境は、Movable Type 7 の r.5005 になります。

記事のリッチテキスト

フォーマットでリッチテキストを選択している場合、以下のような表示になります。
以前に調べた時と比べて、tableとテキストの中央揃えや右揃えが増えているようでした。

各ボタンを使用した際のタグを確認してみます。

太字・斜体・下線・取り消し線

<p>
<strong>太字</strong>と
<em>斜体</em>と
<span style="text-decoration: underline;">下線</span>と
<del datetime="2025-08-16T15:21:13+09:00">取り消し線</del>
</p>

引用ブロック

<blockquote>
<p>引用ブロック</p>
</blockquote>

箇条書き・番号付き箇条書き

<ul>
<li>箇条書き1</li>
<li>箇条書き2</li>
</ul>
<ol>
<li>番号付き箇条書き1</li>
<li>番号付き箇条書き2</li>
</ol>

水平罫線

<hr />

リンクの挿入・編集

リンクは挿入の際に「同じウィンドウ」か「新規ウィンドウ」を選択できます。

<p>
<a href="https://cly7796.net/blog/">リンクの挿入(同じウィンドウ)</a>
<a href="https://cly7796.net/blog/" target="_blank" rel="noopener">リンクの挿入(新規ウィンドウ)</a>
</p>

HTMLの挿入

HTMLの挿入は任意のHTMLを追加できます。

YouTubeの埋め込みを試してみます。

<p>
<iframe width="560" height="315" src="https://www.youtube.com/embed/8W55wqKvTf4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen="allowfullscreen"></iframe>
</p>

アセットの挿入

PDFと動画、音声ファイルの挿入を試してみたところ、アセットの表示を設定するチェックが表示されました。

PDFの場合

動画ファイルの場合

音声ファイルの場合

ただいずれの場合も、チェックの有無で出力結果は特に変わらず、アセットへのリンク付きのテキストが表示されるようでした。

<p><a href="https://example.com/sample.pdf">sample.pdf</a></p>
<p><a href="https://example.com/movie.mp4">movie.mp4</a></p>
<p><a href="https://example.com/audio.mp3">audio.mp3</a></p>

画像の挿入

画像挿入時のオプションは以下の通りです。

特にオプションを変更しなかった場合、以下のような出力になります。

<p><img alt="test.jpg" src="https://example.com/test.jpg" width="800" height="533" class="mt-image-none" /></p>

画像の表示

画像の表示のチェックを外すと、imgではなく画像へのリンクが貼られたテキストが出力されます。

<p><a href="https://example.com/test.jpg">test.jpg</a></p>

サムネイルを利用

サムネイルを利用にチェックを入れると、指定した幅の画像を生成して出力されます。
例としてチェックを入れて幅400ピクセルとしてみると、以下の内容で出力されました。

<p><a href="https://example.com/test.jpg"><img alt="test.jpg" src="https://example.com/assets_c/2025/08/test-thumb-400xauto-1201.jpg" width="400" height="267" class="mt-image-none" /></a></p>

オリジナル画像へのリンクも設定されるようです。

位置

位置を設定した場合、インラインスタイルで配置の設定が行われるようです。

左を選択した場合

<p>
<img alt="test.jpg" src="https://example.com/test.jpg" width="800" height="533" class="mt-image-left" style="float: left; margin: 0 20px 20px 0;" />
</p>

中央を選択した場合

<p>
<img alt="test.jpg" src="https://example.com/test.jpg" width="800" height="533" class="mt-image-center" style="text-align: center; display: block; margin: 0 auto 20px;" />
</p>

右を選択した場合

<p><img alt="test.jpg" src="https://example.com/test.jpg" width="800" height="533" class="mt-image-right" style="float: right; margin: 0 0 20px 20px;" /></p>

画像からのリンク

「オリジナル画像にリンクする」にチェックを入れると、「ポップアップで表示する」か「同じ画面に表示する」の選択が表示されます。

「ポップアップで表示する」と「同じ画面に表示する」をそれぞれ設定してみましたが、特にリンクはされず、オプションを設定しなかった時と同じ出力になりました。

<p><img alt="test.jpg" src="https://example.com/test.jpg" width="800" height="533" class="mt-image-none" /></p>

サムネイルを利用と併用する形も試してみましたが、この場合もサムネイルを利用の時と同じ出力になりました。

<p><a href="https://example.com/test.jpg"><img alt="test.jpg" src="https://example.com/assets_c/2025/08/test-thumb-400xauto-1201.jpg" width="400" height="267" class="mt-image-none" /></a></p>

表

表のボタンを選択すると、以下のようなメニューが表示されます。

表の項目でtableの行数と列数を選択して挿入します。

2×2 で挿入した場合、以下のような出力になります。

<table border="1" style="border-collapse: collapse; width: 100%;">
<tbody>
<tr>
<td style="width: 47.3257%;">1A</td>
<td style="width: 47.3257%;">1B</td>
</tr>
<tr>
<td style="width: 47.3257%;">2A</td>
<td style="width: 47.3257%;">2B</td>
</tr>
</tbody>
</table>

セル

メニューでセルの項目を選択すると、以下のような設定を行えます。

セルを複数選択した状態で「セルの結合」を選択すると、セルを結合できます。
結合したセルを選択した状態で「セルの分割」を選択すると、セルの結合を解除できます。

セルの結合を行った場合、以下のようにrowspanやcolspanが設定されます。

<table border="1" style="border-collapse: collapse; width: 100%;">
<tbody>
<tr>
<td style="width: 30.6882%;">1A</td>
<td style="width: 30.6882%;">1B</td>
<td style="width: 30.694%;">1C</td>
</tr>
<tr>
<td rowspan="2" style="width: 30.6882%;">2A</td>
<td style="width: 30.6882%;">2B</td>
<td style="width: 30.694%;">2C</td>
</tr>
<tr>
<td colspan="2" style="width: 61.3822%;">3B</td>
</tr>
</tbody>
</table>

「セルの詳細設定」では以下の内容を設定できます。

いくつか設定を行った結果は以下の通りです。

<table border="1" style="border-collapse: collapse; width: 100%;">
<tbody>
<tr>
<th style="width: 30.6882%;">セルタイプ：ヘッダーセルを選択</th>
<th style="width: 30.6882%;" scope="col">
<p>セルタイプ：ヘッダーセル<br />スコープ：列を選択</p>
</th>
<th style="width: 30.694%; text-align: center; vertical-align: middle;">セルタイプ：ヘッダーセル<br />横配置：中央揃え<br />縦配置・中央を選択</th>
</tr>
<tr>
<td style="width: 30.6882%; height: 100px;">高さ：100pxを設定</td>
<td>幅：空値を設定</td>
<td style="width: 100px;">幅：100pxを設定</td>
</tr>
<tr>
<td style="width: 30.6882%;">2A</td>
<td style="width: 30.6882%;">2B</td>
<td style="width: 30.694%;">2C</td>
</tr>
</tbody>
</table>

「セルの詳細設定」内で「詳細設定」を選択すると、以下の内容を設定できます。

設定を試した結果は以下の通りです。

<table border="1" style="border-collapse: collapse; width: 100%;">
<tbody>
<tr>
<td style="width: 47.3257%; border: 5px dotted #e03e2d;">枠線幅：5<br />枠線スタイル：Dotted<br />枠線の色：レッド</td>
<td style="width: 47.3257%;">1B</td>
</tr>
<tr>
<td style="width: 47.3257%;">2A</td>
<td style="width: 47.3257%; background-color: #2dc26b;">背景色：グリーン</td>
</tr>
</tbody>
</table>

行

メニューで行の項目を選択すると、以下のような設定を行えます。

行の挿入や削除は、現在選択しているセルを起点に行われるようです。

行の詳細設定を試してみます。
設定できる内容は以下の通りです。

「行の詳細設定」内で「詳細設定」を選択すると、以下の内容を設定できます。

設定を試した結果は以下の通りです。
セルではなく行に対する設定になるので、テキスト配置や背景色は行全体に設定されます。

<table border="1" style="border-collapse: collapse; width: 100%;">
<thead>
<tr style="text-align: center;">
<td style="width: 47.3257%;" scope="col">行タイプ：ヘッダー</td>
<td style="width: 47.3257%;" scope="col">行タイプ：ヘッダー<br />配置：中央揃え</td>
</tr>
</thead>
<tbody>
<tr style="height: 100px; background-color: #3598db;">
<td style="width: 47.3257%;">1A</td>
<td style="width: 47.3257%;">高さ：100px<br />背景色：ブルー</td>
</tr>
</tbody>
<tfoot>
<tr>
<td style="width: 47.3257%;">行タイプ：フッター</td>
<td style="width: 47.3257%;">行タイプ：フッター</td>
</tr>
</tfoot>
</table>

列

メニューで列の項目を選択すると、以下のような設定を行えます。

列の挿入や削除は行と同じく、現在選択しているセルを起点に行われるようです。
列に関しては詳細設定はありません。

表

最後に表の詳細設定です。
選択すると、以下の設定を行えます。

「表の詳細設定」内で「詳細設定」を選択すると、以下の内容を設定できます。

幅を80%、高さを200px、セルの間隔を5px、セル内余白を20px、枠線幅を2、キャプションの表示にチェック、配置を右寄せ、枠線スタイルをDotted、枠線の色をレッド、背景色をブルーとして試してみます。
設定を試した結果は以下の通りです。

<table border="2" cellpadding="20px" cellspacing="5px" style="border-collapse: collapse; width: 80%; height: 200px; background-color: #3598db; border-color: #e03e2d; border-style: dotted; float: right;"><caption>キャプション</caption>
<tbody>
<tr>
<td style="width: 47.3257%;">1A</td>
<td style="width: 47.3257%;">1B</td>
</tr>
<tr>
<td style="width: 47.3257%;">2A</td>
<td style="width: 47.3257%;">2B</td>
</tr>
</tbody>
</table>

captionの入力場所が分かりにくかったのですが、tableの先頭のセルを選択した状態で左キーを押下すると、captionが選択状態になるようです。

テキストの色・背景色

色の選択は以下のようなカラーパレットからの選択になります。

右下のカスタムカラーを選択すると、任意の色を設定できます。

<p>
<span style="color: #3598db;">テキストの色</span>と<span style="color: #e18331;">カスタムカラー</span>
</p>
<p>
<span style="background-color: #2dc26b;">背景色</span>と<span style="background-color: #f493d5;">カスタムカラー</span>
</p>

左揃え・中央揃え・右揃え

<p style="text-align: left;">左揃え</p>
<p style="text-align: center;">中央揃え</p>
<p style="text-align: right;">右揃え</p>

インデントを増やす

<p style="padding-left: 40px;">1回インデントを増やす</p>
<p style="padding-left: 80px;">2回インデントを増やす</p>
<p style="padding-left: 120px;">3回インデントを増やす</p>

段落・見出し・書式設定済み

<h1>見出し1</h1>
<h2>見出し2</h2>
<h3>見出し3</h3>
<h4>見出し4</h4>
<h5>見出し5</h5>
<h6>見出し6</h6>
<pre>書式設定済み</pre>

コンテンツタイプのリッチテキスト

コンテンツタイプのリッチテキストの場合、記事のリッチテキストで紹介したボタンのうち一部が使用できるようです。