記事エリアの横幅は696pxです。
画像には自動的に上下に5pxのマージンと、外枠に1pxの線が入ります。
掲載できる画像サイズは外枠線を含めない、694pxまでとなります。
画像に「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>
引用文を使用する場合、テキストを選択した状態で上部の【メールボタン】右の【引用開始ボタン】を押してください。以下テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
------テキストテキストテキストテキスト
- 箇条書きリストの場合=【引用開始ボタン】右の【箇条書きリストボタン】
- リスト
- リスト
- リスト
- リスト
- リスト
- 番号付きリストの場合=【箇条書きリストボタン】右の【番号付きリストボタン】
- リスト
- リスト
- リスト
- リスト
- リスト
- リスト
左寄せテキストの場合=【番号付きリストボタン】右の【テキスト左揃えボタン】
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキスト
中央寄せテキストの場合=【テキスト左揃えボタン】右の【テキスト中央揃えボタン】
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキスト
右寄せテキストの場合=【テキスト中央揃えボタン】右の【テキスト右揃えボタン】
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキスト
テーブルのスタイルになります
テーブルの中でも、各ボタンのスタイルなど指定可能です。
面積 |
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年) |
<h5>サブタイトルが入ります</h5>
<h6>見出しが入ります</h6>
外枠線のついたブロックを使用してコンテンツを掲載することが可能です。
その場合、
<div class="subBoxL"><div>でくくってください。
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
<h5>サブタイトルが入ります</h5>
さらにブロックで区切る場合、
<div class="subBoxM"></div>でくくってください。
その中で使用する<h5>のサブタイトルは通常とスタイルが異なります。
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
さらに区切る場合、<div class="subBoxS"></div>でくくってください。
それぞれ、必ず大きいブロックの中でないと使用できないものではないので、
個別に使用することも可能です。
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
あまり長いテキストの場合、途中で改行を入れるようにしてください。
ブロックの横並びとキャプション
キャプション
キャプションを付けたい画像を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>