WordPressテーマ「Lightning」にプラグイン「VK Blocks Pro」を組み込むと、ローディング画面（サイトのオープニングアニメーション）を比較的カンタンに作ることができます。
今回は、背景色→ロゴ→キャッチフレーズと時間差で要素が表示されるローディング画面を作ってみました。
Lightningで洒落たローディング画面を作りたい
Lightningを使ったサイトにローディング画面を（プラグインなしで）組み込むこと自体は、それほど難しくありません。
Vektor Passport（有償）で利用できるプラグイン「VK Blocks Pro」を導入した後、テンプレート集「VK パターンライブラリ」にある「オープニングアニメーション_テキストが波打つ」をサイトに流し込み、あとは好みで文字なり画像なりを設定するだけでも完成します。
基本的には、VK Blocks Proの「固定表示」ブロックを使い、表示が消えるまでの時間を調整することでローディング画面を作る、という形です。その操作手順は、こちらの魚沼情報サービスさまの記事にも大変分かりやすく記載されています。
さて、今回の私の試行錯誤は、このLightning＋VK Blocks Proで作るローディング画面にもうひと味加えたい、という動機から始まりました。
まず、個人的には、この学而図書HPのローディング画面（注：最初にトップページからアクセスした場合にのみ表示されます。確認が必要な場合は別ブラウザ等でリンク先のURLに直接アクセスしてください）のように、まっ白な画面からロゴが出て、わずかに遅れてキャッチフレーズが出てから、一気にスッと消えてメイン画面に移ってほしいなあ、と思うわけです（学而図書本体のローディング画面は、TCDテーマ「RIKYU」の標準機能によるものです）。
次に、もともと固定表示ブロックを使う方法には公式フォーラムにも投稿されていた問題があり、そのままでは使用がためらわれました。私の環境では、どんなブラウザを使っても、一瞬だけローディング画面より先にページ本体が表示されてしまいます。ほんの一瞬とはいえ実に格好悪いので、なんとか解決策を見つけたいところです。
……というわけで、以下の2つの目標を設定した上で、ローディング画面を試作しています。
2．きっちりローディング画面から開始する（サイト本体をちらっと表示させない）
結果として完成したローディング画面は、以下のサイトからご覧いただけます。おおむね、学而図書本体と同じ動きを目指してみました。この見本では、再読み込みするたびにローディング画面が表示されます。
なお、今回の試作品の課題は、「ブラウザを閉じるまで再表示しない」機能をオンにしたときの挙動が安定しない点です。
この機能が正しく動作しない場合、見本のようなランディングページならともかく企業サイトでの活用は難しいので、クライアントワークに使おうという方は十分にご注意ください。
今回のローディング画面を作成した方法は、以下の通りです。
作業① ロゴ・キャッチフレーズの時間差表示
まず、時間差でロゴ・キャッチフレーズがフェードインし、最後に背景ごとまとめて消えるような構造を作ります。
※ここからの作業は、ほぼ全てVK Blocks Proの機能が前提となります。
1．「固定表示」ブロックの配置とカバーブロックの設定
まず、「固定表示」をフロントページの最初に配置します。
次に、固定表示ブロックの中に「カバー」ブロックを配置し、「フルハイト」に設定してください（画像参照）。
その後、カバーブロックの「オーバーレイ」設定で色を決定したら、今回は「不透明度」を100にしておきます。
2．ロゴとキャッチフレーズの設定
先ほど作ったカバーブロック内に、必要な画像・文章をそれぞれ入力します。レスポンシブスペーサー等を活用して、ロゴとキャッチフレーズの表示位置をいい塩梅に調整してください。
このとき、ロゴ・キャッチフレーズの大きさをPCとモバイルで変えたいなら、同じカバーブロック内に2種類のデータを配置しましょう。その上で、「非表示設定」を使って表示させない画面サイズを指定しておきます（画像参照）。
ざっとでいいなら、モバイルで表示させたい方の画像は「画面サイズ：md、lg、xl、xxl」で非表示、PC用はその逆に「xs、ms」を非表示、というくらいでも問題ないと思います。
3．表示時間を調整する
ここからは、背景色・ロゴ・キャッチフレーズの表示時間を調整していきます。今回は「4秒でローディング画面が完了する」イメージにしました。
まずは、固定表示ブロックの設定です。「表示タイプ」を「表示および非表示までの時間を指定」、「固定位置」を「上」にして、「タイマー設定」を設定例のようにしておきます。
表示するまでの秒数：0
非表示にするまでの秒数：4.0
そして、背景色を設定しているカバーブロック、ロゴの画像ブロック、キャッチフレーズの段落ブロックひとつひとつにCSSを割り当てます。
各要素を選択した後、画面右の設定項目「カスタムCSS」（「非表示設定」の下にあります）に、次のようなコードを入力していきます。いまいちうまく動かない中で試行錯誤し、結果として正常に動作したものですが、どこかの部分が機能していなかったら目をつむってやってください。
①カバーブロック（背景色設定）用カスタムCSSの例
selector {
opacity: 1;
/* 合計4.0秒で完結、最初から表示 */
animation: fixedTimeline0 4s linear forwards !important;
}
@keyframes fixedTimeline0 {
/* 開始後80％まで待機 */
0%, 85% {
opacity: 1;
}
/* 85～100％でフェードアウト完了 */
100% {
opacity: 0;
}
}②画像用カスタムCSSの例
selector {
opacity: 0;
/* 合計4.0秒で完結 */
animation: fixedTimeline1 4s linear forwards !important;
}
@keyframes fixedTimeline1 {
/* 開始後20％（約0.8秒）は待機 */
0%, 20% {
opacity: 0;
}
/* 20％～35％でフェードイン */
35% {
opacity: 1;
}
/* 35～85％は静止 */
85% {
opacity: 1;
}
/* 85～100％でフェードアウト完了 */
100% {
opacity: 0;
}
}③キャッチフレーズ用カスタムCSSの例
selector {
opacity: 0;
/* 合計4.0秒で完結 */
animation: fixedTimeline2 4s linear forwards !important;
}
@keyframes fixedTimeline2 {
/* 開始後30％（約1.2秒）は待機 */
0%, 30% {
opacity: 0;
}
/* 30％～50％でフェードイン */
50% {
opacity: 1;
}
/* 50～85％は静止 */
85% {
opacity: 1;
}
/* 85～100％でフェードアウト完了 */
100% {
opacity: 0;
}
}これで、白背景→ロゴ→キャッチフレーズが時間差で表示されるローディング画面が完成しました。
しかし、このままでは（少なくとも私の環境下だと）ローディング画面の読み込みにかかる一瞬の間に、サイト本体がちらっと見えてしまって不格好です。そこで、作業②が必要になります。
作業② きっちりローディング画面から開始させる
サイト本体がローディング画面の前に出てきてしまう問題を解決するには、function.phpをいじる必要がありました。
最初は、ローディング画面の読み込みにかかる一瞬だけ白背景を前面に押し出すようなカスタムCSSで楽に処理できるのはと考えたのですが、どうもうまくいきません。
仕方ないので、子テーマのfunction.phpに、サイト読み込み直後のわずかな時間、画面を背景色で塗りつぶす設定を追加します。トータルで0.5～0.8秒くらい、画面を隠すイメージです。将来的に「ブラウザを閉じるまで再表示しない」機能が正常動作したときのことを考えれば、フワッと消えておいたほうがよいでしょう。
具体的な作業は、以下のようになります。PHPファイルを変更しますので、作業はすべて自己責任で実施してください。
- 子テーマを導入する（Lightningの子テーマの情報は公式サイト・ベクトレ参照）。
- 以下のコードを、子テーマのfunction.phpに追加してアップロードする
※試作品は問題なく動いていますが、AIを併用して雑に組んでいるので責任は負えません。ご注意ください。
/* ローディング画面の表示遅延対策 */
add_action( 'wp_body_open', function() {
?>
<style>
#loading-screen-fixed {
position: fixed;
inset: 0;
background: #fff; /* 白背景 */
z-index: 999999;
transition: .3s; /* 消えるスピード：0.3秒 */
}
.loaded #loading-screen-fixed {
opacity: 0;
visibility: hidden;
}
</style>
<script>
window.addEventListener('load', function() {
setTimeout(function() {
document.body.classList.add('loaded');
}, 500); // 待機時間：0.5秒
});
</script>
<?php
});これで、サンプルのローディング画面が完成しました。
しかし、ひとつ大きな問題が残っています。この状態だと、固定表示ブロックの「ブラウザを閉じるまで再表示しない」機能をオンにしたときの挙動が安定しないのです。
（課題）「ブラウザを閉じるまで再表示しない」場合の動作不良
企業サイトならほぼ必須と言える機能「ブラウザを閉じるまで再表示しない」は、固定表示ブロックの設定（表示時間の設定で使ったエリアにあります）でオンにできます。
しかしながら、私の環境でこの設定をオンにすると、スマートフォン等のモバイル表示時に高確率でローディング画面が表示されません（試行した範囲では100％失敗しています）。PC版のブラウザでは問題なく動くように見え、原因は何とも判断しづらいところです。
ただ、サイト本体がふわっと表示されるように調整したことが幸いして、スマホで読み込みに失敗しても、ローディング画面がない普通のサイトのように見えるだけです。トップ画面に戻るたびに表示されるよりは、スマホでは表示されないほうがよいとも言えるでしょう（ちょっと読み込みが遅いですが）。
ご参考までに、「ブラウザを閉じるまで再表示しない」バージョンのローディング画面はこちらです。
そういったわけで、課題は残しつつも、ちょっといい感じのローディング画面をプラグインなしで実現する、というゴール自体には一応たどりつきました。固定表示ブロックは、画面横にメニューをくっつけたりできますし、面白い要素ですね。
学而図書ウェブデザイン室について
学而図書の裏メニュー「学而図書ウェブデザイン室」は、もともと代表である笠原が知人・身内向けとして密やかに提供してきたホームページ制作・運用代行サービスです。
「予算が厳しい」「中身が決まっていない」「フィードバックする時間がない」「サーバーの管理は難しい」等々、それぞれのご事情に寄り添いつつ、起業直後の方から学校法人・各種団体まで、思いのほか多くの皆様にご利用いただいてまいりました。
学而図書は、事業であれ教育であれ、優れた実践の成果を散逸させることなく、本やウェブサイトといった媒体へと昇華させて人間社会に投げ込むことこそ最も重要な務めであると考えています。
偶然この記事をご覧になり、ちょうどホームページ制作が進まずお困りで、零細出版でもいいから話をしてみたい、という稀有な方がいらっしゃいましたら、ご注文とは関係なくお気軽にご連絡ください。オンラインでのご相談でよろしければ無料で承ります。
