SHARE

画像に「noLine」とclassを指定することで、上の画像のように外枠の線を消すことができます。
例）<img class="mt-image-none noLine" src="○○○" ...... />



画像の右にテキストを回り込ませる場合、画像に「floatL」というclassを指定します。
例）<img class="mt-image-none floatL" src="○○○" ...... />
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

「float」のclassを使用した場合、「float」を解除するために、回り込ませるテキストの後に「clear」というclassを指定してください。
下記、指定例をご参考ください。

画像の左にテキストを回り込ませる場合、画像に「floatR」というclassを指定します。
例）<img class="mt-image-none floatR" src="○○○" ...... />
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキスト

---

float解除のclearの指定例

<p class="clear">テキストテキストテキストテキストテキストテキスト</p>
<hr class="clear" />
<div class="clear"><hr></div>

---

<h4>サブタイトル</h4>と指定したサブタイトルが入ります

<h5>サブタイトル</h5>と指定したサブタイトルが入ります

<h5 class="underLine">サブタイトル</h5>と指定したサブタイトルが入ります

この記事本文を編集するエリアの上部にいくつかスタイルを変更できるボタンがあります。
各スタイルをあてる箇所のテキストを選択した状態でボタンを押してください。
文字を小さくする場合＝【A↓】
文字を大きくする場合＝【A↑】
文字を太くする場合＝【B】
文字を斜めにする場合＝【I】
下線付きテキストの場合＝【Uに下線のついたボタン】
取り消し線をつける場合＝【Sに横線のついたボタン】
テキストにリンクを貼る場合＝【メールボタンの左の鎖アイコンのボタン】


アイコンをつける場合のリンク <a class="arrow" href="#">○○○</a>とclassを指定してください
このclassは、文章の外に設置する想定で作られています。

PDFのリンク（○○KB） この場合は、<a class="pdf" href="#">PDFファイル名（○○KB）</a>と指定してください。

テキストテキストテキスト※1　テキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

※1　注釈用スタイル／文字サイズを小さく表示
<p class="noteSmall">※1　注釈用スタイル／文字サイズを小さく表示</p>と指定してください。

マージンが下に5pxのスタイルになります
指定例）
<p class="marginB5">テキストテキストテキストテキストテキスト<br>
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>

---

マージンが下に10pxのスタイルになります
指定例）
<p class="marginB10">テキストテキストテキストテキストテキスト<br>
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>

---

マージンが下に20pxのスタイルになります
指定例）
<p class="marginB20">テキストテキストテキストテキストテキスト<br>
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>

---

マージンが上に5pxのスタイルになります
指定例）
<p class="marginT5">テキストテキストテキストテキストテキスト<br>
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>

---

マージンが上に10pxのスタイルになります
指定例）
<p class="marginT10">テキストテキストテキストテキストテキスト<br>
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>

---

マージンが上に20pxのスタイルになります
指定例）
<p class="marginT20">テキストテキストテキストテキストテキスト<br>
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>

---

マージンが右に5pxのスタイルになります
指定例）
<p class="marginR5">テキストテキストテキストテキストテキスト<br>
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>

---

マージンが右に10pxのスタイルになります
指定例）
<p class="marginR10">テキストテキストテキストテキストテキスト<br>
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>

---

マージンが右に20pxのスタイルになります
指定例）
<p class="marginR20">テキストテキストテキストテキストテキスト<br>
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>

---

マージンが左に5pxのスタイルになります
指定例）
<p class="marginL5">テキストテキストテキストテキストテキスト<br>
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>

---

マージンが左に10pxのスタイルになります
指定例）
<p class="marginL10">テキストテキストテキストテキストテキスト<br>
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>

---

マージンが左に20pxのスタイルになります
指定例）
<p class="marginL20">テキストテキストテキストテキストテキスト<br>
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>

引用文を使用する場合、テキストを選択した状態で上部の【メールボタン】右の【引用開始ボタン】を押してください。以下テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
------テキストテキストテキストテキスト

• 箇条書きリストの場合＝【引用開始ボタン】右の【箇条書きリストボタン】
• リスト
• リスト
• リスト
• リスト
• リスト

1. 番号付きリストの場合＝【箇条書きリストボタン】右の【番号付きリストボタン】
2. リスト
3. リスト
4. リスト
5. リスト
6. リスト
7. リスト

テーブルのスタイルになります
テーブルの中でも、各ボタンのスタイルなど指定可能です。

面積	51.4万km2
人口	6351.4万人（2003年）
言語	タイ語
宗教	仏教：95％ イスラム教：4％ キリスト教：1％
出生時の平均余命※1	69歳
HIV感染率※2	1.5% （2003年）
乳児死亡率※1	約24人/出生1,000 約24人/出生1,000
5歳未満児死亡率※1	約28人/出生1,000
妊産婦死亡率※2	約44人/出生10万（2002年）

テーブルの枠線と背景色の非表示スタイルになります。
テーブルに「noBorder」というclassを指定してください。
例）<table class="noBorder"><tbody>〜

面積	51.4万km2
人口	6351.4万人（2003年）
言語	タイ語
宗教	仏教：95％ イスラム教：4％ キリスト教：1％
出生時の平均余命※1	69歳
HIV感染率※2	1.5% （2003年）
乳児死亡率※1	約24人/出生1,000 約24人/出生1,000
5歳未満児死亡率※1	約28人/出生1,000
妊産婦死亡率※2	約44人/出生10万（2002年）

あまり長いテキストの場合、途中で改行を入れるようにしてください。

ブロックの横並びとキャプション

キャプションを付けたい画像をdivで括り、そのdivに対してfloatのclassを付与します。キャプションに関しては classにcaptionを付与します。

画像の左にテキストを回り込ませる場合、画像に「floatR」というclassを指定します。
例）<img class="mt-image-none floatR" src="○○○" ...... />
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

2つ横並び

---

指定例
colTwoというクラスを指定したdivの中に、「boxL」「boxR」とクラスを指定したdivを作ります。
画像の中の数字は推奨の画像サイズです。縦サイズは任意で良いですが、横幅は準拠して下さい。

<div class="colTwo">
<div class="boxL"><img src="画像URL" width="300" height="225"/><p class="caption">キャプション</p></div>
<div class="boxR"><img src="画像URL" width="300" height="225"/><p class="caption">キャプション</p></div>
</div>

---

3つ横並び

---

指定例
colThreeというクラスを指定したdivの中に、「boxL」「boxC」「boxR」とクラスを指定したdivを作ります。
画像の中の数字は推奨の画像サイズです。縦サイズは任意で良いですが、横幅は準拠して下さい。

<div class="colThree">
<div class="boxL"><img src="画像URL"/><p class="caption">キャプション</p></div>
<div class="boxC"><img src="画像URL"/><p class="caption">キャプション</p></div>
<div class="boxR"><img src="画像URL"/><p class="caption">キャプション</p></div>
</div>

---