追加タグのコード一覧

[list class="li-chevron"]
〜箇条書き〜
[/list]

<span class="points">文字を入れる</span>

<span class="points p-red">文字を入れる</span>

<span class="points p-orange">文字を入れる</span>

<span class="points p-green">文字を入れる</span>

<span class="points p-blue">文字を入れる</span>

<span class="points p-custom">文字を入れる</span>

/*カスタマイズ用*/
.points.p-custom {background: #CE93D8;/*吹き出しの色*/}
.points.p-custom:before{border-top: 10px solid #CE93D8;/*吹き出しの色*/}

<div class="kanren">
<ul>
 	<li>リストタグを利用したら</li>
 	<li>チェックアイコンが出てくる</li>
</ul>
</div>

<div class="kanren">リストタグ無しバージョン</div>

<div class="kanren p-red">
<ul>
 	<li>リストタグを利用したら</li>
 	<li>チェックアイコンが出てくる</li>
</ul>
</div>

<div class="kanren p-orange">
<ul>
 	<li>リストタグを利用したら</li>
 	<li>チェックアイコンが出てくる</li>
</ul>
</div>

<div class="kanren p-green">
<ul>
 	<li>リストタグを利用したら</li>
 	<li>チェックアイコンが出てくる</li>
</ul>
</div>

<div class="kanren p-blue">
<ul>
 	<li>リストタグを利用したら</li>
 	<li>チェックアイコンが出てくる</li>
</ul>
</div>

<div class="kanren p-custom">
<ul>
 	<li>リストタグを利用したら</li>
 	<li>チェックアイコンが出てくる</li>
</ul>
</div>

/*カスタマイズ用*/
.kanren.p-custom{border: 2px solid #E1BEE7;/*枠線の色*/}
.kanren.p-custom:before{background-color: #CE93D8;/*吹き出しの色*/}
.kanren.p-custom:after{border-top: 12px solid #CE93D8;/*吹き出しの色*/}
.kanren.p-custom ul li:before {color: #CE93D8;/*吹き出しの色*/}

<div class="p-box">
<span class="p-box-title">必要なもの</span>
<p><ul>
       <li>おすすめしたい記事のページID</li>
       <li>表示したいタイトル</li>
</ul></p>
</div>

<div class="p-box">
<span class="p-box-title">必要なもの</span>
<p>リストタグ無しバージョン</p>
</div>

<div class="p-box p-red">
<span class="p-box-title">必要なもの</span>
<p><ul>
       <li>おすすめしたい記事のページID</li>
       <li>表示したいタイトル</li>
</ul></p>
</div>

<div class="p-box p-orange">
<span class="p-box-title">必要なもの</span>
<p><ul>
       <li>おすすめしたい記事のページID</li>
       <li>表示したいタイトル</li>
</ul></p>
</div>

<div class="p-box p-green">
<span class="p-box-title">必要なもの</span>
<p><ul>
       <li>おすすめしたい記事のページID</li>
       <li>表示したいタイトル</li>
</ul></p>
</div>

<div class="p-box p-blue">
<span class="p-box-title">必要なもの</span>
<p><ul>
       <li>おすすめしたい記事のページID</li>
       <li>表示したいタイトル</li>
</ul></p>
</div>

<div class="p-box p-custom">
<span class="p-box-title">必要なもの</span>
<p><ul>
       <li>おすすめしたい記事のページID</li>
       <li>表示したいタイトル</li>
</ul></p>
</div>

/*カスタマイズ用*/
.p-box.p-custom{border: 2px solid #E1BEE7;/*枠線の色*/}
div.p-box.p-custom .p-box-title{background-color: #CE93D8;/*吹き出しの色*/}
div.p-box.p-custom .p-box-title:after{border-top: 12px solid #CE93D8;/*吹き出しの色*/}
.p-box.p-custom ul li:before {color: #CE93D8;/*チェックの色*/}

[note title="タイトル"]テキスト[/note]

[safe title="タイトル"]テキスト[/safe]