WordPressのテーマによっては、ロード画面のアイコンが自動的に入っているものがあります。
そして、ロード画面のアイコンが固定されていて
設定からは変更できないものがあります。
そんなときに、強制的にCSSでロード画面のアイコンを変える方法をお伝えします。
本記事では、Wordpressテーマ「Code4rest」をベースに解説しています。
使用されているテーマによって、
コントロールしているロード関連クラスが違っている場合がありますので、
まず、ご自身の使用されているテーマは何かを確認し、
一度、マニュアル等確認してみることをおすすめします。
テーマによっては、ロードのカスタマイズ方法について解説されていたりします。
その上で不明ならば、デベロッパーツールやソースを確認して
ロードをコントロールしているクラスを特定してください。
その上で、下記で使用されている.pageloaderをご自身のものと差し替えて
試してみてください。
ちなみに、TCD系テーマの場合は、.site_loader, .loadingなど
テーマによって名称が変わります。
TCDではアニメーション系のJSが内臓されています。
Luxeritasの場合は、.luxe-loader, .preloader
テーマ内のオプションでロード画面を制御可能です。
Code4resを使用されている方は、基本的に以下CSSを追加するだけで機能します。
ロード画面のアイコンを変える（拡大アニメーション）
画像サイズ１００%でピッタリになるサイズのアイコンを用意しておくと良いです。
そして、以下、CSSを追加して、
●にアイコンのURLを追加すればOK。
/* 既存のローディング要素に別画像を当てる例 */
.pageloader {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url("●") center no-repeat #fff;
background-size: 90%;
animation: zoomLoader 1s ease-in-out forwards; /* アニメーション追加 */
}
/* アニメーション定義 */
@keyframes zoomLoader {
0% {
background-size: 90%; /* 開始サイズ */
opacity: 0.2;
}
100% {
background-size: 100%; /* 終了サイズ（好きな大きさに調整） */
opacity: 1; /* フェードさせたいなら 0 に */
}
}
ロード画面の背景色変更＆アイコンサイズを変えず上下アニメーション
例えば、雲とか鳥とか、ふわふわ飛んでる感じになります。
ロード画面の背景色を変える場合は、
.pageloaderのbackgroundのカラーコードをお好きな色に変えればOK
アイコンの画像URLを●に差し替えれば、
アイコンが反映します。
/* 画面を覆うローダーの土台。背景は白だけにしておく */
.pageloader {
position: fixed;
inset: 0;
z-index: 9999;
background: #fff; /* 画像はここでは出さない */
pointer-events: none; /* 念のため */
}
/* 中央に鳥画像を出して、上下にふわふわ動かす */
.pageloader::before {
content: "";
position: absolute;
left: 50%;
top: 50%;
translate: -50% -50%; /* 中央配置 */
width: min(40vmin, 260px); /* 画像の見せたい大きさに調整 */
aspect-ratio: 1 / 1; /* 正方形なら維持。縦横が違うなら比率を変える */
background: url("●")
no-repeat center / contain; /* サイズは固定で表示 */
animation: birdFloat 2.2s ease-in-out infinite;
}
/* 上下にゆっくり往復（サイズは固定） */
@keyframes birdFloat {
0% { transform: translateY(0); }
50% { transform: translateY(-14px); } /* 上に少し */
100% { transform: translateY(0); }
}
/* 動きが苦手な人の環境ではアニメを止める（アクセシビリティ） */
@media (prefers-reduced-motion: reduce) {
.pageloader::before { animation: none; }
}
是非、お試しください。