menu

誰でもできる!jQueryを使ってwordpressでもスクロール時に画像をふわっとフェードインさせる方法

wordpressを使っていてスクロール時に画像に動きをつけたい時ってありますよね。投稿記事内はプラグインを使って表示させる方法 もあるのですが、今回は、投稿記事の下にあるバイラルメディア風facebookボタンをプラグインなしでjQueryを使ってふわっと表示させる方法を紹介します。初心者の私でもできたので、ぜひ、チャレンジしてみてはどうでしょうか。

こんな人におすすめ

実際に↑のようにバイラルメディア風facebokボタンがふわっと表示されます。

画像をふわっと表示する方法を解説

前回、バイラルメディア風facebokボタンを設置する方法を紹介しましたが、その時は、子テーマを用いてカスタマイズしました。今回も前回作成した子テーマにjQueryを追加してsingle.php、header.php、style.cssにコード追記していきます。↓に前回の記事のリンクを貼り付けていますので、まだ見ていない方は確認してから動画を見ていただけたらと思います。

実際に私が設置した様子を動画で解説しています。

After EffectsでCMのグラブル風オープニングを作ってみよう。

解説で使用したコード

使用したjQueryのコード(javascript.js)です。衝突を回避するためにWordpressではjQueryを記述するときに$の代わりにjQueryと書きました。

jQueryのコードを反映させるためにheader.phpに記述したコードです。子テーマにしか使えませんので、ご注意下さい。header.phpの<head></head>の間、<?php wp_head(); ?>という記述のあとに、以下のコードを追加してください。

使用したふわっと画像を表示させるstyle.cssのコードです。

バイラルメディア風facebookボタンのコードです。”ここにFacebookページのURLを入れる”に入力してからペーストして下さい。

今回、UNORTHODOX WORKBOOKさんからコードを使わせていただいただきました。ありがとうございます。

スクロールするとふわっと現れる文字や画像

まとめ

記事の下にあるバイラルメディア風facebookボタンをふわっと表示する方法を解説しましたが、動画のとおりに操作すれば、初めてjQueryを使ってカスタマイズしようとされている人でも、簡単にできることがわかっていただけたと思います。上のコードで簡単に設置できますので、利用していただければと思います。

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

Twitterでshare lifeをフォローしよう!

スポンサーリンク

【動画版】子テーマでのバイラルメディア風facebookボタン設置方法

たったそれだけで?PVを増加させたSNSボタンのカスタマイズ方法とは・・

関連記事

  1. 【動画版】子テーマでのバイラルメディア風facebookボタン設…

    この記事が気に入ったらいいね!しようというバイラルメディア風オリジナルSNSボタンの設置方法について…

  2. TCDテーマの標準搭載SNSボタンのシェア数を表示させる方法

    最近、TCDのVIEWというテーマに変更しまして、TCDテーマのSNSボタンはデザインが良くて使いた…

  3. 絶対できる!アイキャッチ画像付きfacebookのいいねボタンを…

    上の画像のようなバイラルメディア風facebookいいねボタンを記事の下に設置したい方は必見…

  4. wordpressでテキストにアイコン付き背景をワンクリックで挿…

    ブログを書いて、強く訴えたい部分ってありますよね。目立たせたいけどどうすればいいか悩みますよ…

  5. WordPress初心者でも安心してCSSを編集できる子テーマ作…

    Wordpressのレイアウトを変更したいんだけど、CSSをそのままにしている方はいらっしゃ…

  6. お名前.comから独自ドメインを取得してwordpressをイン…

    これからwordpressの運営をやっていこうと思っている方、必見です。wordpressを…

  7. 【動画版】wordpress初心者でもバックアップし復元する方法…

    wordpressを使ってブログを運営していると、カスタマイズして画面が真っ白になったり、ウィルスに…

  8. 誰でもできるcontact form 7にボタン画像を設定する方…

    contact form 7の送信ボタンを画像に変えて印象を良くしたいですよね。 以前、…

PAGE TOP