※クリックすると該当箇所を表示します
■記述方法（例）
| 入力するソース | <h2 class="h2-01-main">タイトル</h2> |
| 表示される記事装飾パーツ | タイトル |
【基本パーツ】H2・H3・ul・ol・文字だけ見出し・引用
■H2見出し
<h2 class="h2-00">H2タイトル</h2>H2タイトル
■H3見出し
<h3 class="h3-00">H3タイトル</h3>H3タイトル
■ulタグ
<ul class="ul-00"><li>リスト</li></ul>- リスト
■olタグ
<ol class="ol-00"><li>リスト</li></ol>- リスト
■文字だけ見出し
<p class="copy">テキストテキストテキスト</p><span class="copy">テキストテキストテキスト</span> ←改行しない場合
<h2 class="copy">テキストテキストテキスト</h2> ←h2でマークアップする場合
<h3 class="copy">テキストテキストテキスト</h3> ←h3でマークアップする場合
テキストテキストテキスト
■引用
<blockquote>テキスト テキスト</blockquote>テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト
【基本パーツ】画像回り込み
画面横幅 670px 以下のタブレット・スマホでは、回り込みは解除されて、自動的に文章の上に中央揃えで画像が表示されます。
■画像左回り込み
<div class="imgl"><img src="画像のURL" alt="" /></div>テキスト<div class="clear"></div>
※ <div class="imgl2">にすると常に回り込みします。小さい画像サイズのときにお使いください
■画像右回り込み
<div class="imgr"><img src="画像のURL" alt="" /></div>テキスト<div class="clear"></div>
※ <div class="imgr2">にすると常に回り込みします。小さい画像サイズのときにお使いください
【基本パーツ】テーブル
※見出しの背景色を変更できます → 記事装飾パーツのカラー変更
- table-00 → table-01 にすると行の背景色が全て白色になります
- margin: 0; → margin: 0 auto; にするとテーブルが中央揃えになります
- width: auto; → width: 100%; にするとテーブルが記事の横幅いっぱいに広がります
- 分かりやすいようにソースを改行していますが、記事に入れるときは、改行せずに詰めてください
ソース内に改行があるとテーブルの上に余白ができてしまいます
■上に見出しあり
<table class="table-00" style="margin:0;width:auto;"> <tbody> <tr><th>項目１</th><th>項目２</th></tr> <tr><td>１</td><td>１０</td></tr> <tr><td>２</td><td>２０</td></tr> <tr><td>３</td><td>３０</td></tr> </tbody> </table>
| 項目１ | 項目２ |
|---|---|
| １ | １０ |
| ２ | ２０ |
| ３ | ３０ |
■横に見出しあり
<table class="table-00" style="margin:0; width:auto;"> <tbody> <tr><th>項目１</th><td>１</td><td>１０</td><td>１００</td></tr> <tr><th>項目２</th><td>２</td><td>２０</td><td>２００</td></tr> </tbody> </table>
| 項目１ | １ | １０ | １００ |
|---|---|---|---|
| 項目２ | ２ | ２０ | ２００ |
■上と横に見出しあり
<table class="table-00" style="margin:0; width:auto;"> <tbody> <tr><th>項目</th><th>項目１</th><th>項目２</th><th>項目３</th></tr> <tr><th>メニュー１</th><td>１</td><td>１０</td><td>２００</td></tr> <tr><th>メニュー２</th><td>２</td><td>２０</td><td>２００</td></tr> </tbody> </table>
| 項目 | 項目１ | 項目２ | 項目３ |
|---|---|---|---|
| メニュー１ | １ | １０ | ２００ |
| メニュー２ | ２ | ２０ | ２００ |
■見出し無し
<table class="table-00" style="margin:0; width:auto;"> <tbody> <tr><td>１</td><td>１０</td></tr> <tr><td>２</td><td>２０</td></tr> <tr><td>３</td><td>３０</td></tr> </tbody> </table>
| １ | １０ |
| ２ | ２０ |
| ３ | ３０ |
【基本パーツ】ボックス
■スタイル1
<div class="box-01">テキスト</div>テキスト
■スタイル2
<div class="box-02">テキスト</div>テキスト
■スタイル3
<div class="box-03">テキスト</div>テキスト
■スタイル4
<div class="box-04">テキスト</div>テキスト
※応用
次の記述にすると横幅を指定することができます。下記例は最大横幅500pxにする場合。画面が狭いときは自動調整されて幅内に収まります。
<div class="box-02" style="max-width:500px">テキスト</div>
テキスト
【追加パーツ】H2 タグ
※5種類のデザインで各10色(内1色はお好きな色に変更可能) → 記事装飾パーツのカラー変更
※次のように記述してpタグでも利用できます。<p class="h2-01-main">タイトル</p>
■スタイル1
<h2 class="h2-01-main">タイトル</h2> ← 色変更可能タイトル
<h2 class="h2-01-blue">タイトル</h2>
タイトル
<h2 class="h2-01-navy">タイトル</h2>
タイトル
<h2 class="h2-01-red">タイトル</h2>
タイトル
<h2 class="h2-01-green">タイトル</h2>
タイトル
<h2 class="h2-01-orange">タイトル</h2>
タイトル
<h2 class="h2-01-purple">タイトル</h2>
タイトル
<h2 class="h2-01-pink">タイトル</h2>
タイトル
<h2 class="h2-01-black">タイトル</h2>
タイトル
<h2 class="h2-01-glay">タイトル</h2>
タイトル
■スタイル2
<h2 class="h2-02-main">タイトル</h2> ← 色変更可能タイトル
<h2 class="h2-02-blue">タイトル</h2>
タイトル
<h2 class="h2-02-navy">タイトル</h2>
タイトル
<h2 class="h2-02-red">タイトル</h2>
タイトル
<h2 class="h2-02-green">タイトル</h2>
タイトル
<h2 class="h2-02-orange">タイトル</h2>
タイトル
<h2 class="h2-02-purple">タイトル</h2>
タイトル
<h2 class="h2-02-pink">タイトル</h2>
タイトル
<h2 class="h2-02-black">タイトル</h2>
タイトル
<h2 class="h2-02-glay">タイトル</h2>
タイトル
■スタイル3
<h2 class="h2-03-main">タイトル</h2> ← 色変更可能タイトル
<h2 class="h2-03-blue">タイトル</h2>
タイトル
<h2 class="h2-03-navy">タイトル</h2>
タイトル
<h2 class="h2-03-red">タイトル</h2>
タイトル
<h2 class="h2-03-green">タイトル</h2>
タイトル
<h2 class="h2-03-orange">タイトル</h2>
タイトル
<h2 class="h2-03-purple">タイトル</h2>
タイトル
<h2 class="h2-03-pink">タイトル</h2>
タイトル
<h2 class="h2-03-black">タイトル</h2>
タイトル
<h2 class="h2-03-glay">タイトル</h2>
タイトル
■スタイル4
<h2 class="h2-04-main">タイトル</h2> ← 色変更可能タイトル
<h2 class="h2-04-blue">タイトル</h2>
タイトル
<h2 class="h2-04-navy">タイトル</h2>
タイトル
<h2 class="h2-04-red">タイトル</h2>
タイトル
<h2 class="h2-04-green">タイトル</h2>
タイトル
<h2 class="h2-04-orange">タイトル</h2>
タイトル
<h2 class="h2-04-purple">タイトル</h2>
タイトル
<h2 class="h2-04-pink">タイトル</h2>
タイトル
<h2 class="h2-04-black">タイトル</h2>
タイトル
<h2 class="h2-04-glay">タイトル</h2>
タイトル
■スタイル5
<h2 class="h2-05-main">タイトル</h2> ← 色変更可能タイトル
<h2 class="h2-05-blue">タイトル</h2>
タイトル
<h2 class="h2-05-navy">タイトル</h2>
タイトル
<h2 class="h2-05-red">タイトル</h2>
タイトル
<h2 class="h2-05-green">タイトル</h2>
タイトル
<h2 class="h2-05-orange">タイトル</h2>
タイトル
<h2 class="h2-05-purple">タイトル</h2>
タイトル
<h2 class="h2-05-pink">タイトル</h2>
タイトル
<h2 class="h2-05-black">タイトル</h2>
タイトル
<h2 class="h2-05-glay">タイトル</h2>
タイトル
【追加パーツ】H3 タグ
※7種類のデザインで各10色(内1色はお好きな色に変更可能) → 記事装飾パーツのカラー変更
※次のように記述してpタグでも利用できます。<p class="h3-01-main">タイトル</p>
■スタイル1
<h3 class="h3-01-main">タイトル</h3> ← 色変更可能タイトル
<h3 class="h3-01-blue">タイトル</h3>
タイトル
<h3 class="h3-01-navy">タイトル</h3>
タイトル
<h3 class="h3-01-red">タイトル</h3>
タイトル
<h3 class="h3-01-green">タイトル</h3>
タイトル
<h3 class="h3-01-orange">タイトル</h3>
タイトル
<h3 class="h3-01-purple">タイトル</h3>
タイトル
<h3 class="h3-01-pink">タイトル</h3>
タイトル
<h3 class="h3-01-black">タイトル</h3>
タイトル
<h3 class="h3-01-glay">タイトル</h3>
タイトル
■スタイル2
<h3 class="h3-02-main">タイトル</h3> ← 色変更可能タイトル
<h3 class="h3-02-blue">タイトル</h3>
タイトル
<h3 class="h3-02-navy">タイトル</h3>
タイトル
<h3 class="h3-02-red">タイトル</h3>
タイトル
<h3 class="h3-02-green">タイトル</h3>
タイトル
<h3 class="h3-02-orange">タイトル</h3>
タイトル
<h3 class="h3-02-purple">タイトル</h3>
タイトル
<h3 class="h3-02-pink">タイトル</h3>
タイトル
<h3 class="h3-02-black">タイトル</h3>
タイトル
<h3 class="h3-02-glay">タイトル</h3>
タイトル
■スタイル3
<h3 class="h3-03-main">タイトル</h3> ← 色変更可能タイトル
<h3 class="h3-03-blue">タイトル</h3>
タイトル
<h3 class="h3-03-navy">タイトル</h3>
タイトル
<h3 class="h3-03-red">タイトル</h3>
タイトル
<h3 class="h3-03-green">タイトル</h3>
タイトル
<h3 class="h3-03-orange">タイトル</h3>
タイトル
<h3 class="h3-03-purple">タイトル</h3>
タイトル
<h3 class="h3-03-pink">タイトル</h3>
タイトル
<h3 class="h3-03-black">タイトル</h3>
タイトル
<h3 class="h3-03-glay">タイトル</h3>
タイトル
■スタイル4
<h3 class="h3-04-main">タイトル</h3> ← 色変更可能タイトル
<h3 class="h3-04-blue">タイトル</h3>
タイトル
<h3 class="h3-04-navy">タイトル</h3>
タイトル
<h3 class="h3-04-red">タイトル</h3>
タイトル
<h3 class="h3-04-green">タイトル</h3>
タイトル
<h3 class="h3-04-orange">タイトル</h3>
タイトル
<h3 class="h3-04-purple">タイトル</h3>
タイトル
<h3 class="h3-04-pink">タイトル</h3>
タイトル
<h3 class="h3-04-black">タイトル</h3>
タイトル
<h3 class="h3-04-glay">タイトル</h3>
タイトル
■スタイル5
<h3 class="h3-05-main">タイトル</h3> ← 色変更可能タイトル
<h3 class="h3-05-blue">タイトル</h3>
タイトル
<h3 class="h3-05-navy">タイトル</h3>
タイトル
<h3 class="h3-05-red">タイトル</h3>
タイトル
<h3 class="h3-05-green">タイトル</h3>
タイトル
<h3 class="h3-05-orange">タイトル</h3>
タイトル
<h3 class="h3-05-purple">タイトル</h3>
タイトル
<h3 class="h3-05-pink">タイトル</h3>
タイトル
<h3 class="h3-05-black">タイトル</h3>
タイトル
<h3 class="h3-05-glay">タイトル</h3>
タイトル
■スタイル6
<h3 class="h3-06-main">タイトル</h3> ← 色変更可能タイトル
<h3 class="h3-06-blue">タイトル</h3>
タイトル
<h3 class="h3-06-navy">タイトル</h3>
タイトル
<h3 class="h3-06-red">タイトル</h3>
タイトル
<h3 class="h3-06-green">タイトル</h3>
タイトル
<h3 class="h3-06-orange">タイトル</h3>
タイトル
<h3 class="h3-06-purple">タイトル</h3>
タイトル
<h3 class="h3-06-pink">タイトル</h3>
タイトル
<h3 class="h3-06-black">タイトル</h3>
タイトル
<h3 class="h3-06-glay">タイトル</h3>
タイトル
■スタイル7
<h3 class="h3-07-main">タイトル</h3> ← 色変更可能タイトル
<h3 class="h3-07-blue">タイトル</h3>
タイトル
<h3 class="h3-07-navy">タイトル</h3>
タイトル
<h3 class="h3-07-red">タイトル</h3>
タイトル
<h3 class="h3-07-green">タイトル</h3>
タイトル
<h3 class="h3-07-orange">タイトル</h3>
タイトル
<h3 class="h3-07-purple">タイトル</h3>
タイトル
<h3 class="h3-07-pink">タイトル</h3>
タイトル
<h3 class="h3-07-black">タイトル</h3>
タイトル
<h3 class="h3-07-glay">タイトル</h3>
タイトル
【追加パーツ】ul タグ（番号なしリスト）
※5種類のデザインで各10色(内1色はお好きな色に変更可能) → 記事装飾パーツのカラー変更
■スタイル1
<ul class="ul-01-main"><li>リスト</li></ul> ← 色変更可能- リスト
<ul class="ul-01-blue"><li>リスト</li></ul>
- リスト
<ul class="ul-01-navy"><li>リスト</li></ul>
- リスト
<ul class="ul-01-red"><li>リスト</li></ul>
- リスト
<ul class="ul-01-green"><li>リスト</li></ul>
- リスト
<ul class="ul-01-orange"><li>リスト</li></ul>
- リスト
<ul class="ul-01-purple"><li>リスト</li></ul>
- リスト
<ul class="ul-01-pink"><li>リスト</li></ul>
- リスト
<ul class="ul-01-black"><li>リスト</li></ul>
- リスト
<ul class="ul-01-glay"><li>リスト</li></ul>
- リスト
■スタイル2
<ul class="ul-02-main"><li>リスト</li></ul> ← 色変更可能- リスト
<ul class="ul-02-blue"><li>リスト</li></ul>
- リスト
<ul class="ul-02-navy"><li>リスト</li></ul>
- リスト
<ul class="ul-02-red"><li>リスト</li></ul>
- リスト
<ul class="ul-02-green"><li>リスト</li></ul>
- リスト
<ul class="ul-02-orange"><li>リスト</li></ul>
- リスト
<ul class="ul-02-purple"><li>リスト</li></ul>
- リスト
<ul class="ul-02-pink"><li>リスト</li></ul>
- リスト
<ul class="ul-02-black"><li>リスト</li></ul>
- リスト
<ul class="ul-02-glay"><li>リスト</li></ul>
- リスト
■スタイル3
<ul class="ul-03-main"><li>リスト</li></ul> ← 色変更可能- リスト
<ul class="ul-03-blue"><li>リスト</li></ul>
- リスト
<ul class="ul-03-navy"><li>リスト</li></ul>
- リスト
<ul class="ul-03-red"><li>リスト</li></ul>
- リスト
<ul class="ul-03-green"><li>リスト</li></ul>
- リスト
<ul class="ul-03-orange"><li>リスト</li></ul>
- リスト
<ul class="ul-03-purple"><li>リスト</li></ul>
- リスト
<ul class="ul-03-pink"><li>リスト</li></ul>
- リスト
<ul class="ul-03-black"><li>リスト</li></ul>
- リスト
<ul class="ul-03-glay"><li>リスト</li></ul>
- リスト
■スタイル4
<ul class="ul-04-main"><li>リスト</li></ul> ← 色変更可能- リスト
<ul class="ul-04-blue"><li>リスト</li></ul>
- リスト
<ul class="ul-04-navy"><li>リスト</li></ul>
- リスト
<ul class="ul-04-red"><li>リスト</li></ul>
- リスト
<ul class="ul-04-green"><li>リスト</li></ul>
- リスト
<ul class="ul-04-orange"><li>リスト</li></ul>
- リスト
<ul class="ul-04-purple"><li>リスト</li></ul>
- リスト
<ul class="ul-04-pink"><li>リスト</li></ul>
- リスト
<ul class="ul-04-black"><li>リスト</li></ul>
- リスト
<ul class="ul-04-glay"><li>リスト</li></ul>
- リスト
■スタイル5
<ul class="ul-05-main"><li>リスト</li></ul> ← 色変更可能- リスト
<ul class="ul-05-blue"><li>リスト</li></ul>
- リスト
<ul class="ul-05-navy"><li>リスト</li></ul>
- リスト
<ul class="ul-05-red"><li>リスト</li></ul>
- リスト
<ul class="ul-05-green"><li>リスト</li></ul>
- リスト
<ul class="ul-05-orange"><li>リスト</li></ul>
- リスト
<ul class="ul-05-purple"><li>リスト</li></ul>
- リスト
<ul class="ul-05-pink"><li>リスト</li></ul>
- リスト
<ul class="ul-05-black"><li>リスト</li></ul>
- リスト
<ul class="ul-05-glay"><li>リスト</li></ul>
- リスト
【追加パーツ】ol タグ（番号ありリスト）
※4種類のデザインで各10色(内1色はお好きな色に変更可能) → 記事装飾パーツのカラー変更
■スタイル1
<ol class="ol-01-main"><li>リスト</li></ol> ← 色変更可能- リスト
<ol class="ol-01-blue"><li>リスト</li></ol>
- リスト
<ol class="ol-01-navy"><li>リスト</li></ol>
- リスト
<ol class="ol-01-red"><li>リスト</li></ol>
- リスト
<ol class="ol-01-green"><li>リスト</li></ol>
- リスト
<ol class="ol-01-orange"><li>リスト</li></ol>
- リスト
<ol class="ol-01-purple"><li>リスト</li></ol>
- リスト
<ol class="ol-01-pink"><li>リスト</li></ol>
- リスト
<ol class="ol-01-black"><li>リスト</li></ol>
- リスト
<ol class="ol-01-glay"><li>リスト</li></ol>
- リスト
■スタイル2
<ol class="ol-02-main"><li>リスト</li></ol> ← 色変更可能- リスト
<ol class="ol-02-blue"><li>リスト</li></ol>
- リスト
<ol class="ol-02-navy"><li>リスト</li></ol>
- リスト
<ol class="ol-02-red"><li>リスト</li></ol>
- リスト
<ol class="ol-02-green"><li>リスト</li></ol>
- リスト
<ol class="ol-02-orange"><li>リスト</li></ol>
- リスト
<ol class="ol-02-purple"><li>リスト</li></ol>
- リスト
<ol class="ol-02-pink"><li>リスト</li></ol>
- リスト
<ol class="ol-02-black"><li>リスト</li></ol>
- リスト
<ol class="ol-02-glay"><li>リスト</li></ol>
- リスト
■スタイル3
<ol class="ol-03-main"><li>リスト</li></ol> ← 色変更可能- リスト
<ol class="ol-03-blue"><li>リスト</li></ol>
- リスト
<ol class="ol-03-navy"><li>リスト</li></ol>
- リスト
<ol class="ol-03-red"><li>リスト</li></ol>
- リスト
<ol class="ol-03-green"><li>リスト</li></ol>
- リスト
<ol class="ol-03-orange"><li>リスト</li></ol>
- リスト
<ol class="ol-03-purple"><li>リスト</li></ol>
- リスト
<ol class="ol-03-pink"><li>リスト</li></ol>
- リスト
<ol class="ol-03-black"><li>リスト</li></ol>
- リスト
<ol class="ol-03-glay"><li>リスト</li></ol>
- リスト
■スタイル4
<ol class="ol-04-main"><li>リスト</li></ol> ← 色変更可能- リスト
<ol class="ol-04-blue"><li>リスト</li></ol>
- リスト
<ol class="ol-04-navy"><li>リスト</li></ol>
- リスト
<ol class="ol-04-red"><li>リスト</li></ol>
- リスト
<ol class="ol-04-green"><li>リスト</li></ol>
- リスト
<ol class="ol-04-orange"><li>リスト</li></ol>
- リスト
<ol class="ol-04-purple"><li>リスト</li></ol>
- リスト
<ol class="ol-04-pink"><li>リスト</li></ol>
- リスト
<ol class="ol-04-black"><li>リスト</li></ol>
- リスト
<ol class="ol-04-glay"><li>リスト</li></ol>
- リスト
【追加パーツ】パーツ
※5種類のデザインで各10色(内1色はお好きな色に変更可能) → 記事装飾パーツのカラー変更
■スタイル1
文字数で横幅が自動変更されます。続けて文章を書いた時は回り込みになります。
ポイント１テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト<span class="parts-01-main">ポイント１</span> ← 色変更可能
ポイント１
<span class="parts-01-blue">ポイント１</span>
ポイント１
<span class="parts-01-navy">ポイント１</span>
ポイント１
<span class="parts-01-red">ポイント１</span>
ポイント１
<span class="parts-01-green">ポイント１</span>
ポイント１
<span class="parts-01-orange">ポイント１</span>
ポイント１
<span class="parts-01-purple">ポイント１</span>
ポイント１
<span class="parts-01-pink">ポイント１</span>
ポイント１
<span class="parts-01-black">ポイント１</span>
ポイント１
<span class="parts-01-glay">ポイント１</span>
ポイント１
※応用
次のように p タグでの記述もできます。
<p class="parts-01-glay" style="margin:0;">ポイント１</p>
ポイント１
■スタイル2
文字数で横幅が自動変更されます。続けて文章を書いた時は回り込みになります。
ポイント１テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト<span class="parts-02-main">ポイント１</span> ← 色変更可能
ポイント１
<span class="parts-02-blue">ポイント１</span>
ポイント１
<span class="parts-02-navy">ポイント１</span>
ポイント１
<span class="parts-02-red">ポイント１</span>
ポイント１
<span class="parts-02-green">ポイント１</span>
ポイント１
<span class="parts-02-orange">ポイント１</span>
ポイント１
<span class="parts-02-purple">ポイント１</span>
ポイント１
<span class="parts-02-pink">ポイント１</span>
ポイント１
<span class="parts-02-black">ポイント１</span>
ポイント１
<span class="parts-02-glay">ポイント１</span>
ポイント１
※応用
次のように p タグでの記述もできます。
<p class="parts-02-glay" style="margin:0;">ポイント１</p>
ポイント１
■スタイル3
左寄せのパーツで横100pxで固定設定。文字数が多い時は文字を折り返し自動で縦に伸びます。続けて文章を書いた時は改行されます。
ポイント１
テキスト テキスト テキスト テキスト テキストテキスト テキスト テキスト テキスト テキスト テキスト テキスト<p class="parts-03-main">ポイント１</p> ← 色変更可能
ポイント１
<p class="parts-03-blue">ポイント１</p>
ポイント１
<p class="parts-03-navy">ポイント１</p>
ポイント１
<p class="parts-03-red">ポイント１</p>
ポイント１
<p class="parts-03-green">ポイント１</p>
ポイント１
<p class="parts-03-orange">ポイント１</p>
ポイント１
<p class="parts-03-purple">ポイント１</p>
ポイント１
<p class="parts-03-pink">ポイント１</p>
ポイント１
<p class="parts-03-black">ポイント１</p>
ポイント１
<p class="parts-03-glay">ポイント１</p>
ポイント１
※文字数が多い時は文字を折り返し自動で縦に伸びます。
ポイント１ポイント１
※応用１
下記の記述にするとパーツと文章を横並びにできます。ポイント１
テキスト
ポイント１
テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト
※応用２
下記の記述にするとパーツに文章を回り込みできます。テキストポイント１
ポイント１
■スタイル4
左寄せのパーツで横100pxで固定設定。文字数が多い時は文字を折り返し自動で縦に伸びます。続けて文章を書いた時は改行されます。
ポイント１
テキスト テキスト テキスト テキスト テキストテキスト テキスト テキスト テキスト テキスト テキスト テキスト<p class="parts-04-main">ポイント１</p> ← 色変更可能
ポイント１
<p class="parts-04-blue">ポイント１</p>
ポイント１
<p class="parts-04-navy">ポイント１</p>
ポイント１
<p class="parts-04-red">ポイント１</p>
ポイント１
<p class="parts-04-green">ポイント１</p>
ポイント１
<p class="parts-04-orange">ポイント１</p>
ポイント１
<p class="parts-04-purple">ポイント１</p>
ポイント１
<p class="parts-04-pink">ポイント１</p>
ポイント１
<p class="parts-04-black">ポイント１</p>
ポイント１
<p class="parts-04-glay">ポイント１</p>
ポイント１
※文字数が多い時は文字を折り返し自動で縦に伸びます。
ポイント１ポイント１
※応用１
下記の記述にするとパーツと文章を横並びにできます。ポイント１
テキスト
ポイント１
テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト
※応用２
下記の記述にするとパーツに文章を回り込みできます。テキスト テキスト テキストポイント１
ポイント１
■スタイル5
左寄せのパーツで横40px縦40pxの固定設定。文字数が多い時は文字を折り返しますがはみ出ます。
<p class="parts-05-main">特典１</p> ← 色変更可能
特典１
<p class="parts-05-blue">特典１</p>
特典１
<p class="parts-05-navy">特典１</p>
特典１
<p class="parts-05-red">特典１</p>
特典１
<p class="parts-05-green">特典１</p>
特典１
<p class="parts-05-orange">特典１</p>
特典１
<p class="parts-05-purple">特典１</p>
特典１
<p class="parts-05-pink">特典１</p>
特典１
<p class="parts-05-black">特典１</p>
特典１
<p class="parts-05-glay">特典１</p>
特典１
※文字数が多い時は文字を折り返しますがはみ出ます。
テキストテキ
※応用１
下記の記述にするとパーツと文章を横並びにできます。
特典１
テキスト
特典１
テキストテキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト
※応用２
次の記述にするとパーツに文章を回り込みできます。
テキスト テキスト テキスト特典１
特典１