module - モバビジ

PAGE TITLE

ページタイトル

---- 目次 ----

テキスト
コンテンツ
リスト＆テーブル
フォームパーツ
ボタン

---- テキスト ----

hl-lv1

<p class="text-lv1">text-lv1</p>

text-lv2

<p class="text-lv2">text-lv2</p>

text-bold

<p class="text-bold">text-bold</p>

text-lv4

<p class="text-lv4">text-lv4</p>

text-lv5

<p class="text-lv5">text-lv5</p>

text-lv1--01

<p class="text-lv1--01">text-lv1--01</p>

text-lv2--01

<p class="text-lv2--01">text-lv2--01</p>

text-bold--01

<p class="text-bold--01">text-bold--01</p>

text-lv4--01

<p class="text-lv4--01">text-lv4--01</p>

text-lv5--01

<p class="text-lv5--01">text-lv5--01</p>

text-link--line

<p class="text-link--line">text-link--line</p>

text-link

<p class="text-link">text-link</p>

text-strong

<p class="text-strong">text-strong</p>

text-data

<p class="text-data">text-data</p>

text-sub

<p class="text-sub">text-sub</p>

text-icon

<p class="text-icon">text-icon<i class="fas fa-window-restore"></i></p>

text-indent
- text-indent__inner
  - text-indent__half

<ul class="text-indent">
  <li>text-indent
    <ul class="text-indent__inner">
      <li>text-indent__inner
        <ul class="text-indent__half">
          <li>text-indent__half</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

-----------------------------↓ユーティリティ:weight-----------------------------

u-semi_bold

u-bold

-----------------------------↑ユーティリティ:weight-----------------------------

-----------------------------↓ユーティリティ:color-----------------------------

u-white

u-col_base

-----------------------------↑ユーティリティ:color-----------------------------

---- コンテンツ ----

TITLE

タイトル

<div class="content-hl">
  <p class="text-lv1--01">TITLE</p>
  <h2 class="text-sub">タイトル</h2>
</div>

TITLE

タイトル

<div class="content-hl--center">
  <p class="text-lv1--01">TITLE</p>
  <h2 class="text-sub">タイトル</h2>
</div>

TITLE

タイトル

<div class="content-hl--TtoB">
  <p class="text-lv1--01">CONTENT TITLE</p>
  <h2 class="text-sub">コンテンツ タイトル</h2>
</div>

カテゴリ

<div href="" class="content-term">カテゴリ</div>

コンテンツ

<div class="content">
  <div>コンテンツ</div>
  <div>コンテンツ</div>
</div>

<ul class="content-select">
  <li>
    <h3><a href="javascript:void(0)">TERM</a></h3>
  </li>
  <li>
    <h3><a href="javascript:void(0)">TERM</a></h3>
  </li>
  <li>
    <h3><a href="javascript:void(0)">TERM</a></h3>
  </li>
</ul>

コンテンツ

見出しテキスト

テキスト

<div class="content--white">
  <div class="content__lt--alb"><img src="http://shiero.local/wp-content/themes/template/img/index/img10.png" alt="" loading="lazy">
  </div>
  <div class="content__ct--alc"><img src="http://shiero.local/wp-content/themes/template/img/index/img10.png" alt="" loading="lazy">
  </div>
  <div class="content__rt--alc"><img src="http://shiero.local/wp-content/themes/template/img/index/img10.png" alt="" loading="lazy">
  </div>
  <div class="content__inner">
    <div>
      <div class="content__sprit">
        <div>コンテンツ</div>
        <div class="content-hl">見出しテキスト</div>
          <div>テキスト</div>
        </div>
    </div>
  </div>
</div>

content__sprit--center

<div class="content-line">
  <div> class="content__inner">
    <div class="content__sprit--center">
      <div>content__sprit--center</div>
      <div>content__sprit--center</div>
    </div>
  </div>
</div>

見出しテキスト

term: desc
term: desc
term: desc
term: desc
term: desc

<div class="content-line--pale">
  <p> class="content-hl">
    見出しテキスト
  </p>
  <dl class="content__chart">
    <div>
      <dt>term</dt>
      <dd>desc</dd>
    </div>
    <div>
      <dt>term</dt>
      <dd>desc</dd>
    </div>
    <div>
      <dt>term</dt>
      <dd>desc</dd>
    </div>
    <div>
      <dt>term</dt>
      <dd>desc</dd>
    </div>
    <div>
      <dt>term</dt>
      <dd>desc</dd>
    </div>
  </dl>
</div>

サンプルテキスト

<div class="content--step">
  <div class="content__inner">
    <div class="content__wrap sa sa--up show">
      <div class="content__lt">
        <img src="http://shiero.local/wp-content/themes/template/img/index/img10.png" alt="" loading="lazy">
      </div>
      <img src="http://shiero.local/wp-content/themes/template/img/index/img02.png" alt="" loading="lazy">
      <p>サンプルテキスト</p>
    </div>
    <div class="content__wrap sa sa--up show">
      <div class="content__lt">
        <img src="http://shiero.local/wp-content/themes/template/img/index/img10.png" alt="" loading="lazy">
      </div>
      <img src="http://shiero.local/wp-content/themes/template/img/index/img02.png" alt="" loading="lazy">
      <p>サンプルテキスト</p>
    </div>
    <div class="content__wrap sa sa--up show">
      <div class="content__lt">
        <img src="http://shiero.local/wp-content/themes/template/img/index/img10.png" alt="" loading="lazy">
      </div>
      <img src="http://shiero.local/wp-content/themes/template/img/index/img02.png" alt="" loading="lazy">
      <p>サンプルテキスト</p>
    </div>
  </div>
</div>

---- リスト＆テーブル ----

ADRESS: 〒594-0071
大阪府和泉市府中町1-1-8
OPEN: 12:00~22:00
TEL: 080-2444-0718
ACCESS: JR和泉府中駅東口から徒歩1分

<dl class="list">
  <div class="list__inner">
    <dt>ADRESS</dt>
    <dd>〒594-0071<br>大阪府和泉市府中町1-1-8</dd>
  </div>
  <div class="list__inner">
    <dt>OPEN</dt>
    <dd>12:00~22:00</dd>
  </div>
  <div class="list__inner">
    <dt>TEL</dt>
    <dd>080-2444-0718</dd>
  </div>
  <div class="list__inner">
    <dt>ACCESS</dt>
    <dd>JR和泉府中駅東口から徒歩1分</dd>
  </div>
</dl>

---- ボタン ----

画像

<a class="btn--blank" href="javascript:void(0)">
  <div>画像</div>
  <i class="fas fa-window-restore"></i>
</a>

テキスト

<a class="btn" href="javascript:void(0)">
  <i class="btn__icon--before fas fa-chevron-left"></i>
  テキスト
  <i class="fas fa-chevron-right"></i>
</a>

テキスト

<a class="btn-color" href="javascript:void(0)">
  テキスト
</a>

テキスト

<a class="btn-color--pale" href="javascript:void(0)">
  テキスト
</a>

テキスト

<a class="btn-color--opacity" href="javascript:void(0)">
  テキスト
</a>

テキスト

<a class="btn--pale" href="javascript:void(0)">
  テキスト
</a>

テキスト

<a class="btn--opacity" href="javascript:void(0)">
  テキスト
</a>

テキスト

<a class="btn--content" href="javascript:void(0)">
  <i class="btn__icon--before fas fa-chevron-left"></i>
  テキスト
  <i class="fas fa-chevron-right"></i>
</a>

  <?php if (function_exists('pagination')) {
  pagination($wp_query->max_num_pages, get_query_var('paged'));
  } ?>

-------------------------↓上記の出力例-------------------------

<nav aria-label="Page navigation" class="pagination">
  <ol class="pagination__inner">
    <li><a href="http://shiero.local/blog/" class="pagination__btn"><i class="fas fa-chevron-left"></i></a></li>
    <li><a href="http://shiero.local/blog/" class="pagination__btn">1</a></li>
    <li class="pagination__current"><span class="pagination__btn">2</span></li>
    <li><a href="http://shiero.local/blog/page/3/" class="pagination__btn">3</a></li>
    <li class="pagination__dots">…</li>
    <li><a href="http://shiero.local/blog/page/8/" class="pagination__btn">8</a></li>
    <li><a href="http://shiero.local/blog/page/3/" class="pagination__btn"><i class="fas fa-chevron-right"></i></a></li>
  </ol>
</nav>

-----------------------------↓使用例-----------------------------

btn-medium--blank

-----------------------------↑使用例-----------------------------