【WordPress】テキストをふわっと表示させるfadeinが起こした悲劇

8月 25, 2025 最終更新日時 : 1月 16, 2026 essea-numero2.com

本日、ふと当サイトにアクセスしたらテキストがすべて消え去っていました。
TOPページの見出しや段落など、ありとあらゆる「文字列」が表示されなくなっていました。

原因

結論からお伝えしますと、「テーマファイルエディター」のfunctions.phpが初期化（？）されていました。

・場所：「管理画面　>　外観　>　テーマファイルエディター　>　functions.php」

テーマファイルエディタに、個人で設定していたfadeinのJavaScriptが消えていました
javascriptが消えたので、fadeinと指定していた要素が更新されずに消えたままになっていたのが理由でした。

テーマファイルを再設定して、無事復帰しました。

せっかくなので、以下にfadeinの仕組みを説明します。
基本的に初心者でも分かるように説明を魔改造しています。
私同様、テキストをfadeinさせたい方や、突然真っ白になって困っている方は参考にしてください。
興味がないところは飛ばしてください。

目次

出典

各種設定は、以下サイトを参考に作成しています。

WordPress│ブロックにふわっとフェードインアニメーションを追加する方法

これから私が仕組みをダラダラと説明していきますので、
忙しい方はこちらのサイトを参考にサクッと設定してください。

仕組み

当ホームページは、あらゆるテキストに「fadein」というクラスを割り当てています。
この設定のおかげでページをスクロールした際に、文字が「ふわっ」と表示されるようになります。

※厳密にはユーザーの画面に「指定した要素」が表示される際に、その要素がふわっと表示されるような仕組みです。
この「指定した要素」というのが、今回のテキストに当たります。

設定の流れは以下のとおりです。

  1. cssファイルにスタイル設定をする
    • クラスを指定する
    • テキストを透明にする
    • テキストの初期位置を下にずらす
    • 変化の仕方を指定する
    • クラスを指定する2
    • 透明にしたテキストを表示させる
    • ずらしたテキストを元の位置に戻す
  2. html要素（見出し・段落など）にクラスを指定する
  3. phpファイルにスクリプト設定する
    • 指定した要素を監視する
    • 指定した要素が表示されたら、htmlのクラスを変更する

順番に説明します。

...が、phpファイルの編集（JavaScriptの設定）は、WordPressやphp、JavaScriptなどなど様々な基礎知識が必要になります。
認知不可も高くなりますので、今回はphpファイルの説明を割愛します。

cssファイルにスタイル設定をする

まず、ふわっと表示させる原理は以下の通りとなります

  1. テキストを透明にする
  2. 透明なテキストを表示する

とっても簡単ですね。

「テキストをふわっと表示させる」というのは、「透明なテキストをゆっくり表示させる」といったイメージになります。

参考：Galleria di Matutake

まずは消します。そして表示させます。
この一連の動きを「アニメーション」と呼んでいます。

意味がわからない方もいらっしゃるかと思いますが、ホームページはそういったアルゴリズムで動いています。

そして、その設定を行うのがcssファイルです。

1.テキストを透明にする

アニメーションを設定する場合、アニメーションの「開始時」と「終了時」の設定が必要になります。
「開始時の状態」→「終了時の状態」へ変化することをアニメーションと呼びます。

まずは、開始の処理について説明していきます。

クラスを指定する

初めに「クラス」と呼ばれるものを指定します。

簡単に言うと、これから行うcssの処理に対して名前をつけます。
そして、その名前（クラス）をhtmlの要素（見出し、段落など）に設定します。

学校に例えるとわかりやすいかもしれません。
「1年生」というクラス名が書かれたネームプレートを子どもたち（要素）に渡します。
そうすることで、大人は、子どもたちがどのクラスに所属してて、どんな事をさせたらいいか分かりやすいですね。

クラスを設定された要素は、そのクラスに与えられた処理内容を判別します。

.fadein

.はcss内でクラス指定する際に必須になります。
名前の前に.を付けることで、これが名前なんだと認識してくれます。
今回は、fadeinという名前をつけました。

これで、クラスを設定された要素は、「自分は「fadein」という処理を実行すればいいんだ！」とわかります。

※css内では.が必要になりますが、html内で指定する際には.を除きます。
詳しくは後ほど解説していますが、混同しないように注意しましょう。

では、次に.fadeinに設定を書いていきます。

テキストを透明にする

まずはテキストを透明にします。

.fadein {
	opacity: 0;
}

opacityは、「不透明度」です。
「0」が透明で、「1」が不透明です。
上記設定では、透明にしています。

これで要素が透明になり、あたかも消えているように見えます。

テキストの初期位置を下にずらす

今回は下から移動しながらふわっと表示してほしいので、
最初の位置を少しだけ下に指定しておきます。

.fadein {
	opacity: 0;
	transform: translateY(30px);
}

transformは「変化させる」という意味です。アニメーションの指定するときに使う設定名です。
今回のように「位置を移動させる」というのはtransformで指定します。

translateY(30px)は、Y方向（縦）に30ピクセルずらす。という意味になります。

※ちなみに、上にずらしたい時は30pxを-30pxとすることで上にズレてくれます。
横にずらしたい時は、translateX(30px)のように書きます。

変化の仕方を指定する

透明にして、位置をずらしました。
ただ、このままだと透明で少し下にズレているだけのテキストになります。
ここでは「どのように変化させるか」を指定します。

まずは、変更させる処理を指定します。

.fadein {
	opacity: 0;
	transform: translateY(30px);
	transition-property: transform, opacity;
}

transition-propertyは、「変更の設定」という意味になります。
今回は、opacityとtransformについての変更設定をしたいので、
transform, opacity;という指定をします。

次に、どのように変化させるかを指定していきます。

.fadein {
	opacity: 0;
	transform: translateY(30px);
	transition-property: transform, opacity;
	transition-duration: 2s;
	transition-delay: 0s;
}

transition-durationは「変更の速さ」を意味します。厳密には「変更の期間」という意味になります。
今回は、2秒（2second）かけて変更させたいので、2s;と指定します。

transition-delayは「変更の遅れ」という意味になります。
3s;を指定すると、3秒後に変更し始めます。
今回は即座に変更を開始させたいので、0s;を指定します。

※transition-delayと書かなければ、初期値が0s;となります。

2.透明なテキストを表示する

上記の手順で開始時のcssを設定できました。
「1年生」のネームプレートをもらった子どもたちが何をしたらいいか、明確になりました。

これから終了時のcssを設定していきます。

クラスを指定する

さっきクラス指定したじゃん。
いえいえ、先程は開始時のクラス指定を行いました。
ここでは終了時のクラス指定を行います。

.fadein.is-active

.fadeinの後ろに、.is-activeというクラスを追記し、.fadein.is-activeというクラス名にしました。
ここの名前は何でも大丈夫ですが、後にJavaScriptで同じ名前を使って処理を書きますので、一致させる必要があります。
特にこだわりがなければ..is-activeと命名しておきましょう。

透明にしたテキストを表示させる

先ほど開始時の設定で透明にしましたので、終了時の設定は不透明にします。


.fadein.is-active {
	opacity: 1;
}

opacity: 1;で、不透明にしています。
今回は、特に説明もいらないですね。

ずらしたテキストを元の位置に戻す

先ほど30ピクセルずらした位置をもとに戻します。


.fadein.is-active {
	opacity: 1;
	transform: translateY(0);
}

transformで、translateY(0)を指定しています。
Y軸（縦方向）を0にして元の位置に戻しました。

cssでの設定は以上になります。
大人は「1年生」というネームプレートを持っている子どもたちに、君は「1年3組」だよ。教えることができるようになりました。
「1年3組」はズレていたイチと透明度を下に戻してもらう専門チームです。

完成したコード（css）
.fadein {
opacity: 0;
transform: translateY(30px);
transition-property: transform, opacity;
transition-duration: 2s;
transition-delay: 0s;
}
.fadein.is-active {
opacity: 1;
transform: translateY(0);
}

この出来上がったcssは、以下画面で設定します。

・場所：「管理画面　>　外観　>　カスタマイズ　>　追加 CSS」

作成したcssを、そのままコピペしましょう。

※テーマによって設定場所が違う場合があります。
「管理画面　>　外観」のテーマエディタからcssが編集出来る機能を探してください。

html要素（見出し・段落など）にクラスを指定する

では、先程設定したcssのクラスをhtml要素に指定していきます。

実際にネームプレートを子どもたちに渡していく作業です。
今回はフロントページに指定してみましょう。

・場所：「管理画面　>　固定ページ　>　フロントページ（ホームなど）」

以下手順で設定していきます。

  1. 編集画面を開き、好きな要素（見出し・段落など）にカーソルを合わせてください。
  2. 右側のブロックタブを開き、「高度な設定」を選んでください。
  3. 「追加 CSS クラス」のテキストエリアに、fadeinを追加します。
  4. 公開ボタンをクリックします。

※htmlの要素にクラスを指定する場合は、.を除いた名前のみ指定します。

htmlでの設定はこれだけになります。
ネームプレートを渡すだけですから簡単ですね。

現時点では、公開されたページを見ても、何も変わっていません。たぶん。
次のセクションで、いよいよphpファイルを編集していきます。

phpファイルにスクリプト設定する

それでは、phpファイルを設定していきます。
...が、基礎知識の量が多くなりますので、今回は要点だけ説明します。
詳しい知識など興味がある方は、ぜひ調べて学んでみてください。

完成したコード（php/javascript）

完成コードの全体は以下のとおりです。
今回は要点のみ説明していきます。

add_action( 'wp_footer', function () { ?>
<script>
document.addEventListener("DOMContentLoaded", function () {
  const fadeInElements = document.querySelectorAll(".fadein");
  const observer = new IntersectionObserver(
    (entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          entry.target.classList.add("is-active");
          observer.unobserve(entry.target);
        }
      });
    },
    {
      threshold: 0.2,
    }
  );

  fadeInElements.forEach((element) => {
    observer.observe(element);
  });
});

</script>
<?php } );

上記の処理により、fadeinクラスを指定された要素が画面に現れた瞬間、is-activeクラスを追加し、アニメーションが実行される。という処理が実装されるようになります。

以下、cssで設定した要点の説明になります。

指定した要素を監視する
const fadeInElements = document.querySelectorAll(".fadein");

先ほどフロントページの「追加CSSクラス」でfadeinクラスを指定した要素を読み込みます。
ここで、fadeinというクラス名を指定した要素はすべて取得できるようになります。

「1年生」と書かれたネームプレートを持っている子どもを探し出します。

指定した要素が表示されたら、htmlのクラスを変更する
entry.target.classList.add("is-active");

上記コードで読み込んだ要素のクラス名にis-activeを追加します。

大人は「1年生」の子どもたちを見つけたら、「1年3組」に属させます。
そして「1年3組」の作業をしてもらいます。

この完成したコードは、以下画面で設定していきます。

・場所：「管理画面　>　外観　>　テーマファイルエディター　>　functions.php」

functions.phpファイルの一番下に完成コードを追記して、更新します。

注意

phpファイルの誤った更新は、ページが壊れる可能性があります。
必ずバックアップを取ったうえで更新してください。

あとがき（？）

「あとがき」という程でもないですが、私は先週の4日間、旅行をしていました。
その際に、クラウドワークスで「wordpressで画面真っ白になってしまった！作成画面では表示されているのに実際は真っ白。修正してください！」という依頼を見かけました。

昨日家に戻って、ふと自分のサイトを見たら画面真っ白とは言わずとも、
テキストが軒並み消えている事に気付いて、対応に追われました。

特徴から見て、追加CSSで指定した部分だったのですぐに分かりましたが、
もしかしたらクラウドワークスで困っていたクライアント様も恐らくこのような理由なのかもしれないと思って記事にしました。
pjaxの可能性もあるようですが、私のようなパターンも参考になれば幸いです。

ここまで説明しましたが、WordPressにはプラグインが存在しますので、
めんどくさいという方はプラグインも利用してみてください。

カテゴリー
web制作、アウトプット

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

前の記事
Figma
8月 6, 2025
次の記事
Sass
9月 3, 2025