*サンプルページ – 投稿編集用

2016年10月8日

（１）ページ全体の基本スタイル

見出し – 小見出し付

見出し2小見出し小見出し小見出し

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。

 HTMLコード<h2>見出し2<small>小見出し小見出し小見出し</small></h2>

見出し3小見出し小見出し小見出し

 HTMLコード<h3>見出し3<small>小見出し小見出し小見出し</small></h3>

見出し4小見出し小見出し小見出し

 HTMLコード<h4>見出し4<small>小見出し小見出し小見出し</small></h4>

見出し5小見出し小見出し小見出し

 HTMLコード<h5>見出し5<small>小見出し小見出し小見出し</small></h5>

見出し6小見出し小見出し小見出し

 HTMLコード<h6>見出し6<small>小見出し小見出し小見出し</small></h6>

本文

リード文(.lead)

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。

 HTMLコード<p class="lead">吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。</p>

キャッチコピー(.catch-copy)

 HTMLコード<p class="catch-copy">吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。</p>

色付きテーブル見出し(.h_table)

テーブル見出し

文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。

 HTMLコード<table class="h_table">
<tbody>
<tr>
<td>テーブル見出し</td>
</tr>
</tbody>
</table>

インラインテキスト

アンダーライン – 通常(.underline) アンダーライン – 二重(.underline) 蛍光 – 青蛍光 – 黄蛍光 – 赤蛍光 – オレンジ斜字(.italic)

 HTMLコード<span class="txt_underline">アンダーライン - 通常(.underline)</span>
<span class="txt_underlinew">アンダーライン - 二重(.underline)</span>
<span class="tex_bluelight">蛍光 - 青</span>
<span class="tex_yellowlight">蛍光 - 黄</span>
<span class="tex_redlight">蛍光 - 赤</span>
<span class="tex_orangelight">蛍光 - オレンジ</span>
<span class="italic">斜字(.italic)</span>

引用

引用 – 背景付(.bq_bk)

引用見出し
引用が入ります。引用が入ります。引用が入ります。引用が入ります。引用が入ります。引用が入ります。引用が入ります。

 HTMLコード<blockquote class="bq_bk"><strong>引用見出し</strong>
引用が入ります。引用が入ります。引用が入ります。引用が入ります。引用が入ります。引用が入ります。引用が入ります。</blockquote>

リスト

チェックリスト(.ul_check)

箇条書き1
箇条書き2
箇条書き3

 HTMLコード<ul class="ul_check">
  <li>箇条書き1</li>
  <li>箇条書き2</li>
  <li>箇条書き3</li>
</ul>

背景付リスト(.ul_bk)

箇条書き1
箇条書き2
箇条書き3

 HTMLコード<ul class="ul_bk">
  <li>箇条書き1</li>
  <li>箇条書き2</li>
  <li>箇条書き3</li>
</ul>

丸番号リスト(.ol_circle)

箇条書き1
箇条書き2
箇条書き3

 HTMLコード<ol class="ol_circle">
  <li>箇条書き1</li>
  <li>箇条書き2</li>
  <li>箇条書き3</li>
</ol>

テーブル

テーブル – ミニテーブル(.table_mini)

項目	要素
項目	要素
項目	要素

 HTMLコード<table class="table_mini">
<tbody>
<tr>
<th>項目</th>
<td>要素</td>
</tr>
<tr></tr>
<tr>
<th>項目</th>
<td>要素</td>
</tr>
<tr>
<th>項目</th>
<td>要素</td>
</tr>
</tbody>
</table>

テーブル – 水平スクロール(.table_scroll)

テーブル見出し	テーブル見出し	テーブル見出し
テーブルのデータ	テーブルのデータ	テーブルのデータ
テーブルのデータ	テーブルのデータ	テーブルのデータ

 HTMLコード<table class="table_scroll">
  <tbody>
  <tr>
    <th>テーブル見出し</th>
    <th>テーブル見出し</th>
    <th>テーブル見出し</th>
  </tr>
  <tr>
    <td>テーブルのデータ</td>
    <td>テーブルのデータ</td>
    <td>テーブルのデータ</td>
  </tr>
  <tr>
    <td>テーブルのデータ</td>
    <td>テーブルのデータ</td>
    <td>テーブルのデータ</td>
  </tr>
  </tbody>
</table>

テーブル – 二分割レイアウト(.table_2col)

項目	項目
要素	要素

 HTMLコード<table class="table_2col">
  <tbody>
  <tr>
    <th>項目</th>
    <th>項目</th>
  </tr>
<tr>
  <tr>
    <td>要素</td>
    <td>要素</td>
  </tr>
  </tbody>
</table>

テーブル – 線なし(.table_noborder)

項目	要素
項目	要素
項目	要素

 HTMLコード<table class="table_noborder">
  <tbody>
  <tr>
    <th>項目</th>
    <td>要素</td>
  </tr>
<tr>
  <tr>
    <th>項目</th>
    <td>要素</td>
  </tr>
  <tr>
    <th>項目</th>
    <td>要素</td>
  </tr>
  </tbody>
</table>

（２）ページ用スタイル

投稿・固定ページスタイル

※こちらのゾーンは.pageで区切られています。

カテゴリースタイル

※こちらのゾーンは.categoryで区切られています。

（３）汎用パーツ

画像

画像 – フルワイズ画像(.full-width)

 HTMLコード<div class="full-width"><img class="alignnone size-full wp-image-725" src="https://shopi-lead.com/wp-content/themes/sw/img/pg_ec_default.png" alt="フルワイズ画像" /></div>

画像＋文章

画像＋文章 – ノーマル/画像左(.imgtxt_l)

 HTMLコード<div class="imgtxt_l">
<div class="ttl"><a href="http://shopi-lead.com/wp-content/uploads/noimage-mid.png"><img class="alignnone size-full wp-image-725" src="http://shopi-lead.com/wp-content/uploads/noimage-mid.png" alt="" width="300" height="200" /></a></div>
<div class="txt"><p><span="subtitle">吾輩は猫である。名前はまだ無い。</span>どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。</p></div>
</div>

画像＋文章 – ノーマル/画像右(.imgtxt_r)

 HTMLコード<div class="imgtxt_r">
<div class="ttl"><a href="http://shopi-lead.com/wp-content/uploads/noimage-mid.png"><img class="alignnone size-full wp-image-725" src="http://shopi-lead.com/wp-content/uploads/noimage-mid.png" alt="" width="300" height="200" /></a></div>
<div class="txt"><p><span="subtitle">吾輩は猫である。名前はまだ無い。</span>どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。</p></div>
</div>

画像＋文章 – フルワイズ

画像＋文章 – フルワイズ/画像左(.imgtxt_full_l)

 HTMLコード<div class="imgtxt_full_l">
<div class="ttl"><a href="http://shopi-lead.com/wp-content/uploads/noimage-mid.png"><img class="alignnone size-full wp-image-725" src="http://shopi-lead.com/wp-content/uploads/noimage-mid.png" alt="" width="300" height="200" /></a></div>
<div class="txt"><p>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。</p></div>
</div>

画像＋文章 – フルワイズ/画像右(.imgtxt_full_r)

 HTMLコード<div class="imgtxt_full_r">
<div class="ttl"><a href="http://shopi-lead.com/wp-content/uploads/noimage-mid.png"><img class="alignnone size-full wp-image-725" src="http://shopi-lead.com/wp-content/uploads/noimage-mid.png" alt="" width="300" height="200" /></a></div>
<div class="txt"><p>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。</p></div>
</div>

パネルリンク

パネルリンク×2(.panel_link2)

 HTMLコード<div class="panel_link2">
  <a href="#"><img class="alignnone size-full wp-image-725" src="http://shopi-lead.com/wp-content/uploads/noimage-mid.png" alt="" width="300" height="200" /></a>
  <a href="#"><img class="alignnone size-full wp-image-725" src="http://shopi-lead.com/wp-content/uploads/noimage-mid.png" alt="" width="300" height="200" /></a>
  <a href="#"><img class="alignnone size-full wp-image-725" src="http://shopi-lead.com/wp-content/uploads/noimage-mid.png" alt="" width="300" height="200" /></a>
  <a href="#"><img class="alignnone size-full wp-image-725" src="http://shopi-lead.com/wp-content/uploads/noimage-mid.png" alt="" width="300" height="200" /></a>
</div>

パネルリンク×3(.panel_link3)

 HTMLコード<div class="panel_link3">
  <a href="#"><img class="alignnone size-full wp-image-725" src="http://shopi-lead.com/wp-content/uploads/noimage-mid.png" alt="" width="300" height="200" /></a>
  <a href="#"><img class="alignnone size-full wp-image-725" src="http://shopi-lead.com/wp-content/uploads/noimage-mid.png" alt="" width="300" height="200" /></a>
  <a href="#"><img class="alignnone size-full wp-image-725" src="http://shopi-lead.com/wp-content/uploads/noimage-mid.png" alt="" width="300" height="200" /></a>
  <a href="#"><img class="alignnone size-full wp-image-725" src="http://shopi-lead.com/wp-content/uploads/noimage-mid.png" alt="" width="300" height="200" /></a>
</div>

パネルリンク×4(.panel_link4)

 HTMLコード<div class="panel_link4">
  <a href="#"><img class="alignnone size-full wp-image-725" src="http://shopi-lead.com/wp-content/uploads/noimage-mid.png" alt="" width="300" height="200" /></a>
  <a href="#"><img class="alignnone size-full wp-image-725" src="http://shopi-lead.com/wp-content/uploads/noimage-mid.png" alt="" width="300" height="200" /></a>
  <a href="#"><img class="alignnone size-full wp-image-725" src="http://shopi-lead.com/wp-content/uploads/noimage-mid.png" alt="" width="300" height="200" /></a>
  <a href="#"><img class="alignnone size-full wp-image-725" src="http://shopi-lead.com/wp-content/uploads/noimage-mid.png" alt="" width="300" height="200" /></a>
</div>

パネルリンク×5(.panel_link5)

 HTMLコード<div class="panel_link5">
  <a href="#"><img class="alignnone size-full wp-image-725" src="http://shopi-lead.com/wp-content/uploads/noimage-mid.png" alt="" width="300" height="200" /></a>
  <a href="#"><img class="alignnone size-full wp-image-725" src="http://shopi-lead.com/wp-content/uploads/noimage-mid.png" alt="" width="300" height="200" /></a>
  <a href="#"><img class="alignnone size-full wp-image-725" src="http://shopi-lead.com/wp-content/uploads/noimage-mid.png" alt="" width="300" height="200" /></a>
  <a href="#"><img class="alignnone size-full wp-image-725" src="http://shopi-lead.com/wp-content/uploads/noimage-mid.png" alt="" width="300" height="200" /></a>
  <a href="#"><img class="alignnone size-full wp-image-725" src="http://shopi-lead.com/wp-content/uploads/noimage-mid.png" alt="" width="300" height="200" /></a>
</div>

ページ内リンク

ページ内リンク×2(.inlink_link)

リンク先
リンク先

 HTMLコード<ul class="inlink_link">
  <li><a href="#aa01">リンク先</a></li>
  <li><a href="#aa02">リンク先</a></li>
</ul>

ページ内リンク×3(.inlink_link)

リンク先
リンク先
リンク先

 HTMLコード<ul class="inlink_link">
  <li><a href="#aa01">リンク先</a></li>
  <li><a href="#aa02">リンク先</a></li>
  <li><a href="#aa03">リンク先</a></li>
</ul>

ページ内リンク×4(.inlink_link)

リンク先
リンク先
リンク先
リンク先
リンク先

 HTMLコード<ul class="inlink_link">
  <li><a href="#aa01">リンク先</a></li>
  <li><a href="#aa02">リンク先</a></li>
  <li><a href="#aa03">リンク先</a></li>
  <li><a href="#aa04">リンク先</a></li>
</ul>

ページ内リンク×5(.inlink_link)

リンク先
リンク先
リンク先
リンク先
リンク先

 HTMLコード<ul class="inlink_link">
    <li><a href="#aa01">リンク先</a></li>
    <li><a href="#aa02">リンク先</a></li>
    <li><a href="#aa03">リンク先</a></li>
    <li><a href="#aa04">リンク先</a></li>
    <li><a href="#aa05">リンク先</a></li>
  </ul>

ページ内リンク×2(.inlink_link2)

リンク先
リンク先

 HTMLコード<ul class="inlink_link2">
  <li><a href="#aa01">リンク先</a></li>
  <li><a href="#aa02">リンク先</a></li>
</ul>

ページ内リンク×3(.inlink_link2)

リンク先
リンク先
リンク先

 HTMLコード<ul class="inlink_link2">
  <li><a href="#aa01">リンク先</a></li>
  <li><a href="#aa02">リンク先</a></li>
  <li><a href="#aa01">リンク先</a></li>
</ul>

ページ内リンク×4(.inlink_link2)

リンク先
リンク先
リンク先
リンク先

 HTMLコード<ul class="inlink_link2">
  <li><a href="#aa01">リンク先</a></li>
  <li><a href="#aa02">リンク先</a></li>
  <li><a href="#aa01">リンク先</a></li>
  <li><a href="#aa02">リンク先</a></li>
</ul>

ページ内リンク×5(.inlink_link2)

リンク先
リンク先
リンク先
リンク先
リンク先

 HTMLコード<ul class="inlink_link2">
  <li><a href="#aa01">リンク先</a></li>
  <li><a href="#aa02">リンク先</a></li>
  <li><a href="#aa01">リンク先</a></li>
  <li><a href="#aa02">リンク先</a></li>
  <li><a href="#aa02">リンク先</a></li>
</ul>

説明入パネル

肩書説明入パネル×1(.panelex_link)

肩書

タイトル