ワードプレスの始め方
~稼ぐためのしくみづくりまでを
徹底解説!!

好評セミナー”ワードプレス100分でブログサイトを制作”を書籍化しました

amazonでたった1コインで手に入れる

ワードプレスの始め方
~稼げるしくみづくりまで
書籍で徹底解説!

詳細はこちら

amazonでたった1コインで手に入れる

ブログ型サイトでも
本格的ホームページ型でも
起業に副業に・・・

あなたに専門知識がなくても
目的のWebサイトを制作できるよう
ウェブチルがお手伝いします

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

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

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

この記事でわかること

ワードプレスのテーマLightning G3 Pro Unitを使って、1stビューにヒーローイメージを配置する方法。
(パソコンやモバイルの両方で画面いっぱいに画像を広げます)

  • OuterブロックとCSS・JavaScriptを使って、ヒーローイメージ画像を配置
  • 画像の中にテキストも配置(カバーブロック使用)
  • さらにスムーススクロール用のボタンも追加する
    (クリックするとヒーローイメージからスクロールアウトします)

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

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

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

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

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

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

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

①固定ページの準備

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

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

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

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

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

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

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

追加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ブロックにカバーブロックを挿入して設定

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

Outerブロック内にカバーブロックを挿入

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

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

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

②カスタムCSSの追加記述

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

.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アイコンブロックをカバーブロック内に挿入する

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

  • アイコン:<i class="fas fa-arrow-down"></i>
  • スタイル:アイコンのみ
  • 色:白
  • HTMLアンカー:”scroll-down”を入力
VKアイコンブロックの設定

アイコンには<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を使った方が、固定ページのレイアウトやヘッダー等の非表示も簡単にできるので、おすすめです。

Lightning G3 Pro Pack(アップデート期間1年)
Lightning G3 Pro Pack(アップデート期間3年)
Vektor WordPress Solutions

ワードプレスの始め方
~稼ぐためのしくみづくりまでを
徹底解説!!

好評セミナー”ワードプレス100分でブログサイトを制作”を書籍化しました

amazonでたった1コインで手に入れる