*サンプルページ – 投稿編集用 - 山口県自動車車体整備協同組合

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

(1)ページ全体の基本スタイル

見出し – 小見出し付

見出し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>

アラート(.bq_al)

お知らせ見出し
テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。

 HTMLコード<blockquote class="bq_al"><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. 箇条書き1
  2. 箇条書き2
  3. 箇条書き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>

(2)ページ用スタイル

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

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

カテゴリースタイル

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

(3)汎用パーツ

画像

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

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

画像+文章

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

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。

 HTMLコード<div class="imgtxt_l">
<div class="ttl"><a href="https://y-aba.or.jp/wp/wp-content/uploads/noimage-mid.png"><img class="alignnone size-full wp-image-725" src="https://y-aba.or.jp/wp/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="https://y-aba.or.jp/wp/wp-content/uploads/noimage-mid.png"><img class="alignnone size-full wp-image-725" src="https://y-aba.or.jp/wp/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="https://y-aba.or.jp/wp/wp-content/uploads/noimage-mid.png"><img class="alignnone size-full wp-image-725" src="https://y-aba.or.jp/wp/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="https://y-aba.or.jp/wp/wp-content/uploads/noimage-mid.png"><img class="alignnone size-full wp-image-725" src="https://y-aba.or.jp/wp/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="https://y-aba.or.jp/wp/wp-content/uploads/noimage-mid.png" alt="" width="300" height="200" /></a>
  <a href="#"><img class="alignnone size-full wp-image-725" src="https://y-aba.or.jp/wp/wp-content/uploads/noimage-mid.png" alt="" width="300" height="200" /></a>
  <a href="#"><img class="alignnone size-full wp-image-725" src="https://y-aba.or.jp/wp/wp-content/uploads/noimage-mid.png" alt="" width="300" height="200" /></a>
  <a href="#"><img class="alignnone size-full wp-image-725" src="https://y-aba.or.jp/wp/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="https://y-aba.or.jp/wp/wp-content/uploads/noimage-mid.png" alt="" width="300" height="200" /></a>
  <a href="#"><img class="alignnone size-full wp-image-725" src="https://y-aba.or.jp/wp/wp-content/uploads/noimage-mid.png" alt="" width="300" height="200" /></a>
  <a href="#"><img class="alignnone size-full wp-image-725" src="https://y-aba.or.jp/wp/wp-content/uploads/noimage-mid.png" alt="" width="300" height="200" /></a>
  <a href="#"><img class="alignnone size-full wp-image-725" src="https://y-aba.or.jp/wp/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="https://y-aba.or.jp/wp/wp-content/uploads/noimage-mid.png" alt="" width="300" height="200" /></a>
  <a href="#"><img class="alignnone size-full wp-image-725" src="https://y-aba.or.jp/wp/wp-content/uploads/noimage-mid.png" alt="" width="300" height="200" /></a>
  <a href="#"><img class="alignnone size-full wp-image-725" src="https://y-aba.or.jp/wp/wp-content/uploads/noimage-mid.png" alt="" width="300" height="200" /></a>
  <a href="#"><img class="alignnone size-full wp-image-725" src="https://y-aba.or.jp/wp/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="https://y-aba.or.jp/wp/wp-content/uploads/noimage-mid.png" alt="" width="300" height="200" /></a>
  <a href="#"><img class="alignnone size-full wp-image-725" src="https://y-aba.or.jp/wp/wp-content/uploads/noimage-mid.png" alt="" width="300" height="200" /></a>
  <a href="#"><img class="alignnone size-full wp-image-725" src="https://y-aba.or.jp/wp/wp-content/uploads/noimage-mid.png" alt="" width="300" height="200" /></a>
  <a href="#"><img class="alignnone size-full wp-image-725" src="https://y-aba.or.jp/wp/wp-content/uploads/noimage-mid.png" alt="" width="300" height="200" /></a>
  <a href="#"><img class="alignnone size-full wp-image-725" src="https://y-aba.or.jp/wp/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)

 HTMLコード<div class="panelex_link">
  <div class="panelex_link-in">
    <div class="sta">肩書</div>
    <div class="img"><a href="#"><img class="alignnone size-full wp-image-725" src="https://y-aba.or.jp/wp/wp-content/uploads/noimage-mid.png" alt="" /></a></div>
    <div class="ttl">タイトル</div>
    <div class="ex">吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。</div>
  </div>
</div>

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

 HTMLコード<div class="panelex_link">
  <div class="panelex_link-in">
    <div class="sta">肩書</div>
    <div class="img"><a href="#"><img class="alignnone size-full wp-image-725" src="https://y-aba.or.jp/wp/wp-content/uploads/noimage-mid.png" alt="" /></a></div>
    <div class="ttl">タイトル</div>
    <div class="ex">吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。</div>
  </div>
  <div class="panelex_link-in">
    <div class="sta">肩書</div>
    <div class="img"><a href="#"><img class="alignnone size-full wp-image-725" src="https://y-aba.or.jp/wp/wp-content/uploads/noimage-mid.png" alt="" /></a></div>
    <div class="ttl">タイトル</div>
    <div class="ex">吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。</div>
  </div>
</div>

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

 HTMLコード<div class="panelex_link">
  <div class="panelex_link-in">
    <div class="sta">肩書</div>
    <div class="img"><a href="#"><img class="alignnone size-full wp-image-725" src="https://y-aba.or.jp/wp/wp-content/uploads/noimage-mid.png" alt="" /></a></div>
    <div class="ttl">タイトル</div>
    <div class="ex">吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。</div>
  </div>
  <div class="panelex_link-in">
    <div class="sta">肩書</div>
    <div class="img"><a href="#"><img class="alignnone size-full wp-image-725" src="https://y-aba.or.jp/wp/wp-content/uploads/noimage-mid.png" alt="" /></a></div>
    <div class="ttl">タイトル</div>
    <div class="ex">吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。</div>
  </div>
  <div class="panelex_link-in">
    <div class="sta">肩書</div>
    <div class="img"><a href="#"><img class="alignnone size-full wp-image-725" src="https://y-aba.or.jp/wp/wp-content/uploads/noimage-mid.png" alt="" /></a></div>
    <div class="ttl">タイトル</div>
    <div class="ex">吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。</div>
  </div>
</div>

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

 HTMLコード<div class="panelex_link">
  <div class="panelex_link-in">
    <div class="img"><a href="#"><img class="alignnone size-full wp-image-725" src="https://y-aba.or.jp/wp/wp-content/uploads/noimage-mid.png" alt="" /></a></div>
    <div class="ttl">タイトル</div>
    <div class="ex">吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。</div>
  </div>
</div>

説明入パネル×2(.panelex_link)

 HTMLコード<div class="panelex_link">
  <div class="panelex_link-in">
    <div class="img"><a href="#"><img class="alignnone size-full wp-image-725" src="https://y-aba.or.jp/wp/wp-content/uploads/noimage-mid.png" alt="" /></a></div>
    <div class="ttl">タイトル</div>
    <div class="ex">吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。</div>
  </div>
  <div class="panelex_link-in">
    <div class="img"><a href="#"><img class="alignnone size-full wp-image-725" src="https://y-aba.or.jp/wp/wp-content/uploads/noimage-mid.png" alt="" /></a></div>
    <div class="ttl">タイトル</div>
    <div class="ex">吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。</div>
  </div>
</div>

説明入パネル×3(.panelex_link)

 HTMLコード<div class="panelex_link">
  <div class="panelex_link-in">
    <div class="img"><a href="#"><img class="alignnone size-full wp-image-725" src="https://y-aba.or.jp/wp/wp-content/uploads/noimage-mid.png" alt="" /></a></div>
    <div class="ttl">タイトル</div>
    <div class="ex">吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。</div>
  </div>
  <div class="panelex_link-in">
    <div class="img"><a href="#"><img class="alignnone size-full wp-image-725" src="https://y-aba.or.jp/wp/wp-content/uploads/noimage-mid.png" alt="" /></a></div>
    <div class="ttl">タイトル</div>
    <div class="ex">吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。</div>
</div>
  <div class="panelex_link-in">
    <div class="img"><a href="#"><img class="alignnone size-full wp-image-725" src="https://y-aba.or.jp/wp/wp-content/uploads/noimage-mid.png" alt="" /></a></div>
    <div class="ttl">タイトル</div>
    <div class="ex">吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。</div>
  </div>
</div>

価格カード

価格カード×1(.price_card)

商品名A – AAAA11111
23,000
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
 HTMLコード<div class="price_card">
<div class="price_card-in">
<div class="ttl">商品名A - AAAA11111</div>
<div class="prc">23,000<span class="cu">円</span></div>
<div class="ex">吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。</div>
<div class="buy"><a href="#">詳細</a></div>
</div>
</div>

価格カード×2(.price_card)

商品名A – AAAA11111
23,000
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
商品名A – AAAA11111
23,000
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
 HTMLコード<div class="price_card">
<div class="price_card-in">
<div class="ttl">商品名A - AAAA11111</div>
<div class="prc">23,000<span class="cu">円</span></div>
<div class="ex">吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。</div>
<div class="buy"><a href="#">詳細</a></div>
</div>
<div class="price_card-in">
<div class="ttl">商品名A - AAAA11111</div>
<div class="prc">23,000<span class="cu">円</span></div>
<div class="ex">吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。</div>
<div class="buy"><a href="#">詳細</a></div>
</div>
</div>

価格カード×3(.price_card)

商品名A – AAAA11111
23,000
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
商品名A – AAAA11111
23,000
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
商品名A – AAAA11111
23,000
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
 HTMLコード<div class="price_card">
<div class="price_card-in">
<div class="ttl">商品名A - AAAA11111</div>
<div class="prc">23,000<span class="cu">円</span></div>
<div class="ex">吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。</div>
<div class="buy"><a href="#">詳細</a></div>
</div>
<div class="price_card-in">
<div class="ttl">商品名A - AAAA11111</div>
<div class="prc">23,000<span class="cu">円</span></div>
<div class="ex">吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。</div>
<div class="buy"><a href="#">詳細</a></div>
</div>
<div class="price_card-in">
<div class="ttl">商品名A - AAAA11111</div>
<div class="prc">23,000<span class="cu">円</span></div>
<div class="ex">吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。</div>
<div class="buy"><a href="#">詳細</a></div>
</div>
</div>

フロー図

フロー図(.flow_chart)

登録からお仕事開始までの流れ

  • 登録の申し込み
    吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
  • 登録のご説明
    吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
  • 登録書類のご記入
    吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
  • コーディネーターとの面談
    吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
  • お仕事開始
    吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
 HTMLコード<div class="flow_chart">
<p class="ttl">登録からお仕事開始までの流れ</p>
<ul>
<li class="flow-box">
<div class="flow-l">登録の申し込み</div>
<div class="flow-r">吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。</div></li>
<li class="flow-box">
<div class="flow-l">登録のご説明</div>
<div class="flow-r">吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。</div></li>
<li class="flow-box">
<div class="flow-l">登録書類のご記入</div>
<div class="flow-r">吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。</div></li>
<li class="flow-box">
<div class="flow-l">コーディネーターとの面談</div>
<div class="flow-r">吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。</div></li>
<li class="flow-box">
<div class="flow-l">お仕事開始</div>
<div class="flow-r">吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。</div></li>
</ul>
</div>

フロー図(.flow_chart2)

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

イメージボックス

イメージボックス(.image_box)

サンプル画像
タイトルが入ります吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。
 HTMLコード<div class="image_box">
<div class="img"><img class="alignnone size-full wp-image-725" src="https://y-aba.or.jp/wp/wp-content/uploads/noimage-mid.png" alt="サンプル画像" /></div>
<div class="txt"><strong>タイトルが入ります</strong>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。</div>
</div>

料金プラン

料金プラン(.rate_plan)

商品名A – AAAA11111 商品名B – AAAA11111 商品名C – AAAA11111
月額料金 10,000 20,000 30,000
特徴
ネットショップ
ECサイトとブログを含む
AAAAA AAAAA AAAAA
ネットショップ
ECサイトとブログを含む
BBBBB BBBBB BBBBB
ネットショップ
ECサイトとブログを含む
CCCCC CCCCC CCCCC
ネットショップ
ECサイトとブログを含む
DDDDD DDDDD DDDDD
詳細 詳細 詳細
 HTMLコード<table class="rate_plan">
<tbody>
<tr class="ttl">
<th></th>
<th>商品名A - AAAA11111</th>
<th>商品名B - AAAA11111</th>
<th>商品名C - AAAA11111</th>
</tr>
<tr class="prc">
<th>月額料金</th>
<td>10,000<span class="cu">円</span></td>
<td>20,000<span class="cu">円</span></td>
<td>30,000<span class="cu">円</span></td>
</tr>
<tr>
<th class="feature" colspan="4">特徴</th>
</tr>
<tr>
<th>ネットショップ
ECサイトとブログを含む</th>
<td>AAAAA</td>
<td>AAAAA</td>
<td>AAAAA</td>
</tr>
<tr>
<th>ネットショップ
ECサイトとブログを含む</th>
<td>BBBBB</td>
<td>BBBBB</td>
<td>BBBBB</td>
</tr>
<tr>
<th>ネットショップ
ECサイトとブログを含む</th>
<td>CCCCC</td>
<td>CCCCC</td>
<td>CCCCC</td>
</tr>
<tr>
<th>ネットショップ
ECサイトとブログを含む</th>
<td>DDDDD</td>
<td>DDDDD</td>
<td>DDDDD</td>
</tr>
<tr class="buy">
<th></th>
<td><a href="#">詳細</a></td>
<td><a href="#">詳細</a></td>
<td><a href="#">詳細</a></td>
</tr>
</tbody>
</table>

Q&A

Q&A(.faq_list)

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
 HTMLコード<div class="faq_list">
<dl>
<dt>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。</dt>
<dd>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。</dd>
</dl>
</div>

アコーディオン

アコーディオン

タイトルが入ります。

テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。

タイトルが入ります。

テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。

タイトルが入ります。

テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。

 HTMLコード<div class="p-accordion">
    <details class="p-accordion__block js-accordion">
       <summary class="p-accordion__head js-accordion-head">
          <p class="p-accordion__head-inner"><strong>タイトルが入ります。</strong><span class="p-accordion__icon"></span></p>
       </summary>
       <div class="p-accordion__content js-accordion-main">
          <p class="p-accordion__main">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
       </div>
    </details>
<details class="p-accordion__block js-accordion">
       <summary class="p-accordion__head js-accordion-head">
          <p class="p-accordion__head-inner"><strong>タイトルが入ります。</strong><span class="p-accordion__icon"></span></p>
       </summary>
       <div class="p-accordion__content js-accordion-main">
          <p class="p-accordion__main">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
       </div>
    </details>
<details class="p-accordion__block js-accordion">
       <summary class="p-accordion__head js-accordion-head">
          <p class="p-accordion__head-inner"><strong>タイトルが入ります。</strong><span class="p-accordion__icon"></span></p>
       </summary>
       <div class="p-accordion__content js-accordion-main">
          <p class="p-accordion__main">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
       </div>
    </details>
</div>

ポイント説明

ポイント説明(.point_list)

見出し見出し

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

見出し見出し

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

見出し見出し

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

見出し見出し

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

見出し見出し

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

 HTMLコード<div class="point_list"><section><header>
<p class="ttl">見出し見出し</p>
</header>文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。
</section><section><header>
<p class="ttl">見出し見出し</p>
</header>文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。
</section><section><header>
<p class="ttl">見出し見出し</p>
</header>文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。
</section><section><header>
<p class="ttl">見出し見出し</p>
</header>文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。
</section><section><header>
<p class="ttl">見出し見出し</p>
</header>文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。
</section></div>

手順説明

手順説明(.process_list)

1.手順

調理の説明が入ります。調理の説明が入ります。調理の説明が入ります。調理の説明が入ります。調理の説明が入ります。

2.手順

調理の説明が入ります。調理の説明が入ります。調理の説明が入ります。調理の説明が入ります。調理の説明が入ります。

3.手順

調理の説明が入ります。調理の説明が入ります。調理の説明が入ります。調理の説明が入ります。調理の説明が入ります。

 HTMLコード<div class="process_list">
  <div>
   <p><img alt="" class="alignnone size-full wp-image-725" src="https://y-aba.or.jp/wp/wp-content/uploads/noimage-mid.png"></p>
    <h4>1.手順</h4>
    <p>調理の説明が入ります。調理の説明が入ります。調理の説明が入ります。調理の説明が入ります。調理の説明が入ります。</p>
  </div>
  <div>
    <p><img alt="" class="alignnone size-full wp-image-725" src="https://y-aba.or.jp/wp/wp-content/uploads/noimage-mid.png"></p>
    <h4>2.手順</h4>
    <p>調理の説明が入ります。調理の説明が入ります。調理の説明が入ります。調理の説明が入ります。調理の説明が入ります。</p>
  </div>
  <div>
    <p><img alt="" class="alignnone size-full wp-image-725" src="https://y-aba.or.jp/wp/wp-content/uploads/noimage-mid.png"></p>
    <h4>3.手順</h4>
    <p>調理の説明が入ります。調理の説明が入ります。調理の説明が入ります。調理の説明が入ります。調理の説明が入ります。</p>
  </div>
</div>

リンクボタン

リンクボタン×1(.blk)

 HTMLコード<div class="blk"><a href="#">詳細はこちら</a></div>

リンクボタン×2(.blk)

 HTMLコード<div class="blk"><a href="#">詳細はこちら</a><a href="#">詳細はこちら</a></div>

リンクボタン×3(.blk)

 HTMLコード<div class="blk"><a href="#">詳細はこちら</a><a href="#">詳細はこちら</a><a href="#">詳細はこちら</a></div>

リンクボタン×4(.blk)

 HTMLコード<div class="blk"><a href="#">詳細はこちら</a><a href="#">詳細はこちら</a><a href="#">詳細はこちら</a><a href="#">詳細はこちら</a></div>

リンクボタン×1 – 中央(.blk .blk-c)

 HTMLコード<div class="blk blk-c"><a href="#">詳細はこちら</a></div>

リンクボタン×2 – 中央(.blk .blk-c)

 HTMLコード<div class="blk blk-c"><a href="#">詳細はこちら</a><a href="#">詳細はこちら</a></div>

リンクボタン×3 – 中央(.blk .blk-c)

 HTMLコード<div class="blk blk-c"><a href="#">詳細はこちら</a><a href="#">詳細はこちら</a><a href="#">詳細はこちら</a></div>

リンクボタン×4 – 中央(.blk .blk-c)

 HTMLコード<div class="blk blk-c"><a href="#">詳細はこちら</a><a href="#">詳細はこちら</a><a href="#">詳細はこちら</a><a href="#">詳細はこちら</a></div>

リンクボタン – マルチ(.blk .blk-multi)

 HTMLコード<div class="blk blk-multi"><a href="#">詳細はこちら</a><a href="#">詳細はこちら</a><a href="#">詳細はこちら</a><a href="#">詳細はこちら</a></div>

チャットスタイル

チャットスタイル – 左(.chat_left)

名前

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

チャットスタイル – 右(.chat_right)

名前

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

お問い合わせ

お問い合わせ(.contact)

〇〇〇〇〇〇〇〇に関することはお気軽にお問い合わせください!

000-000-0000

平日 9:00 – 17:30 土曜 9:00 – 12:00
(第2・4土曜は休み)

お問い合わせ・資料請求

メールは24時間受け付けております。

 HTMLコード<div class="contact">
<div class="contact_in">
<p class="lead">〇〇〇〇〇〇〇〇に関することはお気軽にお問い合わせください!</p>
<div class="telarea">
<p class="tel"><a href="tel:000-000-0000">000-000-0000</a></p>
<p class="tel-ex">平日 9:00 - 17:30 土曜 9:00 - 12:00<br>(第2・4土曜は休み)</p>
</div>
<div class="mailarea">
<p class="mail"><a href="https://y-aba.or.jp/wp/contact/">お問い合わせ・資料請求</a></p>
<p class="mail-ex">メールは24時間受け付けております。</p>
</div>
</div>
</div>

お問合せ2カラム

お電話でお問い合わせ
TEL:000-000-0000
9:00 – 21:00(土日9:00 – 12:00)

お気軽にお電話ください。

フォームからお問い合わせ
24時間受付中です。
お気軽にご予約・お問い合わせください。
 HTMLコード
<div class="contact_row">
<div class="contact_col">
<div class="ttl">お電話でお問い合わせ</div>
<div class="em">TEL:000-000-0000</div>
<div class="ex">
9:00 - 21:00(土日9:00 - 12:00)<br><br>
お気軽にお電話ください。</div>
</div>
<div class="contact_col">
<div class="ttl">フォームからお問い合わせ</div>
<div class="ex">
24時間受付中です。<br>
お気軽にご予約・お問い合わせください。
</div>
<div class="blk"><a href="#">お問合せフォーム</a></div>
</div>
</div>

お問合せ3カラム

お電話でお問い合わせ
TEL:000-000-0000
9:00 – 21:00(土日9:00 – 12:00)

お気軽にお電話ください。

LINEでお問い合わせ
24時間受付中です。
お気軽にご予約・お問い合わせください。
フォームからお問い合わせ
24時間受付中です。
お気軽にご予約・お問い合わせください。
 HTMLコード
<div class="contact_row">
<div class="contact_col">
<div class="ttl">お電話でお問い合わせ</div>
<div class="em">TEL:000-000-0000</div>
<div class="ex">
9:00 - 21:00(土日9:00 - 12:00)<br><br>
お気軽にお電話ください。</div>
</div>
<div class="contact_col">
<div class="ttl">LINEでお問い合わせ</div>
<div class="ex">
24時間受付中です。<br>
お気軽にご予約・お問い合わせください。
</div>
<div class="blk"><a href="#">登録はこちらから</a></div>
</div>
<div class="contact_col">
<div class="ttl">フォームからお問い合わせ</div>
<div class="ex">
24時間受付中です。<br>
お気軽にご予約・お問い合わせください。
</div>
<div class="blk"><a href="#">お問合せフォーム</a></div>
</div>
</div>

(4)その他

アイコン

awesome font

ホーム
チェック
ダウンロード
注意
カート
アイコンリスト

 HTMLコード<p><i class="fas fa-home"></i> ホーム</p>
<p><i class="fas fa-check-circle"></i> チェック</p>
<p><i class="fas fa-file-download"></i> ダウンロード</p>
<p><i class="fas fa-exclamation-triangle"></i> 注意</p>
<p><i class="fas fa-shopping-cart"></i> カート</p>

ラベル

ラベル(.info_label)

  • ラベル – 通常
  • ラベル – 赤
  • ラベル – 水色
  • ラベル – 青
  • ラベル – オレンジ
  • ラベル – 緑
 HTMLコード<div class="info_label">
  <ul>
    <li class="label_red">ラベル - 赤</li>
    <li class="label_lightblue">ラベル - 水色</li>
    <li class="label_blue">ラベル - 青</li>
    <li class="orange">ラベル - オレンジ</li>
    <li class="label_green label_round">ラベル - 緑</li>
    <li class="label_jas">
  </li>
</ul>
</div>

数値ラベル(.num_label)

項目
項目
項目
00分
000kcal
0.0g
 HTMLコード<div class="num_label">
  <dl>
    <dt class="row1">項目</dt>
    <dt class="row2">項目</dt>
    <dt class="row3">項目</dt>
  </dl>
  <dl>
    <dd class="row1">00分</dd>
    <dd class="row2">000kcal</dd>
    <dd class="row3">0.0g</dd>
  </dl>
</div>

買い物ガイド(.buy_guide)

ご注文について

ご注文は年中無休でお受けしております。
なお、土日祝日はメールの返信をお休みとさせていただいております。
注文内容に関するご連絡先:【hoge@hoge.jp】
Tel 【0000-000-000】
受付時間:【平日月~金9:00~12:00・13:00~17:00 ※祝日を除く】

返品について

万が一お手元に届いた商品に初期不良があった場合は、良品と交換または返金いたします。詳しくはこちら

配送サービスについて

【当店はすべて佐川急便の宅急便のみ】の手配となります。
【5,000円(税込)以上送料無料
一配送先毎に
送料700円(税込)
沖縄、北海道のみ1,200円(税込)

日付指定を時間帯指定が可能です。
※地域によりお届けできない時間帯がある場合がございます。】

時間帯指定:【8時-12時/14時-16時/16時-18時/18時-20時/19時-21時】

お支払い方法について

クレジットカード
ご利用可能クレジットカード

代金引換
手数料無料

銀行振込
ご入金確認後の商品発送
振込手数料はお客様ご負担
【お振込口座:○○銀行】

その他支払い方法

プライバシー保護について

ご注文やお問い合わせ時にお客様から頂きました大切な個人情報は、当社において厳正に管理しておりますのでご安心ください。

 HTMLコード<div class="div_2col buy_guide"><div><h3>ご注文について</h3><p>ご注文は年中無休でお受けしております。<br> なお、土日祝日はメールの返信をお休みとさせていただいております。<br> 注文内容に関するご連絡先:【hoge@hoge.jp】<br> <span class="tel_num">Tel 【0000-000-000】</span><br> 受付時間:【平日月~金9:00~12:00・13:00~17:00 ※祝日を除く】</p><h3>配送サービスについて</h3><p>【当店はすべて佐川急便の宅急便のみ】の手配となります。<br> 【5,000円(税込)以上送料無料<br> 一配送先毎に<br> 送料700円(税込)<br> 沖縄、北海道のみ1,200円(税込)</p><p>日付指定を時間帯指定が可能です。<br> ※地域によりお届けできない時間帯がある場合がございます。】</p><p><img src="https://y-aba.or.jp/wp/wp-content/themes/sw/img/jikanshitei.png" alt="ご利用可能クレジットカード"></p></div><div><h3>お支払い方法について</h3><p><span class="emphasis">クレジットカード</span><br> ご利用可能クレジットカード</p><p><img src="https://y-aba.or.jp/wp/wp-content/themes/sw/img/credit_card.png" alt="ご利用可能クレジットカード"></p><p><span class="emphasis">代金引換</span><br> 手数料無料</p><p><span class="emphasis">銀行振込</span><br> ご入金確認後の商品発送<br> 振込手数料はお客様ご負担<br> 【お振込口座】</p><h3>プライバシー保護について</h3><p>ご注文やお問い合わせ時にお客様から頂きました大切な個人情報は、当社において厳正に管理しておりますのでご安心ください。</p></div></div>

レスポンシブ画像

レスポンシブイメージ

 HTMLコード<img class="res_img wp-image-3005" src="https://y-aba.or.jp/wp/wp-content/uploads/responsiveimg.png">
※スマートフォンサイズ(468px以下)ではresponsiveimg_sp.pngという画像に切り替わる

カウントダウン

 HTMLコード<div id="inner">
<div id="countdown"></div>
</div>

バナー(ショートコード)

カスタム投稿タイプ「バナー」に登録のバナー集をバナー形式かタイルレイアウト形式で出力する。
※#08バナーウィジェットのショートコード版

タイルレイアウト形式

指定されたid[3049]のバナーは存在しません。
指定されたid[3049]のバナーは存在しません。

 ショートコード[sw_banner banner_id="3049" col="2"]

<!--banner_id...カスタム投稿「バナー」の投稿id (デフォルト:3049)
col...カラム数 1~4 (デフォルト:2)-->

スライダー形式(デフォルト)

指定されたid[3049]のバナーは存在しません。
 ショートコード[sw_banner banner_id="3049" slider="1"]

<!--banner_id...カスタム投稿「バナー」の投稿id (デフォルト:3049)
slider...スライダー形式にしない:0 スライダー形式にする:1-->

スライダー形式(オプション指定)

指定されたid[3049]のバナーは存在しません。
 ショートコード[sw_banner banner_id="3049" class_name="banner-slider" slider="1" slidesToShow="3" slidesToScroll="3" autoplaySpeed="2000" centerMode="true" dots="false" infinite="true" autoplay="true" sop_res="true" sop_slidesToShow_m="3" sop_slidesToShow_s="1" sop_code="arrows:false,pauseOnHover:true"]

<!--banner_id...カスタム投稿「バナー」の投稿id (デフォルト:3049)
class_name...バナーに固有のクラス名をつける(slickスライダーjsのスライダー識別のため)
slider...スライダー形式にしない:0 スライダー形式にする:1
slidesToShow~autoplay...slickスライダーのオプションに対応
sop_res...レスポンシブ設定
sop_slidesToShow_m...slidesToShow 900px以下
sop_slidesToShow_s...slidesToShow 680px以下
sop_code...オプションjsコード直接入力
-->

基本情報(ショートコード)

サイト情報

サイトのタイトル 山口県自動車車体整備協同組合 [basic_info param=”title”]
キャッチフレーズ 車の修理(鈑金・塗装)を扱う県内店舗の協同組合です。 [basic_info param=”description”]
サイトアドレス (URL)(一般設定) https://y-aba.or.jp [basic_info param=”site_url”]
管理者メールアドレス(一般設定) suworks76@gmail.com [basic_info param=”admin_email”]

会社情報

企業・団体名 山口県自動車車体整備協同組合 [basic_info param=”company_name”]
電話番号 083-923-0955 [basic_info param=”tel”]
FAX番号 [basic_info param=”fax”]
サイトURL https://y-aba.or.jp/ [basic_info param=”url”]
採用ページURL [basic_info param=”url_recruit”]
メールアドレス [basic_info param=”mail”]
郵便番号 753-0813 [basic_info param=”url”]
都道府県 山口県 [basic_info param=”prefectures”]
市町村 山口市 [basic_info param=”city”]
番地その他住所 吉敷中東4-11-14-101 [basic_info param=”etc_address”]
完全 〒753-0813 山口県山口市吉敷中東4-11-14-101 [basic_info param=”company_address”]
営業時間 10:00 - 17:00 [basic_info param=”open”]
営業時間(短縮) 平日9:00-17:30 土9:00-12:00 [basic_info param=”open_st”]
お問合せボタン文言 お問い合わせ [basic_info param=”contact_label”]
お問合せ文章 自動車修理・鈑金・整備などに関することはお気軽にお問い合わせください! [basic_info param=”contact_lead”]
グーグルマップ
[basic_info param=”google_map”]
LINE [basic_info param=”line”]
Instagram [basic_info param=”instagram”]
Facebook [basic_info param=”facebook”]

前後の記事

  次の記事