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. wordpressのドメインを変更しGoogleに通知する方法

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

  2. wordpressど素人がWordCamp Kansai 201…

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

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

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

  4. facebook投稿のリンク画面をアイキャッチ画像にする設定方法…

    ブログ記事をfacebookに投稿したけど、アイキャッチ画像が表示されないって時って悩ましい…

  5. ul、liのドット部分を画像でリスト化する方法

    ul,olのドットや数字部分に画像を挿入したい時ってありますよね。画像を挿入できれば、自分の…

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

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

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

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

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

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

スポンサーリンク

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

4/28まで初期設定費用半額

最近の記事

PAGE TOP