MENU

【SWELL】ブロックエディタで自由にデザイン！ローディング画面を実装する

PR

【SWELL】ブロックエディタで自由にデザイン！ローディング画面を実装する

SWELLをで超簡単にローディングアニメを実装する方法をご紹介します。

  • プラグインなし
  • コピペでOK
  • 初回アクセスのみ表示、毎回表示を選べる
  • 全ページ表示、特定のページのみ表示を選べる
  • デザインはコード編集なしで好きに作れる

ブログパーツを使ったローディングアニメの実装自体はよく見かけますが、より初心者向けかつ複雑なデザインでも追加CSS不要の方法を思いついたので、その解説をしていきます。

カスタマイズする際の注意事項
  • 作業前にバックアップを取ることを推奨します。
  • カスタマイズは自己責任でお願いします。
CONTENTS

SWELLにローディングアニメを実装した例

まずは実際に実装してみた例をご紹介します。

デザインは適当なのでシュールになってしまいましたが、サイトロゴなんかを表示したら良い感じだと思います。

この例では初回アクセスのみローディング画面を表示するようにしています。

動画内で画面を再読み込みしてもアニメーションが表示されないのはその為です。

実装の方法

STEP
ブログパーツで好きなデザインを作成する
STEP
基本のコードを配置する
STEP
ウィジェットにSTEP1で作ったブログパーツを配置する

まずは初回アクセスのみ表示、全ページ表示するものを基本として解説し、最後に各カスタマイズ方法をご紹介します。

コード部分はコピペのみで、クラスやCSSの追加をすることなくブロックエディタで作った見た目のまま表示されるようにしてあります。

ちーも

早速やってみよう！

ブログパーツを作成する

まずはローディング画面のデザインをブログパーツで作っていきます。

タイトルはなんでもOK

ここで作ったものがそのまま表示されることになるので、サイズや位置なんかをしっかり設定していきます。

サイズの設定
表示位置設定

※この例の「LOADING」の文字は、すでにアニメーション設定がされているSVGです。

SWELLでSVGを使う方法はこちら

あわせて読みたい
SWELLでSVGアニメーションを使うコツ！2通りの方法を解説 サイトやブログを作っているとき、アニメーションでページに動きがあると一気に見た目が華やかになりますよね。 今回はSVGアニメーションをSWELLで上手に使う方法を語り…

こんなデザインも作れます

全てのブロックを検証したわけではないですが、リッチカラムや人気プラグインBlocks Animationによるアニメーションも問題なく表示されます。

Blocks Animationを使う場合、遅延を1秒にしてください

Blocks Animationで文字にタイピングアニメ、画像に適当なアニメを付けてみました。

WordPress.org 日本語
Blocks Animation: CSS Animations for Gutenberg Blocks Blocks Animation は、Gutenberg のすべてのブロックに最も洗練された方法で CSS アニメーションを追加することができます。

基本のコードを配置する

次にローディング画面を表示させるためのCSSとJSを配置していきます。

CSS

・カスタマイザー＞追加CSS

.loading {
  background-color: #fff; /*背景色*/
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 1.5s;
}
.loading.loaded {
  opacity: 0;
  visibility: hidden;
}
.loading .post_content {
  opacity: 0;
  animation: fadeIn 1s 0.5s forwards;
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
    visibility: visible;
  }
}

JS

・カスタマイザー＞高度な設定＞bodyタグ終了直前に出力するコード

<script>
  //ローディング画面表示用
  document.addEventListener('DOMContentLoaded', function () {
    var webStorage = function () {
      if (sessionStorage.getItem('access')) {
        // 2回目以降のアクセス
        document.querySelector('.loading').style.display = 'none';
      } else {
        // 初回アクセス
        sessionStorage.setItem('access', 'true');
        setTimeout(function () {
          document.querySelector('.loading').classList.add('loaded');
        }, 2500); // ローディングを表示する時間
      }
    };
    webStorage();
  });
</script>

コードが編集できる方は背景色やアニメの表示時間などをお好きにカスタマイズしてみてください。

ウィジェットにブログパーツを配置する

最後に作ったローディング画面用ブログパーツを、ウィジェット機能を使って配置します。

・外観＞ウィジェット

「フッター直前」に「カスタムHTMLウィジェット」を追加、下記コードをコピペしてください。

<div class="loading">
※①で作ったブログパーツのショートコードに置き換えてください
</div>

完成！

これでローディングアニメが表示されるようになりました。

全ページ対応なので、SNSや検索から特定の記事にアクセスした場合でも画面が表示されます。

カスタマイズしてみる

初回アクセスのみ表示→毎回表示にする

JSを以下のコードに置き換えてください。

<script>
  //ローディング画面表示用
  document.addEventListener('DOMContentLoaded', function () {
    setTimeout(function () {
      document.querySelector('.loading').classList.add('loaded');
    }, 2500); // ローディングを表示する時間
  });
</script>

全ページ表示→特定のページのみ表示にする

例えばTOPページのみローディングアニメを表示させたい場合のカスタマイズです。

先ほどの説明で追加したウィジェットは削除してください。

ローディングアニメを表示させたいページにカスタムHTMLブロックを追加し、ウィジェットに貼り付けたものと同じコードを記述します。

ここではTOPページ用固定ページで作業してます
<div class="loading">
※①で作ったブログパーツのショートコードに置き換えてください
</div>

これだけでローディング画面自体は表示されますが、こんな感じにSWELLのヘッダーが被ってしまうので、気になる方はJSを以下のコードに差し替えてください。

<script>
  //ローディング画面表示用
  document.addEventListener('DOMContentLoaded', function () {
    var webStorage = function () {
      if (sessionStorage.getItem('access')) {
        // 2回目以降のアクセス
        document.querySelector('.loading').style.display = 'none';
      } else {
        // 初回アクセス
        document.getElementById('content').style.zIndex = 999;
        sessionStorage.setItem('access', 'true');
        setTimeout(function () {
          document.querySelector('.loading').classList.add('loaded');
          document.getElementById('content').style.zIndex = 1;
        }, 2500); // ローディングを表示する時間
      }
    };
    webStorage();
  });
</script>

おまけ

制限エリアを使ってカテゴリやタグなんかを指定すれば、ページによって表示する内容を変えられて楽しいかも。

おわり！

SWELL
CONTENTS