テーマLightning G3 Proでヒーローイメージを作成する方法

2022年12月5日

ワードプレスの人気テーマLightningで1stビューに画面いっぱいに広がるヒーローイメージを配置してみようと思います。

今回は、ヒーローイメージの背景画像を有料版Lightning G3 Pro Unit（VK Blocks Pro）に含まれるOuterブロックを使いながら、カスタムCSSとJavaScriptとでカスタマイズしていきます。

完成するヒーローイメージは、こちらのデモサイトで確認できます。

本記事では便宜上Lightning G3 pro独自のブロックを使いますが他のブロックで代用可能なので、他テーマでもヒーローイメージ設置の参考になるかと思います。

本記事で作成するヒーローイメージを表示する前に、loading animationを表示する方法もこちらの記事で紹介しているので合わせて参照ください。

ヒーローイメージ設定手順の概要

ヒーローイメージを設定する手順概要です。単純化のためにまずは画像のみをヒーローイメージとします。

1. 固定ページを準備
   （１カラムレイアウトやヘッダー非表示設定など、1stビューに全幅画像を表示する準備をする）
2. Outerブロックで背景画像を設定
   （全幅・余白などを設定し、カスタムCSS用にクラス名も付与しておく）
3. カスタムCSSの記述
   （②のOuterブロックの高さをCSS変数（CSSプロパティ）で指定する）
4. jsファイルの準備と記述
   （ブラウザ表示領域の高さを取得して③のCSS変数に格納する）
5. functions.phpでjsファイルを読み込む

ヒーローイメージ設定手順の詳細

①固定ページの準備

固定ページで作成していきますが、1stビューとして画像を画面いっぱいに広げるための準備として、固定ページ画面右の設定サイトパネルで次の設定をしておきます。

• 固定ページを１カラムレイアウトとする
• 1stビューにヘッダーなど何も表示しない設定
  （サイトコンテンツの上下余白をなし、ヘッダー・ページヘッダー・パンくずリストの非表示）

レイアウトの１カラム化は、ダッシュボードメニューの外観＞カスタマイズ＞レイアウト設定＞カラム設定　でも可能です（その場合は全固定ページ共通の設定となります）。

②Outerブロックで背景画像などを設定

固定ページの編集画面でVK Outerブロックを挿入し背景画像など設定します。

Outerブロックの設定サイドパネルで、以下の設定とします。

• 透過設定：ゼロ
• 背景画像（PC）を設定（今回は2560×1542pxの画像を使いました）
• 背景画像の位置：カバー
• レイアウト設定：全幅
• 余白：標準の余白を使用しない
• 追加CSSクラス：”hero-image”を入力

追加CSSクラスに入力したクラス名を使って、CSSやJavaScriptでOuterブロックをヒーローイメージにしていきます。

Outerブロックの下にコンテンツを配置

ヒーローイメージとなるOuterブロックの下に、ページ全体の高さを十分保つための適当なコンテンツを配置しておきましょう。

Lightningの場合は、VKパターンライブラリからコピペすると簡単です。ここでは以下のようにしておきます。

③CSSの記述

CSSを記述します。

記述場所は子テーマのstyle.cssやカスタマイザーの追加CSS欄でも構いませんが、CSSの適用範囲が当該固定ページだけなので、固定ページ編集画面下部VK All in One Expansion UnitのカスタムCSS欄でもよいでしょう。

Outerブロックの高さをCSS変数–vhとしておきます。あとでjavascriptで–vhの値を取得します。

.hero-image {
    height: 100vh;
}
.hero-image {
    height: var(--vh, 100vh);
}

本記事執筆時、最初は以下のCSSとしていました。

.hero-image {
    height: var(--vh);
}

これでも問題なく動くのですが、ワードプレスのサポート対象外とはいえIEのことも考慮してheight: 100vh;も記述することにしました。

④jsファイルの準備と記述

JavaScriptファイル名をhero.jsとして、子テーマフォルダのstyle.cssと同じ階層に設置します。

記述する内容は以下の通りです。コメント文で各コードの役割がわかります。

const setFillHeight = () => {//ブラウザ表示エリアの高さvhを取得して--vhに格納する関数
  const vh = window.innerHeight;
  document.documentElement.style.setProperty("--vh", `${vh}px`);
};
// 画面のサイズが変化したとき再計算
window.addEventListener("resize", setFillHeight);
// 実行
setFillHeight();

⑤functions.phpでjsファイルを読み込む

子テーマのfunctions.phpにhero.jsを読み込む記述を追記します。

define( 'MY_DIR_URL', get_stylesheet_directory_uri() );
define( 'MY_DIR_PATH', get_stylesheet_directory() );

add_action( 'wp_enqueue_scripts', function() {
    // JSの読み込み
    $timestamp = date( 'Ymdgis', filemtime( MY_DIR_PATH . '/hero.js' ) );
    wp_enqueue_script( 'hero-script', MY_DIR_URL . '/hero.js', [], $timestamp, true );
} );

出来上がったヒーローイメージ

パソコン表示

パソコン表示では横広がりのヒーローイメージとなります。

スクロールしてみると、ブラウザーの表示領域の高さいっぱいにヒーローイメージが表示されていたことがわかります。

スマホ表示

スマホでも画面高さいっぱいにヒーローイメージが表示されます。

カバーブロックで文字を重ねる

せっかくなので、ヒーローイメージの画像の上にテキストを重ねてみましょう。

こんな感じで、ヒーローイメージ最下部に半透明の黒背景の上に白テキストを表示します。

テキストを重ねて表示する手順

1. Outerブロック内にカバーブロックを挿入して設定
2. カスタムCSSに追記してカバーブロックの表示を整える

カバーブロックの詳細な使い方は次の記事を参照ください。

①Outerブロックにカバーブロックを挿入して設定

カバーブロックを全幅で挿入して、段落ブロック内にテキストを入力します。

上のリスト表示を見れば、ブロックの配置構造がわかります。

カバーブロックの設定は以下の通りです。

• 背景色：黒
• 不透明度：50%
• カバー画像の最小高さ：30vh
• 追加CSSクラス：”hero-text”を入力

②カスタムCSSの追加記述

以下のように７行目以降を追記します。

.hero-image {
    height: 100vh;
}
.hero-image {
    height: var(--vh, 100vh);
}
.hero-image>div {
    height: 100%;
}
.hero-image .vk_outer_container {
    display: flex;
    height: 100%;
}
.hero-text {
    flex: auto;
    align-self: flex-end;
}
#scroll-down {
    cursor: pointer;
}

今回はヒーローイメージの最下部に表示したいのでaligh-self: flex-end; としましたが、align-self: center; とすれば中央部に表示することができます。

出来上がったヒーローイメージ

以上で目論見どおり、ヒーローイメージの最下部にテキストが表示されるようになります。

パソコン表示

スマホ表示

スクロールボタンを追加する

最後にスクロールボタンを追加しましょう。クリックするとヒーローイメージの高さ分だけスムーススクロールします。

スクロールボタン追加の手順

1. カバーブロック内にVKアイコンブロックを挿入して下向き矢印アイコンを設定
2. hero.jsに追加記述をする

①アイコンブロックで下向き矢印ボタンを追加

VKアイコンブロックの設定は以下の通りとします。

• アイコン：<i class="fas fa-arrow-down"></i>
• スタイル：アイコンのみ
• 色：白
• HTMLアンカー：”scroll-down”を入力

アイコンには<i>タグをベタ打ちしなくても、”アイコンを選択”ボタンをクリックして下向き矢印アイコンを選べばOKです。

②jsの記述を追加

hero.jsファイル内に次の5～12行目のコードを追加します。

const setFillHeight = () => {//ブラウザ表示エリアの高さvhを取得して--vhに格納する関数
  const vh = window.innerHeight;
  document.documentElement.style.setProperty("--vh", `${vh}px`);

  //#scroll-downボタンがクリックされたときにvhだけスムーススクロールする
  const scroll = document.querySelector("#scroll-down");
  scroll.addEventListener("click", () => {
    window.scroll({
        top: vh,
        behavior: "smooth"
    });
  });
};
// 画面のサイズが変化したとき再計算
window.addEventListener("resize", setFillHeight);
// 実行
setFillHeight();

完成サイトの動画

以上でスクロールボタンの設置が完了です。

デモサイトでも確認できますが、一応下記に動画を貼っておきます。

もちろんiphone含めてモバイル対応もしているので、デモサイトで確認してみてください。

まとめ

今回はLightning G3 Proを使ってヒーローイメージを作ってみましたが、もちろん他のテーマでも可能です。

Outerブロックの代わりにカバーブロック、VKアイコンブロックの代わりには、画像ブロックでアイコン画像を挿入したりカスタムHTMLブロックでFont Awesomeのコードを貼ったりするとよいでしょう。

とはいえ、有料プラグインLightning G3 Pro Unitを使った方が、固定ページのレイアウトやヘッダー等の非表示も簡単にできるので、おすすめです。Vektor Passportを購入すれば、Lightning G3 Pro Unitだけでなく、Outerブロックを使えるVK Blocks Proも同梱されています。

Vektor Passportについて詳しく知りたい方はこちらの記事がおすすめです。