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をフォローしよう!

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

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

関連記事

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

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

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

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

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

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

  3. データベース復元

    【動画版】wordpress初心者でもデータベースを復元できる方…

    wordpressを使っていたら、思わぬことでウィルス感染してしまい、バックアップしていたデータを復…

  4. 50743432_m

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

    ブロガーなら、誰でも悩むと思うのですが、バズを狙ったり、自分のfacebookやtwitterに投稿…

  5. wordcamp

    wordpressど素人がWordCamp Kansai 201…

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

  6. wordpressでテキストにアイコン付き背景をワンクリックで挿入する方法(コピペできます)

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

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

  7. 簡単すぎる!wordpressで初めてのCSS編集これで画像装飾はお手のもの

    簡単すぎる!wordpressで初めてのCSS編集これで画像装飾…

    wordpressを使っていて、画像を装飾をする際にCSSを編集したい時ってありますよね。じ…

  8. 初心者必見contact form 7基本操作からカスタマイズ方法をご紹介します。

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

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

PAGE TOP