module WP template HTMLs
編集の「Lead Text」に記入のこと
本文系サンプル
見出しh1
<h1>見出しh1</h1>見出しh2
<h2>見出しh2</h2>見出しh2 color4
<h2 class="color4">見出しh2</h2>見出しh2 color5
<h2 class="color5">見出しh2</h2>見出しh2 左
<h2 class="text-left">見出しh2</h2>罫線
<hr>見出しh3
<h3>見出しh3</h3>見出しh3 color4
<h3 class="color4">見出しh3</h3>見出しh3 color5
<h3 class="color5">見出しh3</h3>罫線
<hr>見出しh4
<h4>見出しh4</h4>見出しh4 color4
<h4 class="color4">見出しh4</h4>見出しh4 color5
<h4 class="color5">見出しh4</h4>見出しh4 black 20px
<h4 class="black font-20">見出しh4</h4>罫線
<hr>見出しh5
<h5>見出しh5</h5>見出しh6
<h6>見出しh6</h6>強調例
強調テキスト 強調テキスト 強調テキスト強調テキスト 強調テキスト 強調テキスト
<div class="p-10 px_pink px_bold bg-6 a_br5 mt-20">
<h5><i class="fas fa-exclamation-circle"></i> 強調テキスト 強調テキスト 強調テキスト強調テキスト 強調テキスト 強調テキスト</h5></div>強調テキスト強調テキスト 強調テキスト 強調テキスト
<div class="p-10 px_pink px_bold a_Tcenter bg-6 a_br5">強調テキスト 強調テキスト 強調テキスト強調テキスト 強調テキスト <br> 強調テキスト強調テキスト 強調テキスト 強調テキスト</div>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
<h5>
<i class="fas fa-comment-dots"></i> テキストテキストテキストテキスストテキストテキストテキスト<span class="px_cha">テキストテキストテキストテキストテキストテキストテキストテキストテスト</span>テストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
</h5>キャプション例
※1.キャプションテキストキャプションテキスト
キャプションテキストキャプションテキストキャプションテキストキャプションテキスト
（
URLlink.pdf）
※2.キャプションテキストキャプションテキスト
キャプションテキストキャプションテキストキャプションテキストキャプションテキスト
（ URLlink.pdf）
※3.キャプションテキストキャプションテキスト
キャプションテキストキャプションテキストキャプションテキストキャプションテキスト
（ URLlink.pdf）
<p class="font-12 mt-10">※1.キャプションテキストキャプションテキスト<br>
キャプションテキストキャプションテキストキャプションテキストキャプションテキスト<br>
（<img src="/images/common/icon_pdf_small.gif" alt="PDF資料を別ウインドウで開きます" width="17" height="17" class="icon"> <a href="/" target="_blank">URLlink.pdf</a>）
</p>リスト例
- リストテキスト リストテキスト
- リストテキスト リストテキスト
- リストテキスト リストテキスト
<ul class="list title font-weight-bold">
<li>リストテキスト リストテキスト</li>
<li>リストテキスト リストテキスト</li>
<li>リストテキスト リストテキスト</li>
</ul>- リストテキスト リストテキスト
- リストテキスト リストテキスト
- リストテキスト リストテキスト
<ul class="list font-weight-bold font-20">
<li>リストテキスト リストテキスト</li>
<li>リストテキスト リストテキスト</li>
<li>リストテキスト リストテキスト</li>
</ul>Lists
- リストテキスト リストテキスト
- リストテキスト リストテキスト
- リストテキスト リストテキスト
- リストテキスト リストテキスト
- リストテキスト リストテキスト
- リストテキスト リストテキスト
- リストテキスト リストテキスト
- リストテキスト リストテキスト
- リストテキスト リストテキスト
- リストテキスト リストテキスト
- リストテキスト リストテキスト
- リストテキスト リストテキスト
- リストテキスト リストテキスト
- リストテキスト リストテキスト
- リストテキスト リストテキスト
- リストテキスト リストテキスト
- リストテキスト リストテキスト
- リストテキスト リストテキスト
- リストテキスト リストテキスト
- リストテキスト リストテキスト
- リストテキスト リストテキスト
- リストテキスト リストテキスト
- リストテキスト リストテキスト
- リストテキスト リストテキスト
<ul class="list">
<li>リストテキスト リストテキスト</li>
</ul>
<ul class="list title theme-colored angle-double-right">
<li>リストテキスト リストテキスト</li>
</ul>
<ul class="list theme-colored check">
<li>リストテキスト リストテキスト</li>
</ul>回り込み例
回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト
回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト
回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト
回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト
回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト
<div class="clf"><img class="float-right pl-10" src="https://placehold.it/350x250" alt="">
<p>回り込みテキスト<strong>回り込みテキスト</strong>回り込みテキスト回り込みテキスト</p>
<p><strong>回り込みテキスト</strong>回り込みテキスト<strong>回り込みテキスト</strong>回り込みテキスト回り込みテキスト</p>
<p>回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト</p>
<p>回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト</p>
<p>回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト</p>
</div>回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト
回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト
回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト
回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト
回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト
回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト
表組み例
| 表組み th Kなし 2列 スマホ時上下 | 表組みテキスト class=”box_0″ |
|---|---|
| 表組み th | 表組みテキスト |
| 表組み th | 表組みテキスト |
<table summary="summary" cellpadding="0" cellspacing="0" class="box_0">
<colgroup>
<col width="30%">
<col width="70%">
</colgroup>
<tr>
<th>表組み th</th>
<td>表組みテキスト class="box_0"</td>
</tr>
<tr>
<th>表組み th</th>
<td>表組みテキスト</td>
</tr>
<tr>
<th>表組み th</th>
<td>表組みテキスト</td>
</tr>
</table>| 表組み th 2列 スマホ時上下 | 表組みテキスト class=”box_1″ |
|---|---|
| 表組み th | 表組みテキスト |
<table summary="summary" cellpadding="0" cellspacing="0" class="box_1">
<colgroup>
<col width="30%">
<col width="70%">
</colgroup>
<tr>
<th>表組み th</th>
<td>表組みテキスト class="box_1"</td>
</tr>
<tr>
<th>表組み th</th>
<td>表組みテキスト</td>
</tr>
</table>| 表組み th n列 スマホ時 形維持 | 表組み th | 表組み th |
|---|---|---|
| 表組み th | 表組みテキスト class=”box_2″ | 表組みテキスト 表組みテキスト |
| 表組み th | 表組みテキスト | 表組みテキスト 表組みテキスト |
| 表組み th | 表組みテキスト | 表組みテキスト 表組みテキスト |
<table summary="summary" cellpadding="0" cellspacing="0" class="box_2">
<colgroup>
<col width="20%">
<col width="40%">
<col width="40%">
</colgroup>
<tr>
<th>表組み th</th>
<th>表組み th</th>
<th>表組み th</th>
</tr>
<tr>
<th>表組み th</th>
<td>表組みテキスト</td>
<td>表組みテキスト表組みテキスト</td>
</tr>
<tr>
<th>表組み th</th>
<td>表組みテキスト</td>
<td>表組みテキスト表組みテキスト</td>
</tr>
<tr>
<th>表組み th</th>
<td>表組みテキスト</td>
<td>表組みテキスト表組みテキスト</td>
</tr>
</table>本文例
テキスト本文タイトル〈h5〉+ .font-20 + .pt-10
<h5 class="font-20 pt-10">テキスト本文タイトル〈h5〉+ .font-20 + .pt-10</h5>あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ
<p>あああああああああああああ</p>テキスト本文タイトル〈h5〉+ .mt-50
<h5 class="mt-50">テキスト本文タイトル〈h5〉+ .mt-50</h5>いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい
<p>いいいいいいいいいいいい</p>色(背景は bg-)〈p class=”color-1″〉うううううううううううううううううううううううううううううううううううううううう
<p class="color-1">うううううううううう</p>色(背景は bg-)〈p class=”color-2″〉うううううううううううううううううううううううううううううううううううううううう
<p class="color-2">うううううううううう</p>色(背景は bg-)〈p class=”color-3″〉うううううううううううううううううううううううううううううううううううううううう
<p class="color-3">うううううううううう</p>色(背景は bg-)〈p class=”color-4″〉うううううううううううううううううううううううううううううううううううううううう
<p class="color-4">うううううううううう</p>色(背景は bg-)〈p class=”color-5″〉うううううううううううううううううううううううううううううううううううううううう
<p class="color-5">うううううううううう</p>色(背景は bg-)〈p class=”color-6″〉うううううううううううううううううううううううううううううううううううううううう
<p class="color-6">うううううううううう</p>色(背景は bg-)〈p class=”color-A”〉うううううううううううううううううううううううううううううううううううううううう
<p class="color-A">うううううううううう</p>色(背景は bg-)〈p class=”color-B”〉うううううううううううううううううううううううううううううううううううううううう
<p class="color-B">うううううううううう</p>色(背景は bg-)〈p class=”color-C”〉うううううううううううううううううううううううううううううううううううううううう
<p class="color-C">うううううううううう</p>テキストBold/色〈p class=”px_bold color-B”〉あああああああああああああああああああああああああああああああああああああああああああああああああ
<p class="px_bold color-B">ああああああああああああああああ</p>テキスト本文タイトル〈h6〉色
<h6 class="mt-50 color-B">テキスト本文タイトル〈h6〉色</h6>テキスト大/色〈p class=”px_bold color-B font-18 pr-100″〉いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい
<p class="px_bold color-B font-18 pr-100">いいいいいいいいいい</p>扉階層テンプレート
<section class="">
<div class="container pt-0 pb-30">
<div class="row pt-15 list">
<h2 class="mb-20">見出しh2</h2>
<pre class="mt-20"><code class="language-markup"><h2 class="mb-20">見出しh2</h2></code></pre>
<div class="col-sm-4">
<a href="/"><i class="fas fa-caret-right"></i> ああああああああ</a>
</div>
<div class="col-sm-4">
<a href="/"><i class="fas fa-caret-right"></i> いいいいいいい</a>
</div>
<div class="col-sm-4">
<a href="/"><i class="fas fa-caret-right"></i> うううううううう</a>
</div>
</div>
</div>
</section><section class="ColumnList">
<div class="container pt-0 pb-30">
<div class="row pt-15">
<div class="col-sm-4">
<a class="" href="/"><img class="" src="/images/clpho1.png" width="236" alt=""></a>
<a class="list" href="/"><i class="fas fa-caret-right"></i> テキストテキストテキスト</a>
<a class="list" href="/"><i class="fas fa-caret-right"></i> テキストテキストテキスト</a>
<a class="list" href="/"><i class="fas fa-caret-right"></i> テキストテキストテキスト</a>
<a class="list" href="/"><i class="fas fa-caret-right"></i> テキストテキストテキスト</a>
<a class="list" href="/"><i class="fas fa-caret-right"></i> テキストテキストテキスト</a>
</div>
<div class="col-sm-4">
<a class="" href="/"><img class="" src="/images/clpho2.png" width="236" alt=""></a>
<a class="list" href="/"><i class="fas fa-caret-right"></i> テキストテキストテキスト</a>
<a class="list" href="/"><i class="fas fa-caret-right"></i> テキストテキストテキスト</a>
<a class="list" href="/"><i class="fas fa-caret-right"></i> テキストテキストテキスト</a>
<a class="list" href="/"><i class="fas fa-caret-right"></i> テキストテキストテキスト</a>
</div>
<div class="col-sm-4">
<a class="" href="/"><img class="" src="/images/clpho3.png" width="236" alt=""></a>
<a class="list" href="/"><i class="fas fa-caret-right"></i> テキストテキストテキスト</a>
<a class="list" href="/"><i class="fas fa-caret-right"></i> テキストテキストテキスト</a>
<a class="list" href="/"><i class="fas fa-caret-right"></i> テキストテキストテキスト</a>
<a class="list" href="/"><i class="fas fa-caret-right"></i> テキストテキストテキスト</a>
</div>
</div>
</div>
</section>Link Modal
<a class="btn btn-theme-colored btn-lg popup-gmaps" href="/company/work">Open PopUp</a>Open PopUp
<a class="popup-gmaps" href="_current/diversity/magazine/180731_hot-info_054.txt"><i class="fas fa-caret-right"></i> Open PopUp</a>Modal-Optional sizes
<!-- Large modal -->
<button type="button" class="btn btn-dark btn-flat" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
<div class="modal-dialog modal-lg">
<div class="modal-content">
...
</div>
</div>
</div>
<!-- Small modal -->
<button type="button" class="btn btn-dark btn-flat" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button>
<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
<div class="modal-dialog modal-sm">
<div class="modal-content">
...
</div>
</div>
</div>
<img src="https://placehold.it/918x300" alt="">
