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. TCDテーマの標準搭載SNSボタンのシェア数を表示させる方法

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

  2. 初心者必見contact form 7基本操作からカスタマイズ方…

    contact form 7でお問い合わせページ作成したけど、レイアウトだけでも変更したいと…

  3. たった2分でできる!ボタン画像をサイトに設置するボタンマルシェの…

    リンクを設定する時、クオリティーが高いボタン画像を使ってリンクさせたいですよね。私もボタン画…

  4. wordpressのドメインを変更しGoogleに通知する方法

    wordpressを始めてから、ドメインを変更したいなと思ったことありますよね。だけど、変更…

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

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

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

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

  7. wordpressど素人がWordCamp Kansai 201…

    平成28年7月9、10日の2日間、WordCamp Kansai 2016のスタッフとして参加しまし…

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

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

スポンサーリンク

さくらとXサーバーの速度比較

最近の記事

真夏の感謝祭 半額キャンペーン中

PAGE TOP