これはH1タグです

これはPタグです。

これはH2タグです

これはH3タグです

これはH4タグです

これはH5タグです

これはH6タグ class=”green”です

これはH6タグ class=”blue”です

これはH6タグ class=”gray”です

---

↑<hr>

コンテンツの2分割

↑このようにコンテンツを2つに分ける時は、 <div class=”split-2″></div> を使います。

ソースコード

コンテンツの3分割

コンテンツを3つに分ける時は、 <div class=”split-3″></div> を使います。

ソースコード

<div class=”split-3 img-list-box”>
のように、”img-list-box”をクラスに追加すると、個々のコンポーネントがグレーのボックスで囲まれます。

ソースコード

画像キャプション

これは画像キャプションです

<img src=”/wp-content/themes/oshino/images/light-guide/page-lightguide-001.jpg”>
<span>これは画像キャプションです</span>

このように、画像の次に<span>タグのコンテンツがくると、画像のキャプションとなります。

ボタンコンポーネント

自動車専用光学製品はこちら

<a class=”button-black-white button-center”>自動車専用光学製品はこちら<i class=”flipicon-ff right”></i></a>
class=”button-center”を足すと、センタリングされます。（親要素にpositionが設定されている場合のみ）

<a class=”button-main-white” id=”megamenu-contact”><i class=”flipicon-mail”></i>お問い合わせ</a>

<a class=”button-border-white”>TOP<i class=”flipicon-ff right”></i></a>

PDFへのリンク

<a href=”test.pdf” class=”button-center”>PDFへのリンク</a>
拡張子がpdfの場合、自動的にボタン化。アイコンも自動付与。