*サンプルページ – メインビジュアル用パーツ

使い方

1.メインビジュアルの親コンテナである<div id=”eyecatch”>(home.phpテンプレート内)にclass=”custom-eyecatch”を付与する。

2.以下の各種パーツhtmlを<div class=”caption”>内(MetaSliderでは項目「キャプション」、カスタマイザーのメインビジュアル設定では項目「メインビジュアル上に重ねるコンテンツ」)に配置する。

メタスライダーの「キャプション」
カスタマイザー、メインビジュアル設定「メインビジュアル上に重ねるコンテンツ」

メインビジュアル上に配置するパーツ

キャッチコピー

吾輩は猫である。

 HTMLコード<div class="eyecatch-content">
<p class="caption-catchphrase">吾輩は猫である。</p>
</div>

ディスクリプション

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

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

ボタン

 HTMLコード<div class="eyecatch-content">
<a href="./" class="caption-button">ボタン</a>
<a href="./" class="caption-button caption-button-dark">ボタン黒</a>
<a href="./" class="caption-button caption-button-light">ボタン白</a>
</div>

ボタン(youtube動画をポップアップウィンドウで再生)

 HTMLコード<div class="eyecatch-content">
<a href="#" class="caption-button caption-button-dark js-modal-btn" data-video-id="oMK6HE1_KQY">ビデオを再生する</a>
</div>

modal-video.jsプラグインを利用しています。
footer.phpテンプレート内に以下jsコードを記述します。オプションは必要に応じて修正してください。

 jsコード$(function() {
  //modal-video
  $(".js-modal-btn").modalVideo({
    youtube:{
      autoplay:1,
      // mute:1,
      rel:0
    }
  });
});

ニュース欄

2020/12/01:一行のお知らせです。

 HTMLコード<div class="eyecatch-content">
<p class="caption-news"><em>2020/12/01:</em>一行のお知らせです。</p>
</div>

コンテンツ背景黒

“.txt-bg-dark”クラスを”.eyecatch-content”と併用する

 HTMLコード<div class="eyecatch-content txt-bg-dark">
<p class="caption-description">".txt-bg-dark"クラスを".eyecatch-content"と併用する</p>
</div>

コンテンツ背景白

“.txt-bg-light”クラスを”.eyecatch-content”と併用する

 HTMLコード<div class="eyecatch-content txt-bg-light">
<p class="caption-description">".txt-bg-light"クラスを".eyecatch-content"と併用する</p>
</div>

スクロール矢印:下部

 HTMLコード<div class="eyecatch-scroll scroll-lower"><a href="#">scroll</a></div>

スクロール矢印:左側

 HTMLコード<div class="eyecatch-scroll scroll-leftside"><a href="#">scroll</a></div>

スクロール矢印:右側

 HTMLコード<div class="eyecatch-scroll scroll-rightside"><a href="#">scroll</a></div>

パーツ配置サンプル

左下/テキスト左よせ/テキスト背景黒

上下中央/テキスト中央よせ/テキスト背景なし

右上/テキスト右よせ/テキスト背景白

レイアウト変更クラス一覧

※”.custom-eyecatch”と併用する

.caption-lt左上
.caption-lc左中央
.caption-lb左下
.caption-cc上下中央
.caption-rt右上
.caption-rc右中央
.caption-rb右下

※”.custom-eyecatch”と併用、もしくは.eyecatch-content内の要素に個別につける

.txt-lテキスト左よせ
.txt-cテキスト中央よせ
.txt-rテキスト右よせ

CONTACT

ご予約・お問い合わせ

電話でお問い合わせ
[要予約]受付時間 8:00~19:00
まずはお気軽にご相談ください。
メールでお問い合わせ
まずはお気軽にご相談ください。
メールは24時間受け付けております。
LINEでお問い合わせ
ご質問等お気軽にご相談ください。
2度目からはLINEで予約もできます。
PAGE TOP