こんにちは！
フリーライターをしています、とらお。です

この度、自サイトをライター業務メインの形に大改造を致しまして、それに際してローディング（スプラッシュ）画面を作ってみたので覚書のようなレポのようなものを残しておくことにしました

ローディング画面

こちら私の個人サイトですので、実際のローディング画面は上のリンクから是非確認してみてください
（ちなみにスマホでもちゃんと動きます）

では続いてこちらのローディング画面をどうやって導入したかを説明します

導入方法

はじめに

今回、自サイトではCSSとJavaScriptを使用してローディング画面を追加しました！
今回の方法はSwellという有料Wordpressテーマのおかげで出来る手法です

他のテーマの場合は導入方法が違いますのでご注意くださいね

…が、ぶっちゃけテーマに限らず
CSSとかJavaScriptとか面倒なことしなくてもWordpressサイトにローディング画面を追加するだけだったら無料プラグインで十分できます

それが以下の「LoftLoader」というプラグイン

プラグイン自体は英語ですが操作は直感的でわかりやすく、有名なプラグインなので操作方法も調べれば普通に出てきます

アセットとしていくつか図形が用意されている他に好きな画像を置くことも可能ですので、とりあえずローディング画面を作りたい！というだけだったらこれで十分だと思います

では続いて、何故このプラグインではなく
CSSとJavaScriptで導入したのかと
導入方法を説明しますね

CSS・JavaScriptを使った理由

まず上記の「LoftLoader」というプラグインは
サイトのロードを行っている間、アニメーションを追加するという動作をします

ちなみに私が使いたかったアニメーションはこちら(5秒ぐらいのGifアニメーションです)

最初はLoftLoaderを導入してみたのですが
当方が使っている「Swell」という有料テーマは
ロードの速さが売りになってる商品…

なんとせっかく作ったアニメーションが
ほぼ再生されないまま
普通にサイトが表示されてしまうんです
マジで早いです

まだ肉球しか表示されてないよぉ～？！って段階でﾌﾜｧﾝｯて上に消えちゃってたので私はｸﾞｷﾞｷﾞｷﾞ…と歯を食いしばったわけです（？）

とはいえ「LoftLoader」の設定ではロード画面を表示している時間を設定したりは出来ないので（有料版があるのでそちらでは出来るかもしれません）
それなら好きな秒数表示しておけるCSSとJavaScriptで作ろうじゃないかと
思い立ったわけですね

導入方法

前項で「思い立った」とか言っておきながらアレですが、私はCSSやJavaScriptに関してはズブの素人です
学生時代にHTMLとJavaをちょっと齧ったことがあるぐらい

なのでコードは有識者の方々がWeb上で載せてくれてた方法を色々と調べて使わせて頂きました

まずはSwellの機能である「ブログパーツ」ページを作り、そこに画像ブロックでロード画面に置きたいgifを配置します

ブログパーツの操作はこれで「公開」して終了

続いてトップに設定している固定ページの編集画面に移動しまして、どこでもいいのでさっき作ったブログパーツを配置します

（色々やってて気付いたんですがこれ多分ブログパーツじゃなくてトップの固定ページにそのまま画像置くでも動作する気がします…試してないけど…！）

このブログパーツを選択した状態で
右側の「高度な設定」にて
「追加CSSクラス」のところに
「loading」と入力します

ちなみにこの「loading」ってのは書いてある通りクラス名です
クラス名ってなんぞや？って人は自分でggってね！！！
有識者の記事がいっぱいあるよ！！！

クラス名の設定が済んだら今度は、固定ページの編集画面一番下のとこの「CSS用コード」「JS用コード」ってとこにコードを入力します（↓のとこね）

こちらのJS用コードを入力するところはSwellの固有システム
他のテーマでJavaScriptを動かす場合は
「カスタムHTML」を利用するか
「テキストエディタ」で書き込む、もしくは
「functions.php」か「header.php」にスクリプトを記述する必要があるとのことです

調べた感じ、ロード画面を動かすためにはfunctions.phpに書き込んでね！という記事が多かったのでカスタムHTMLやテキストエディタでは対応できないかもしれません

…が、私はよくわからんので
自分で調べてみてね！！！！！！！

話を戻しまして…コードは以下↓

CSS

.loading {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100vw;
  height: 100vh;
  background-color: #444444;　/* 背景の色 */
  display: flex !important;
  align-items: center;
  justify-content: center;
  animation: fadeOut 5s 3s forwards; /* ロード画面を再生している時間 */
}

.loading img {
  opacity: 0;
  animation: logo_fade 5s 0.2s forwards;　/* アニメーションを表示させる時間 */
  width: 400px; /* ロゴのサイズを指定（パソコン） */
}

@media screen and (max-width: 959px) {
  .loading img {
    width: 300px; /* ロゴのサイズを指定（スマホ） */
  }
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    visibility: hidden;
  }
}

@keyframes logo_fade {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  60% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
  }
}

JavaScript

document.addEventListener("DOMContentLoaded", () => {
    const content = document.getElementById("content");
    const fixHeader = document.getElementById("fix_header");
    const loading = document.querySelector('.loading');

    content.style.zIndex = 101;
    fixHeader.style.opacity = 0;

    setTimeout(() => {
        document.getElementById("content").style.zIndex = 1;
        content.style.zIndex = 1;
        fixHeader.style.opacity = 1;
    }, 3000);

    loading.addEventListener('animationend', () => {
        loading.style.display = 'none';
    });
});

CSSはまだしもJavaScriptはコピペなので
ぶっちゃけ何やってるかは
マジで本当によくわかってないです
素人でも導入できるようにコード公開してくれてる有識者の方々には
本当に頭が上がりません…すごすぎ

さて、ここまで導入して無事にロード時間が動きまして
「やったぁぁああ！！」となっていたのですが
ここで問題発生…！

リンクが…押せねぇ…！！！！！！！？？？？？？？！！！！！

ちょっと分かりづらい上にカーソルが録画できなかったんですが…サイト内にマウスカーソルを置いたときに拡大鏡になってしまい
（↓のやつね）

クリックしたらローディング画面が再生されてしまって、トップ画面にあるリンクが軒並み押せなくなってしまっていたんです…！

どういうこっちゃ

表題のとおりです
当時マジで「どういうこっちゃ」状態でした

なんとなく動作をみた感じだと
素人目で見た恐らくの予想ですが…

この「ブログパーツ」がサイトに対して常に全面に出ている、もしくはロード画面が「透明になる」という動作はされていながらサイト上ではロード画面が残ったままなのでは…と推察しました

…が、今回コードを参考にしたサイトは同じ現象が起こっていて
そういうもんなのかなあと思い、トップ画面にはリンクを置かないようにしようかなとも考えました

しかしやっぱりイメージ通りのものを作りたかった私は原因究明をし、対策を調べようと思ったのです

…いやしかし、どう調べりゃいいのかわからん！！！

この現象の名前なんて言うんだ？！！
どうすりゃいいんや！！！

試行錯誤して色々調べてみましたが
やっぱり対策はわからず…
そもそもどう調べりゃ良いのか問題は解決せずついに私は…

助けてぇ～！！！
ChatGPTえもん～～～～～～！！！！

とChatGPTにヘルプを出したわけです

助けて！ChatGPTえもん！

まず原因がJavaScriptとCSSどちらにあるか判別がつかなかった私は、どういう動きをしているのか全くわからなかったJavaScriptについて聞いてみることにしました

ChatGPTえもんは色々と教えてくれたんですが
ぶっちゃけ今もよくわかってないです

で、こりゃ直接的に聞いてみるっきゃねぇなと思った私は続いてこう質問しました

するとChatGPTえもんは…

とのことでした

なんとなく「ブログパーツが全面にある」かつ「クリックできる状態にあるから問題」なのでは…と推察していた私はとりあえず一番最初の

.loading {
  pointer-events: none;
}

を導入してみようと思いました

上記はChatGPTえもんによると「loading」クラスが発生している間、そのクラス内でのクリック動作を禁止する命令とのこと

私の見立てでは「ブログパーツ」がコードで透明になっているだけでまだ前面に存在してしまっているというイメージだったので、これはもしや…！と天啓を受けました

これを導入すると
loadingクラスの対象となる「ブログパーツ」に
クリックが効かなくなるということ
つまりこれなら前面にブログパーツが残ったままだったとしても問題ないのでは…と思ったわけです
（合ってるかはわからんです）

まあ御託はいいからやってみようぜってことで早速導入！

まずは事前に作った「loading」クラスに
そのまま「pointe~」を入れてみる…

.loading {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100vw;
  height: 100vh;
  background-color: #444444;　/* 背景の色 */
  display: flex !important;
  align-items: center;
  justify-content: center;
  animation: fadeOut 5s 3s forwards; /* ロード画面を再生している時間 */

　pointer-events: none;　/* 今回追加したヤツ */
}

.loading img {
  opacity: 0;
  animation: logo_fade 5s 0.2s forwards;　/* アニメーションを表示させる時間 */
  width: 400px; /* ロゴのサイズを指定（パソコン） */
}

@media screen and (max-width: 959px) {
  .loading img {
    width: 300px; /* ロゴのサイズを指定（スマホ） */
  }
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    visibility: hidden;
  }
}

@keyframes logo_fade {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  60% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
  }
}

が、変わらん！
やはりダメか…と思ったのですが
ド素人、またしても天啓を受けます

ChatGPTえもんのこの書き方なら…

.loading {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100vw;
  height: 100vh;
  background-color: #444444;
  display: flex !important;
  align-items: center;
  justify-content: center;
  animation: fadeOut 5s 3s forwards;
}

.loading img {
  opacity: 0;
  animation: logo_fade 5s 0.2s forwards;
  width: 400px; /* ロゴのサイズを指定（パソコン） */
}

@media screen and (max-width: 959px) {
  .loading img {
    width: 300px; /* ロゴのサイズを指定（スマホ） */
  }
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    visibility: hidden;
  }
}

@keyframes logo_fade {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  60% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
  }
}

/* ↓追加したヤツ */

.loading {
  pointer-events: none;
}

こうするのが良いのではないかと！！！

ドッキドキで更新して確認したところ
現在公開しているサイトの状態に辿り着いたのです…！！！

で、出来たよぉ～～～～～～！！！！！！
ありがとうChatGPTえもん～～～～～～～～～～～！！！！

ありがとう！ChatGPTえもん！

かくして、ChatGPTえもんのおかげで私のサイトは無事にロード（スプラッシュ）画面の導入に成功したわけです

流石ChatGPTえもんはプログラミングに強い…！
まあ全てが全て正解というわけではないので盲信は禁物
自分で調べる意思を持ちつつ
程々に頼るという意識は必要ですが
今回はとっても助けられたなあ…と思ったのでした

もしSwellでのロード画面導入に頭を抱えている方がいたら
こちらの記事も参考にしつつ
ChatGPTえもんを頼ることも考えてみてくださいね

それでは今日はこの辺で！
とらお。