ナビ

ナビゲーション

2列

<div class="column navi01">
<div class="col col2">
<h3><a class="icon-angle-circled-right" href="#">メニュー1</a></h3>
<p>テキストテキストテキスト。</p>
</div>
<div class="col col2">
<h3><a class="icon-angle-circled-right" href="#">メニュー2</a></h3>
<p>テキストテキストテキスト。</p>
</div>
</div>

2列サムネイル付き

※メニュータイトルの1行で入る最大文字数は8文字。文章は50文字。
※画像はメディアを追加から配置「左」、サイズ「サムネイル」を選択して挿入してください。

<div class="column navi02">
<div class="col col2">
<img loading="lazy" width="525" height="245" src="https://prsite.biz/wp/wp-content/uploads/2020/06/image-1.png" class="attachment-full alignleft size-thumbnail" alt="">
<h3><a class="icon-angle-circled-right" href="#">メニュー1</a></h3>
<p>テキストテキストテキストテキスト</p>
</div>
<div class="col col2">
<img loading="lazy" width="525" height="245" src="https://prsite.biz/wp/wp-content/uploads/2020/06/image-1.png" class="attachment-full alignleft size-thumbnail" alt="">
<h3><a class="icon-angle-circled-right" href="#">メニュー2</a></h3>
<p>テキストテキストテキストテキスト</p>
</div>
</div>

2列 サムネイル付き(ボーダー)

※メニュータイトルの1行で入る最大文字数は8文字。文章は45文字。
※画像はメディアを追加から配置「左」、サイズ「サムネイル」を選択して挿入してください。

<div class="column navi02">
<div class="col col2 border">
<img loading="lazy" width="525" height="245" src="https://prsite.biz/wp/wp-content/uploads/2020/06/image-1.png" class="attachment-full alignleft size-thumbnail" alt="">
<h3><a class="icon-angle-circled-right" href="#">メニュー1</a></h3>
<p>テキストテキストテキストテキスト</p>
</div>
<div class="col col2 border">
<img loading="lazy" width="525" height="245" src="https://prsite.biz/wp/wp-content/uploads/2020/06/image-1.png" class="attachment-full alignleft size-thumbnail" alt="">
<h3><a class="icon-angle-circled-right" href="#">メニュー2</a></h3>
<p>テキストテキストテキストテキスト</p>
</div>
</div>

3列

<div class="column navi01">
<div class="col col3">
<h3><a class="icon-angle-circled-right" href="#">メニュー1</a></h3>
<p>テキストテキストテキスト。</p>
</div>
<div class="col col3">
<h3><a class="icon-angle-circled-right" href="#">メニュー2</a></h3>
<p>テキストテキストテキスト。</p>
</div>
<div class="col col3">
<h3><a class="icon-angle-circled-right" href="#">メニュー3</a></h3>
<p>テキストテキストテキスト。</p>
</div>
</div>
<div class="column navi01">
<div class="col col3 imgNavi heightLine-group1"><a href="#">
<img loading="lazy" width="525" height="245" src="https://prsite.biz/wp/wp-content/uploads/2020/06/image-1.png" class="attachment-full size-full" alt=""></a>
<h3><a class="icon-angle-circled-right" href="#">メニュー1</a></h3>
</div>
<div class="col col3 imgNavi heightLine-group1"><a href="#">
<img loading="lazy" width="525" height="245" src="https://prsite.biz/wp/wp-content/uploads/2020/06/image-1.png" class="attachment-full size-full" alt=""></a>
<h3><a class="icon-angle-circled-right" href="#">メニュー2</a></h3>
</div>
<div class="col col3 imgNavi heightLine-group1"><a href="#">
<img loading="lazy" width="525" height="245" src="https://prsite.biz/wp/wp-content/uploads/2020/06/image-1.png" class="attachment-full size-full" alt=""></a>
<h3><a class="icon-angle-circled-right" href="#">メニュー3</a></h3>
</div>
</div>

ページ内ナビゲーション

2列表示「.nav-col2」・3列表示「.nav-col3」・4列表示「.nav-col4」

<ul class="localNav nav-col4">
<li><a href="#">ページ内リンク1</a></li>
<li><a href="#">ページ内リンク2</a></li>
<li><a href="#">ページ内リンク3</a></li>
<li><a href="#">ページ内リンク4</a></li>
</ul>
2017年3月9日