WordPressテーマ「Lightning」にプラグイン「VK Blocks Pro」を組み込むと、ローディング画面（サイトのオープニングアニメーション）を比較的カンタンに作ることができます。
今回は、標準的な一枚絵ではなく、時間差でロゴとキャッチフレーズが表示されるローディング画面を作ってみました。
Lightningで洒落たローディング画面を作りたい
Lightningを使ったサイトにローディング画面を（プラグインなしで）組み込むこと自体は、それほど難しくありません。
Vektor Passport（有償）を利用しているなら、テンプレート集「VK パターンライブラリ」にある「オープニングアニメーション_テキストが波打つ」をサイトに流し込み、あとは好みで文字なり画像なりを設定するだけでも完成します。
基本的には、VK Blocks Proの「固定表示ブロック」を使い、表示が消えるまでの時間を調整することでローディング画面を作る、という形です。その操作手順は、こちらの魚沼情報サービスさまの記事にも大変分かりやすく記載されています。
さて、今回の私の試行錯誤は、このLightning＋VK Blocks Proで作るローディング画面にもうひと味加えたい、という動機から始まりました。
まず、個人的には、この学而図書HPのローディング画面のように、まっ白な画面からロゴが出て、わずかに遅れてキャッチフレーズが出てから、一気にスッと消えてメイン画面に移ってほしいなあ、と思うわけです（学而図書本体のローディング画面は、TCDテーマ「RIKYU」の機能によるものです）。
次に、固定表示ブロックを使う方法には、公式フォーラムにも投稿されていた問題があり、そのままでは使用がためらわれました。私の環境では、どんなブラウザを使っても、一瞬だけローディング画面より先にページ本体が表示されてしまうケースが頻発するのです。ほんの一瞬とはいえ実に格好悪い現象なので、なんとか解決策を見つけたいと考えました。
……というわけで、以下の2つの課題を設定した上で、ローディング画面を試作しています。
2．きっちりローディング画面から開始する（サイト本体をちらっと表示させない）
結果として完成したローディング画面は、以下のサイトからご覧いただけます。おおむね、学而図書本体と同じ動きをするようにしてみました。
なお、解決できなかった課題は、「ブラウザを閉じるまで再表示しない」機能をオンにすると挙動が安定せず、背景色が完全に透過してしまう点です。
この機能を使えないと、再読み込みするたびにローディング画面が入ってしまいます。見本のようなランディングページならよいですが、企業サイトにはきついですね。
今回のローディング画面を作成した方法は、以下の通りです。
作業① ロゴ・キャッチフレーズの時間差表示
まず、時間差でロゴ・キャッチフレーズがフェードインし、最後に背景ごとまとめて消えるような構造を作ります。必要なのは以下の手順です（説明用の画像をそのうち足します）。
- 「固定表示」ブロックを3つ、背景色用・ロゴ用・キャッチフレーズ用の順でフロントページの最初に配置する。「カバー」ブロックをそれぞれの固定表示ブロック内に配置し、「フルハイト」に設定しておくこと。
- 背景色は、カバーブロックの「オーバーレイ」設定で色を決定し、「不透明度」を100にしておく。
- ロゴとキャッチフレーズは、「カバー」ブロック内に画像・文章をそれぞれ入力し、「レスポンシブスペーサー」ブロックを活用して上下の位置を整える。その後、ロゴ・キャッチフレーズの固定表示ブロックには、「カスタムCSS」欄に以下の記述を加えておくと、変化がなめらかになる（消去時の動きは今一歩だが妥協しておく）。
※カスタムCSSのブロック毎の設定および下記のクラス「selector」はVK Blocks Proの機能。
selector {
transition: opacity 1.5s ease; /* 変化の速度：1.5秒 */
}
- ロゴ・キャッチフレーズの大きさをPCとモバイルで変えたい場合、2種類を配置した上で、「非表示設定」を使って表示さない画面サイズを指定しておく。ざっとでいいなら、モバイルで表示させたい方は「画面サイズ：md、lg、xl、xxl」で非表示にしておくくらいでもよい（PCはその逆）。
- すべての固定表示ブロックの「表示タイプ」を「表示および非表示までの時間を指定」、「固定位置」を「上」にして、「タイマー設定」を次のように設定する。
※3枚の固定表示ブロックすべてで、表示・非表示の合計秒数を同じにすること。
設定の例）
背景色用：「表示するまでの秒数」を0、「非表示にするまでの秒数」を4.3（合計4.3）
※表示するまでの秒数が0だと発生する不具合は解消されたはず。ただ0.3などでも後述の不具合は発生する。
ロゴ用：「表示するまでの秒数」を1、「非表示にするまでの秒数」を3.3（合計4.3）
キャッチフレーズ用：「表示するまでの秒数」を1.3、「非表示にするまでの秒数」を3（合計4.3）
これで、白背景→ロゴ→キャッチフレーズが時間差で表示されるローディング画面が完成しました。
しかし、このままでは（少なくとも私の環境下だと）ローディング画面の読み込みにかかる一瞬の間に、サイト本体がちらっと見えてしまって不格好です。そこで、作業②が必要になります。
作業② きっちりローディング画面から開始させる
サイト本体がローディング画面の前に出てきてしまう問題を解決するには、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
});これで、サンプルのローディング画面が完成しました。
しかし、大きな問題が未解決のまま残っています。固定表示ブロックの「ブラウザを閉じるまで再表示しない」機能が、正常に動作しないのです。
課題 「ブラウザを閉じるまで再表示しない」時の動作不良
先述の通り、企業サイトならぜひオンにしたい「ブラウザを閉じるまで再表示しない」。しかし、この機能にチェックを入れると、私の環境では背景色が完全に透明になってしまいます。残念ながら、現状では再読み込みするたびにローディング画面が表示される状態です。
ロゴとキャッチフレーズは出るので、背景色のオーバーレイの不透明度がゼロになっているのかな？と白一色の画像データを背景にしてみたりしたのですが、どうもうまくいきません。単なる私の設定ミスなのか、バグや環境問題なのか判断がつかないので、気長に色々試してみたいと思っています。
そういったわけで、まだ課題は残りつつも、現代風のローディング画面をプラグインなしで実現する、というところには一応たどりつきました。固定表示ブロックは、画面横にメニューをくっつけたりできますし、面白い要素ですね。
学而図書ウェブデザイン室について
学而図書の裏メニュー・ウェブデザイン室は、もともと代表・笠原の知人・身内向けとして密やかに存在してきたホームページ制作・運用代行サービスです。
「予算が厳しい」「中身が決まっていない」「フィードバックする時間がない」「サーバーの管理は難しい」等々、それぞれのご事情に寄り添いつつ、起業直後の方から学校法人・各種団体まで、思いのほか多くの皆様にご利用いただいてまいりました。
私自身は、TCD AWARD2023で第4位をいただいた経験もあるとはいえ、普段は本の編集や組版を主に手掛けている身です。専門職の方と比べれば技量は劣るはずですが、案外お役に立てているのかもしれません。ありがたいことです。
偶然この記事をご覧になり、ちょうどホームページ制作が進まずお困りで、零細出版でもいいから話をしてみたい、という稀有な方がいらっしゃいましたら、何かのご縁ですのでお気軽にご連絡ください（オンラインでのご相談は、60分くらいまでなら無料で承ります）。
また、WordPressの利用が主ですが、制作内容によってはWix・Studioなどのツールにも対応可能です。「金額はこれが限度一杯」「文章を書ける担当者がいない」といった切実なお悩みにも、「それでは仕様を削りまくってどうにかしましょう」「リーフレットレベルなら、AIが激安で作ってくれるところもありますよ」など、生身の人間ならではの解決策をご提案できるのではないかと思います。
