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

キャッチコピー

 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
    }
  });
});

ニュース欄

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

コンテンツ背景黒

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

コンテンツ背景白

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