Movable Typeのリッチテキストで出力されるタグのCSSを用意する

2018.12.20

以前にMovable Typeのリッチテキストで出力されるタグについて試してみましたが、今回はそれを踏まえて設定しておいた方がよさそうなCSSを考えてみました。

サンプルコード

投稿内容を.entry-bodyで括って、.entry-body内の要素に対してスタイルを設定します。
class名は適宜変更して下さい。

1
2
3
<div class="entry-body">
<mt:EntryBody>
</div>

今回はリッチテキストのボタンを一通り試してみて、以下のような出力内容にCSSを適用してみます。

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<div class="entry-body">
<p><strong>太字</strong><em>斜体</em><span style="text-decoration: underline;">下線</span><del datetime="XXXXXXXXXX">取り消し線</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></p>
<p><img alt="xx" src="https://via.placeholder.com/150" class="mt-image-none" /></p>
<hr />
<p><img alt="xx" src="https://via.placeholder.com/150" class="mt-image-left" style="float: left; margin: 0 20px 20px 0;" /></p>
<p>画像左寄せのテキストテキスト</p>
<hr />
<p><img alt="xx" src="https://via.placeholder.com/150" class="mt-image-center" style="text-align: center; display: block; margin: 0 auto 20px;" /></p>
<hr />
<p><img alt="xx" src="https://via.placeholder.com/150" class="mt-image-right" style="float: right; margin: 0 0 20px 20px;" /></p>
<p>画像右寄せのテキストテキスト</p>
<hr />
<p><span style="color: #ff0000;">赤色</span></p>
<p><span style="background-color: #ff0000;">背景赤色</span></p>
<p style="padding-left: 30px;">字下げを増やす</p>
<h1>見出し1</h1>
<h2>見出し2</h2>
<h3>見出し3</h3>
<h4>見出し4</h4>
<h5>見出し5</h5>
<h6>見出し6</h6>
<pre>Preformatted</pre>
</div>

CSSは以下のように設定してみました。

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
.entry-body:after {
    content: "";
    display: block;
    clear: both;
}
.entry-body strong {
    font-weight: bold;
}
.entry-body em {
    font-style: italic;
}
.entry-body blockquote {
    display: block;
    margin: 1em 40px;
}
.entry-body ul {
    padding-left: 2em;
}
.entry-body ul li {
    list-style: outside disc;
}
.entry-body ol {
    padding-left: 2em;
}
.entry-body ol li {
    list-style: outside decimal;
}
.entry-body a {
    color: #0000ff;
}
.entry-body hr {
    clear: both;
    display: block;
    border: none;
    border-top: #9a9a9a 1px solid;
    border-bottom: #eeeeee 1px solid;
}
.mt-image-none {}
.mt-image-left {}
.mt-image-center {}
.mt-image-right {}
.entry-body h1 {
    font-size: 2.0em;
}
.entry-body h2 {
    font-size: 1.5em;
}
.entry-body h3 {
    font-size: 1.17em;
}
.entry-body h4 {
    font-size: 1.0em;
}
.entry-body h5 {
    font-size: 0.83em;
}
.entry-body h6 {
    font-size: 0.67em;
}
.entry-body pre {
    display: block;
    font-family: Consolas, Monaco, monospace;
}

画像の左寄せや右寄せなど、styleが直接付与されている要素については特にCSSの設定は行っていません。
画像にfloatを使う場合があるので、全体を囲う.entry-bodyにclearfixを適用しています。
リッチテキストの出力にスタイルを適用したデモページ

今回はコーディングする際のベースとして使う想定なので、余白や文字サイズなどは案件によって適宜変更するようにして下さい。
　

関連記事

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

Category

Tag

Recent

2025年4月
日 月 火 水 木 金 土
 12345
6789101112
13141516171819
20212223242526
27282930