Cocoon|ページをフェードイン表示する(CSS のみ)

WordPress 無料テーマ『Cocoon』のページ表示時に、ふわっとフェードインするカスタマイズ方法をご紹介します。

記事のポイント
  • ページを「ふわっ」と表示できる
  • ちょっぴりおしゃれ度が増す
  • コードをコピペするだけでカスタマイズ完了

思うように設定できない場合やご要望などもありましたら、お気軽にコメントください。

ページをフェードイン表示するカスタマイズのビフォーアフター

実際の画面で動作を確認したい方は、下のリンクよりデモページへアクセスしてみてください。

デモページ
GIF動画

ページをフェードイン表示するカスタマイズの流れ

ざっくり手順
  1. WordPress 管理画面にアクセスする
  2. 外観】⇒【テーマエディター】をクリックする
  3. カスタマイズ用コードをコピーする
  4. コードをスタイルシート(style.css)に貼り付ける
  5. ファイルを更新】をクリックする

WordPress 初心者の方や Cocoon のカスタマイズに慣れていない方は、下の【手順を詳しく見る(図解)】をクリックしてください。それぞれの手順を画像付きで解説しています。

  • STEP 1
    WordPress 管理画面にアクセスする

    『https://ドメイン名/admin』にアクセスすると、すでにログイン済みの方は【ダッシュボード】が表示されます。

    ログインしていない場合は、ログインページが表示されるので、ユーザー情報を入力後、ログインしてください。

  • STEP 2
    【外観】⇒【テーマエディター】をクリックする

    外観】メニューの上にマウスポインターを合わせ、展開したサブメニューの【テーマエディター】をクリックしてください。

  • STEP 3
    カスタマイズ用コードをコピーする

    コードの右上に表示されている【コピーする】をクリックすれば、内容がクリップボードにコピーされます。

  • STEP 4
    コードをスタイルシート(style.css)に貼り付ける

    コピーしたコードを /*必要ならばここにコードを書く*/ と書かれている行の、すぐ下辺りにコードを貼り付けてください。

    すでに何かしらのコードが記述されている場合は、そのコードの下に貼り付けましょう。

  • STEP 5
    【ファイルを更新】をクリックする

    コードを貼り付けたら、左下の【ファイルを更新】クリックしましょう。これでカスタマイズ完了です!

ページをフェードイン表示するカスタマイズ用コード

/************************************
** ページをフェードイン表示する
************************************/

.body {
	animation: fadein 3s forwards; /*アニメーション指定*/
}

@keyframes fadein {
	0% {opacity: 0} /*アニメーション開始時*/
	100% {opacity: 1} /*アニメーション終了時*/
}

フェードインするスピードを変更したいときは、『3s』の数値を変えてください(3s = 3秒)。値を小さくすれば速く表示されます。


コメント

タイトルとURLをコピーしました