Movable TypeでリッチエディタにCSSを適用する

2018.12.07

Movable TypeのリッチエディタでHTMLをコピペして独自のスタイルを当てたいことがあったので、リッチエディタ内にCSSを適用する方法を調べました。

設定方法

以下のようなHTMLとCSSを用意して、コードをコピペしてリッチエディタ内で使う想定で試してみます。

HTML

<div class="box">
  <div class="box_img">
    <img src="https://via.placeholder.com/400x300" alt="" />
  </div>
  <div class="box_text">
    <p class="box_ttl">タイトルテキスト</p>
    <p class="box_description">説明文のテキストです。説明文のテキストです。説明文のテキストです。</p>
  </div>
</div>

wysiwyg.css

.box {
	display: flex;
	width: 100%;
	max-width: 1000px;
	box-sizing: border-box;
	margin: 20px auto;
	padding: 0 15px;
}
.box_img {
	width: 40%;
	box-sizing: border-box;
	padding-right: 20px;
}
.box_img img {
	width: 100%;
	height: auto;
}
.box_text {
	width: 60%;
}
.box_ttl {
	font-size: 18px;
	font-weight: bold;
}
.box_description {
	font-size: 14px;
}

リッチエディタで使用するパーツのデモページ

まずは特に設定しないで投稿してみます。
リッチテキストのフォーマットでHTML編集モードに切り替えて、用意したコードを貼り付けます。