今回は、Swellの純正機能を使ってページを開く時に、おしゃれに表示される設定方法を見ていきたいと思います!
![](https://takacblog.com/wp-content/uploads/2023/07/2a61e9e6e264ce0b04722195f4b4942a-150x150.jpg)
ふわっと、表示されると、コーポレートサイトなどでも上品な印象になるので良いですよね!
しかも、プラグインなどを新規で入れず、純正機能のみでできるため、表示スピードなどにもあまり影響が出ないのも嬉しいですよね!
![](https://takacblog.com/wp-content/uploads/2023/07/ee8b3a98848c8db09af18fd11498a44c-1-150x150.jpg)
このサイトでも使っているよ!
まだSwellを購入していないという方はこちらを参考にインストール・購入をしてください
![](https://takacblog.com/wp-content/uploads/2023/09/1702d90a921613872adb56fae3b76306-300x158.jpg)
SWELL設定を変更
今回は、Swell設定を変更して、「フェードインアニメーション」がつくようにします。
作業としては、簡単で1分ほどでできるので、この記事を参考にしつつ、ぱぱっとやってもらえればと思います!
実際、SWELLで作成されたホームページはふわっと表示されるアニメーション(フェードインアニメーション)を使用していることが多いですよね!
管理画面のダッシュボードからSWELL設定を開く
「ページ表示時のアニメーション」を停止するのチェックを外してください。
すると高速化などの設定が出てくるので、機能停止のタブをクリックして、一つ目の![](https://takacblog.com/wp-content/uploads/2023/10/691026ab8a01e72927d118f3d82a80ef-1024x299.png)
![](https://takacblog.com/wp-content/uploads/2023/10/336c2317f64a4f22b6bb59affc4a1db0-1024x299.png)
「変更を保存」をクリックし、有効化すれば作業完了です!
チェックを外したら、アニメーションが機能しているか確認
「変更を保存」を押したら、実際に「フェードインアニメーション」が機能するか確認しましょう!
ふわっとページが表示されるようになり、ヘッダーバーが画面外から下へと出てくるアニメーションが追加されます!
しつこい感じのアニメーションではないので、ちょうど良いおしゃれな印象を与えてくれます!
![](https://takacblog.com/wp-content/uploads/2023/07/ee8b3a98848c8db09af18fd11498a44c-1-150x150.jpg)
コーポレートサイトとかにおすすめだよね!!
![](https://takacblog.com/wp-content/uploads/2023/07/2a61e9e6e264ce0b04722195f4b4942a-150x150.jpg)
さらにアニメーションや動きをつけたい人は、「Blocks Animation」などのプラグインを追加しても良いかもね!
まとめ
今回は、Swellの純正機能を使ってページをふわっと表示させるということで、純正機能を使って負荷なく、おしゃれにページ表示できる方法をお伝えしました!
作業時間としては、1分ほどで、もしアニメーションなしにしたい時も、チェックをつければ良いだけなので一度試してみるのも良いですね!