今回は「WordPressを使用してクリック位置から波紋が広がるようなエフェクトを実装する方法」を記載します。

具体的には下記のような機能になります。
※各枠内をクリックしてみてください。

参考サイト様は下記になります。
https://qiita.com/nekoneko-wanwan/items/c9f26ce049bd422e555c

参考サイト様は非常に親切に書いてあるので、ほぼ実装するだけになるのですが、WodPressでjQueryを使った機能を実装する際には、”$”によるコンフリクトを回避しなければなりません。
「そんなの技術者じゃないと分からないよ！」ということにならないように、コピペだけでいけるように編集したコードを記載します。

CSS(スタイルシート)に波紋用のスタイルを設定する

スタイルシート（”XXXX.css”のファイル。WordPressの場合は基本的に”style.css”に記載します。）に下記スタイルを追記します。

/* クリックできる要素 */
.ripple {
    /* エフェクトに直接関係はない */
    margin: 20px;
    background-color: #f7f7f7;
    height: 100px;
    width: 200px;
    text-align: center;
    line-height: 100px;
    cursor: pointer;

    /* 必須 */
    overflow: hidden;
    position: relative;
}

/* エフェクト要素 */
.ripple__effect {
    /* 値の変更はエフェクト形体・サイズ・スピードに影響する */
    width: 150px;
    height: 150px;

    /* 必須 */
    position: absolute;
    border-radius: 100%;
    pointer-events: none;
    transform: scale(0);
    opacity: 0;
}

/* エフェクト要素の色を指定 */
.ripple__effect.is-orange { background: #f1c40f;}
.ripple__effect.is-blue   { background: #4aa3df;}
.ripple__effect.is-black  { background: #999;}

/* classが付与されたらアニメーションを実行 */
.ripple__effect.is-show {
    animation: ripple 0.75s ease-out;
}

/* アニメーションの定義 */
@keyframes ripple {
    from {
        opacity: 1;
    }
    to {
        transform: scale(2);
        opacity: 0;
    }
}

これでスタイルシートの設定は完了になります。
次に、記事にプログラムのコードを埋め込みます。

記事にHTMLタグとjQueryのコードを仕込む

WordPressの固定ページや投稿ページ内に下記のコードを仕込みます。
※このとき、ビジュアルエディタではなくテキストエディタでコードを打ち込むことに注意して下さい。

<div class="ripple">
    オレンジ
    <span class="ripple__effect is-orange"></span>
</div>
<div class="ripple">
    ブルー
    <span class="ripple__effect is-blue"></span>
</div>
<div class="ripple">
    ブラック
    <span class="ripple__effect is-black"></span>
</div>

<script>
  jQuery(function($) {
    $(function() {
      var $clickable = $('.ripple');
      /* mousedownだと直ぐに発動し、clickだとマウスボタンを離した時に発動する */
      $clickable.on('mousedown', function(e) {
        var _self = this;
        var x     = e.offsetX;
        var y     = e.offsetY;
        var $effect = $(_self).find('.ripple__effect');
        var w       = $effect.width();
        var h       = $effect.height();
        /* クリックした座標を中心とする */
        $effect.css({
          left: x - w / 2,
          top: y - h / 2
        });
        /* jsではclassの付け替えをするだけ */
        if (!$effect.hasClass('is-show')) {
          $effect.addClass('is-show');
          /*
           * エフェクトアニメーションが終わったらclassを削除する
           * ここでは、単純にcssで設定するdurationと時間を合わせているだけですが
           * keyframes終了のイベント(AnimationEnd)が取れるかと思うので、それで対応した方が良いかも
           */
          setTimeout(function() {
              $effect.removeClass('is-show');
          }, 750);
        }
        return false;
      });
    });
  });
</script>

WordPressでは”$”の記述は既に別の機能で使われているため、”$”を使用する場合は”jQuery(function($)”としてスクリプトを囲うことで、囲った中の”$”だけはjQueryとして機能させる必要があります。

これで仕込みは全て完了になります、非常に簡単に機能が実装できますね！

覚えておいて損はない！jQueryのコンフリクト解消の記述方法！

いかがでしたか？

以前の私はWordPressでjQueryを使用する際には”$”を全て”jQuery”に置換をして設置していました。
ですが、コードが非常に見づらくなることと、他のシステムで使う際にまた置換をしたりと、せっかく作ったプログラムなのに汎用性がイマイチで悩んでいました。
ローカル内でのjQueryの使用方法を覚えてからはコンフリクトに悩むこともなくなり、すっきりとしたプログラムが書けるようになりました。

プログラマーさんは可読性や汎用性を気にする方が多いと思いますので、この辺りはしっかりと作りこんでいきたいですね。

ではまた！

この記事であなたの課題を解決することができましたか？

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

世間ではスプラトゥーン2が流行っているようですね。
私も流行りに遅れないように、スプラトゥーン2を……することはできないので。（本体を持っていません…）
スプラトゥーン2っぽいことをしようと思います！

ということで、今回はスプラトゥーン2の公式サイトのグローバルメニューのふよふよ動いている部分の作り方をご紹介します！

参考サイト様：https://www.nintendo.co.jp/switch/aab6a/coop/index.html

今回の記事を読むことで、下記のようなふよふよした領域を作ることができます。

ふよふよ動かすにはどうしたらよいのか？

パッと見どうやっているのか全くわからないので調べてみると、下記の参考サイト様を発見しました！
・水っぽい動きのjQueryプラグイン3選

上記のサンプルページを見ると、スプラトゥーン2の公式サイトのふよふよ動く部分に非常に似た動きをしていますね！
ということで、こちらの技術を参考にして作ってみようと思います！

WordPressで設置する事を想定してコードを組む

参考サイト様の記事が非常に優秀な出来をしているため、普通のサイトであればサンプルのソースコードを使えばそのまま使えます。
そのため、本記事ではWordPressで設置する場合を想定した場合のコードの組み方を解説します。

まず初めに、今回の動作に必要なファイルを下記に列挙します。
・jQueryライブラリ
・jQuery UIライブラリ
・Raindropsライブラリ

各ライブラリのダウンロード方法は以下に記載します。

jQueryライブラリのダウンロード方法

1. 下記のjQueryライブラリの公式ページを開きます。
　 http://jquery.com/download/
2. ページの上の方にあるリンクをクリックします。

3. ダウンロードが始まります。

jQuery UIライブラリのダウンロード方法

1. 下記のjQuery UIライブラリの公式ページを開きます。
　 https://jqueryui.com/
2. ページの右上の方にある「Stable」をクリックします。

3. ダウンロードが始まります。
4. ダウンロードしたファイルを解凍します。
　 ※フォルダ内にいろいろと入っていますが「jquery-ui.js」のみ使用します。

Raindropsライブラリのダウンロード方法

1. 下記のRaindropsライブラリの公式ページを開きます。
　 http://daniellaharel.com/raindrops/
2. メニューの「ダウンロード」をクリックします。

3. 「ダウンロード」項目の「Github」をクリックします。

4. 画面中央右側にある「Clone or download」をクリックします。

5. 「Download ZIP」をクリックします。

6. ダウンロードが始まります。
7. ダウンロードしたファイルを解凍します。
　 ※フォルダ内の「raindrops.js」を使用します。

これで、各種ライブラリのダウンロードは完了となります。

各種ライブラリを読み込む

ライブラリは下記のような記述で読み込みます。

<script src="(ファイル格納フォルダ)/jquery-3.2.1.min.js"></script>
<script src="(ファイル格納フォルダ)/jquery-ui.js"></script>
<script src="(ファイル格納フォルダ)/raindrops.js"></script>

読み込みのタイミングはhead内でもbody内でも構いませんが、必ずふよふよさせるdivの箱の前に読み込みましょう。

ただし、ここで一つ注意があります！
raindrops.jsをWordPressで使用する際に、下記のようなエラーが出力される場合があります。

該当箇所を詳しく見ると、”$”を使用している箇所でエラーが発生しています。
これは、WordPressでよく見られる”$”が”jQuery”以外のライブラリで定義されている（使われている）場合に出るエラーです。
そのため、”raindrops.js”でエラーが発生している箇所を”$”から”jQuery”に変更してください。

・”$”はNG↓

・”jQuery”はOK↓

これで、ライブラリの読み込みは完了となります。

ソースコードを設置する

今回は下記のようなコードを設置しました。

<div class="stage" style="background: #000;">
    <div class="puyopuyo" style="height:200px;"></div>
</div>

<script>
<!--
;(function($) {
  $(function(){
    let $puyopuyo= $('.puyopuyo');
    $puyopuyo.raindrops({
      color: '#f3f3f3',  // 色
      waveHeight: 60,    // 沈み込む高さ？
      waveLength: 40,    // ？
      canvasHeight: 200, // 表示領域の高さ
      rippleSpeed: 0.01, // 縦方向の波が揺れる速度？
      frequency: 2,      // 波紋が生まれる頻度
      density: 0.005     // 波の余韻みたいなものを設定する値
    });
  });
})(jQuery);
//-->
</script>

※今回は実験的な実装なのでdivに直接styleを書き込んでいますが、styleを設定する際には必ず別途cssファイルを作成して、そちらで設定をすることを強く推奨します。

ふよふよ動くギミックはscriptタグで囲んだ中のコードで設定しています。
可能な限りコメントは書いていますが…ちょっとわかりづらい部分や言語化できなかった部分があるので、実際に作成して数値をいじってみて確認して下さい！（丸投げ）
今回参考にしたサイト様を見る限り他にもオプションがあるようなので、上記のオプションだけでなく、色々なオプションも試してみることを推奨します。

ちょっと話がそれてしまいますが、ライブラリの読み込みの際に”$”を”jQuery”にする処理を行いましたが、scriptタグの中では行っていません。
理由としては、”$”を”jQuery”として動かすためにカプセル化を行っているため、このような記述をしても正常に動作するようになっています。
詳細は下記記事を参考にして下さい。
参考：【jQuery】jQueryの小ネタ（カプセル化、プラグイン化など）

これで、スプラトゥーン2の公式サイトのふよふよする領域が作れるようになりました。

ライブラリを活用して動きのある面白いサイトに！

いかがでしたか？

ライブラリを活用すると、こんなにも簡単に難しそうなギミックが実装できてしまいます。
有志の方が作るライブラリは自身の知識の引き出しの一つとなり、大きな武器にもなります。
素晴らしいサイトを見ることで何ができるかを知り、実際に実装することで技術を身に着けることは、Web制作を行う上で必要な作業の一つであると考えます。

…と偉そうなことを言っていますが、今回のネタの提供はM氏でした。

もっといろんなサイトを見ないとダメですね…(・・;)

ではまた！

この記事であなたの課題を解決することができましたか？

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

今回は「画面をスクロールした際にサイドバーのコンテンツが画面上に付いて来るように表示させる」方法をご紹介致します。
本記事ではWordPressを使用した場合の設定方法を詳細に記載します。

といっても、使用するプログラムはWordPressでなくても機能しますので、自身のサイトの構成に合わせてカスタマイズして頂ければ簡単に活用できると思います。

本記事を読むことで下記のような画面に付いて来るコンテンツを設置することができます。

なお、今回参考にさせて頂いたサイト様は下記になります。
解説付き！フッターで止まる、サイドバーを固定する方法【はてなブログ】
最近はやりのフッターに重ならない追尾するサイドバーをjQueryで作ってみました！

WordPressのウィジェットに画面に付いて来るコンテンツを登録する

WordPressのサイドバーのウィジェットに画面に付いて来るコンテンツを用意します。
今回は、下記のようにテキストのウィジェットを登録して、idを設定したdivといくつかの文言を設定しました。

idを設定したdivが画面に付いて来るコンテンツになります。

これで、コンテンツの登録は完了になります。

画面についてくる機能を記載したJavaScriptを読み込む

下記のJavaScriptを読み込みます。
※jQueryを使用しているので、本コードを読み込む前に必ずjQueryのライブラリを読み込んでください。

jQuery(function(){
    // ターゲットの要素
    var target = jQuery('#pickup-content');
    // フッターの要素
    var footer = jQuery('#colophon')
    // ターゲットの要素の高さ
    var targetHeight = target.outerHeight(true);
    // ターゲットの要素の幅
    var targetWidth = target.outerWidth();
    // ターゲットのトップ座標
    var targetTop = target.offset().top;
    
    // スクロールイベント処理
    jQuery(window).scroll(function(){
        // 画面上のトップ座標
        var scrollTop = jQuery(this).scrollTop();
        // 画面上のトップ座標位置がターゲットのトップ座標位置を超えた？
        if(scrollTop > targetTop){
            // フッターのトップ座標
            var footerTop = footer.offset().top;
            // （スクロールのトップ座標＋ターゲットの要素の高さ）の位置がフッターのトップ座標位置を超えた？
            if(scrollTop + targetHeight > footerTop){
                // ターゲットのトップ座標をフッターの位置に合わせて変更
                customTopPosition = footerTop - (scrollTop + targetHeight)
                target.css({position: "fixed", top: customTopPosition + "px", width: targetWidth});
            }else{
                // ターゲットを固定の位置で表示
                target.css({position: "fixed", top: "10px",  width: targetWidth});
            }
        }else{
            // 通常表示
            target.css({position: "static", top: "auto"});
        }
    });
});

3行目でターゲット（画面に付いて来るdiv）の要素、5行目でフッターの要素を取得しています。
この部分を各々のサイトに合わせて変更することで、そこそこうまく動いてくれると思います。

何故ターゲットの横幅を入力するのか

今回は、WordPressのサイドバーにテキストのウィジェットを登録して、テキストの中のdivを画面上に付いて来る要素として指定しました。
WordPressのテーマ次第ではあるのですが、基本的にdivには固定の横幅は設定されていません。
そのため、positionをfixedに変更する際に横幅を入力しなければ、下記のように横幅がサイドバーの領域を超えてしまう場合があります。

こういった部分を回避するために、事前にコンテンツの幅を取得しておいて、コンテンツが付いて来る設定に変更された際に横幅も設定するようにしています。

何故フッターの位置を監視しながら表示位置を変えるのか

フッターの位置を監視しなければ、下記のようにサイドバーのコンテンツがフッターを突き抜けてしまう場合があります。

こういった部分を回避するために毎回フッターの位置を監視して、付いて来るコンテンツの位置を決めています。

【注意！】上記のコードでGoogle AdSenseの広告を画面に付いて来るように表示すると規約違反になります

今回ご紹介した「画面をスクロールした際にサイドバーのコンテンツが画面上に付いて来るように表示させる」方法ですが。
画面に付いて来るコンテンツの内容として、Google AdSenseの広告を貼り付ける行為は規約違反となりますのでご注意ください。
詳細は下記のサイト様をご参照ください。
上下にスクロールしたとき、Google AdSenseが一緒についてくる配置方法は利用規約違反

規約の細かい部分は見落としがちですが、しっかりと守ってアドセンスを活用しましょう！

ではまた！

この記事であなたの課題を解決することができましたか？

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

久々に自作のコード紹介になります、網干です。

今回はほぼコピペで完成してしまうようなスマホ専用メニューの作成方法をご紹介致します。
メニューの項目はアコーディオン形式で表示しますので、項目が多くなっても対応できます！
本記事を読む事で下記のようなメニューを作成することができます。

※本記事では「大項目」は見出しのみリンクなし、「中項目」はリンクありの想定でメニューを作成します。

では早速、横から割り込むようなスマホ専用メニューを作っていきましょう。

WordPressのメニューでスマホで表示するメニューを作成する

まずはじめに、WordPressのメニューから新規メニューの作成を行います。

今回は「大項目」「中項目」でメニューを作成しました。
メニューの作成が完了したら「メニューを保存」ボタンを押して確定します。

以上で、メニューの準備は完了になります。

bodyタグの下にスマホ用メニューのコード（htmlタグ、Javascript、jQuery）を貼り付ける

bodyタグの次の行に下記コードを追記します。
※基本的にはheader.phpのコードに追記することになると思います。

<!-- メニュー開閉ボタン設置 -->
<a id="menu-button" onclick="dispSpMenu();">めにゅー</a>
<!-- メニュー表示エリア設置 -->
<div id="sp-menu">
<?php
  // メニュー取得
  wp_nav_menu( array('menu' => 'てすとめにゅー', 'container' => ''));
?>
</div>

<script>
  /* スマホメニューにクラス付与 */
  // 要素取得
  var elmsMenuItem = document.querySelectorAll('#sp-menu .menu > li > a');
  
  // 要素がある？
  if(elmsMenuItem.length > 0) {
    for(var iCnt = 0; elmsMenuItem.length > iCnt; iCnt++ ) {
      // 要素にクラス付与
      elmsMenuItem[iCnt].classList.add('sp-menu-toggle');
    }
  }
  
  /* スマホ用メニューの表示切替 */
  function dispSpMenu() {
    // 要素取得
    var elmSpMenu = document.getElementById('sp-menu');
    // スマホメニュー表示中？
    if( elmSpMenu.style.left == '0px' ){
      elmSpMenu.style.left = '-300px';
    } else {
      elmSpMenu.style.left = '0px';
    }
  }
  
  /* アコーディオンメニュー開閉ギミック追加 */
  function AccordionMenu() {
    jQuery(this).next().slideToggle( 300 );
  }
  
  jQuery(".sp-menu-toggle").click( AccordionMenu );
</script>

7行目の”wp_nav_menu”の’てすとめにゅー’の箇所を作成したメニューの名前に変更することで、自作したメニューの内容でスマホ専用メニューを作成することができます。

コードの見栄えやファイル管理を考えると、script部分はまとめて別ファイルにして読み込ませる方が良さそうですね。
ですが、今回は後先のことを考えずに「コピペでできる！」という部分を追求して作成します！

コードの貼り付けは以上です。
続けて、CSSの設定を行いましょう。

スマホ専用メニューのCSSを設定する

下記CSSを設定します。
※基本的にはstyle.cssのコードに追記することになると思います。

#menu-button {
    width: 100px;
    padding: 10px 0;
    margin-left: 5px;
    margin-top: 5px;
    color: #FFF;
    text-align: center;
    text-decoration: none;
    text-shadow: 0px 0px 3px rgba(0,0,0,0.5);
    background: -moz-linear-gradient(top,#BFD9E5, #3D95B7 50%,#0080B3 50%,#0099CC);
    background: -webkit-gradient(linear, left top, left bottom, from(#BFD9E5), color-stop(0.5,#3D95B7), color-stop(0.5,#0080B3), to(#0099CC));
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border: 1px solid #0099CC;
    -moz-box-shadow: 1px 1px 1px rgba(000,000,000,0.3),inset 0px 0px 3px rgba(255,255,255,0.5);
    -webkit-box-shadow: 1px 1px 1px rgba(000,000,000,0.3),inset 0px 0px 3px rgba(255,255,255,0.5);
    cursor: pointer;
    position: fixed;
    z-index: 10;
    transition: all 0.5s linear;
    display: none;
}

#sp-menu {
    left: -300px;
    width: 275px;
    height: 100%;
    background-color: rgba(255, 55, 55, 0.95);
    position: fixed;
    overflow: auto;
    z-index: 9;
    display: block;
    transition: all 0.5s ease-out;
}

#sp-menu .menu {
    padding-left: 30px;
    margin-top: 55px;
    line-height: 25px;
}

#sp-menu .menu .sub-menu {
    display: none;
}

@media screen and (max-width: 1000px) {
    #menu-button {
        display: block;
    }
}

ボタンスタイルは下記のサイト様を参考にさせて頂きました。
参考：5つの効果で作る、よく使うCSS3ボタンデザインサンプル集

47行目の”@media screen and (max-width: 1000px)”の指定で、画面の横幅が1000px以下になったらメニューボタンが表示されるように設定しています。
もし1000pxではなく、もっと小さな横幅の時にメニューを表示したい場合は1000の値をもっと小さくしてください。

CSSの設定は以上です。

以上で、スマホ専用メニューが表示されるようになります！
細かいスタイルの修正は、CSSでなんとかごまかしましょう！

WordPressの関数を使うことで楽にメニューの作成が完了してしまいます！

いかがでしたか？

WordPressの関数を使用することで楽にメニューの項目が引き抜けてしまいます。
メニュー項目の設定自体はそこまで深い知識を必要としないので、お客様にお出しする際にも「この部分を変えればスマホ専用のメニューを変えることができます」と紹介できるのが良いですね。

ではまた！

この記事であなたの課題を解決することができましたか？

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

テレビを見なくなってから季節感を失いました、網干です。

情報源がネットの情報になってから早数年…、情報の選別の仕方が極端になってしまったので季節ごとの何かを感じることが少なくなってしまいました…。
そんなこんなで年末になってしまったので、年始の準備が全く整っていません。
と、とりあえず部屋の大掃除を始めて年末感を出そうかなと考えています。

さて、今回は「ほぼコピペするだけ！jQueryでWebページに雪（または花びらなどの画像）を降らせる方法」を記載します。
本記事を読む事で、今見ているページのようにオブジェクト（花びら等）がゆらゆらと落下するエフェクトをページに追加することができます。
（このページでは雪は見づらいので花びらを落下させています）

いろいろな個人サイトを眺めているとたまに見かけるこの機能、意外と簡単に実装できるので紹介します。

雪を降らせるためのプログラムファイルをダウンロード

まず初めに、雪を降らせるためのプログラムファイルをダウンロードします。
ダウンロードは下記のURLから行ってください。
https://github.com/loktar00/JQuery-Snowfall

以下、ダウンロードの方法を記載します。

プログラムのダウンロード方法

URLにアクセスすると下図のようなページに移動します。
ページの右側にある「Clone or download」をクリックしてください。

「Clone or download」をクリックすると下図のような画面が表示されますので、右側の「Download ZIP」をクリックしてください。

「Download ZIP」をクリックするとダウンロードが開始します。
ダウンロードしたファイルはzip形式で圧縮されています。

プログラムファイルのダウンロードは以上になります。

プログラムを使って好きなページに雪を降らせる

先程ダウンロードしたプログラムファイルを解凍して、解凍したフォルダごとサーバー内のアクセスできる領域に設置してください。

これで準備は完了です。早速使ってみましょう！

プログラムの実装

本プログラムはjQueryを使用しているので、headタグに下記の指定が必要になります。

<script src="https://code.jquery.com/jquery-2.2.4.min.js"<</script<

次に、ダウンロードしたプログラムを使うために、下記の記述をbody内に記述します。

<script type="text/javascript" src="(ファイルを格納したディレクトリパス)/JQuery-Snowfall-master/dist/snowfall.jquery.min.js"></script>
<script type="text/javascript">
  jQuery(document).snowfall({
    flakeCount : 100,			// 要素の数
    flakeColor : '#FFF',		// 要素の色
    flakeIndex : 999999,		// 要素のz-index
    minSize : 5,				// 要素の最小サイズ
    maxSize : 20,				// 要素の最大サイズ
    minSpeed : 2,				// 要素の最小落下スピード
    maxSpeed : 5,				// 要素の最大落下スピード
    round : true,				// 要素に丸みを持たせる？
    shadow : false				// 要素に影をつける？
    //collection : 'div'		// 要素を指定の要素に積もらせる設定(画像を設定してもflakeColorで指定した要素の色が積もります)
    //image : './image.png'		// 要素を指定の画像に変更
  });
</script>

これで、ページ内に雪を降らせることができます！

………。

ちょいと分かりにくいかもしれないですね…

ということで、サンプルプログラムを載せておきます。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="Shift_JIS">
    <title>snow_sample</title>
    <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
  </head>
  <body bgcolor="#2d2f52" text="#ffffff">
    <script type="text/javascript" src="./JQuery-Snowfall-master/dist/snowfall.jquery.min.js"></script>
    <script type="text/javascript">
      jQuery(document).snowfall({
        flakeCount : 100,			// 要素の数
        flakeColor : '#FFF',		// 要素の色
        flakeIndex : 999999,		// 要素のz-index
        minSize : 5,				// 要素の最小サイズ
        maxSize : 20,				// 要素の最大サイズ
        minSpeed : 2,				// 要素の最小落下スピード
        maxSpeed : 5,				// 要素の最大落下スピード
        round : true,				// 要素に丸みを持たせる？
        shadow : false				// 要素に影をつける？
        //collection : 'div'		// 要素を指定の要素に積もらせる設定(画像を設定してもflakeColorで指定した要素の色が積もります)
        //image : './image.png'		// 要素を指定の画像に変更
      });
    </script>
  </body>
</html>

※snowfall.jquery.min.js のパスはサーバー内に格納したディレクトリになりますので注意してください！

上記のプログラムが正常に起動すると、雪の降るページが表示されます。

雪ではなく花びらを降らせるための設定方法

雪を花びらに変えたい場合は、下記のようにimageの部分に花の画像を指定することで実装できます。

<script type="text/javascript" src="(ファイルを格納したディレクトリパス)/JQuery-Snowfall-master/dist/snowfall.jquery.min.js"></script>
<script type="text/javascript">
  jQuery(document).snowfall({
    flakeCount : 100,			// 要素の数
    flakeColor : '#FFF',		// 要素の色
    flakeIndex : 999999,		// 要素のz-index
    minSize : 5,				// 要素の最小サイズ
    maxSize : 20,				// 要素の最大サイズ
    minSpeed : 2,				// 要素の最小落下スピード
    maxSpeed : 5,				// 要素の最大落下スピード
    round : true,				// 要素に丸みを持たせる？
    shadow : false,				// 要素に影をつける？
    //collection : 'div'		// 要素を指定の要素に積もらせる設定(画像を設定してもflakeColorで指定した要素の色が積もります)
    image : '(画像ファイルを格納したディレクトリパス)/example.png'		// 要素を指定の画像に変更
  });
</script>

今回は以上になります。

いかがでしたか？

企業様のサイトではなかなかできないことですが、個人のサイトではこういった遊びのエフェクトを追加することで面白いページが作れそうですね。

ではまた！

この記事であなたの課題を解決することができましたか？

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

ここ数日の夕飯の摂取カロリーが気になっています、網干です。

というのも、ここ数日はベーコン、ジャガイモ、チーズをフライパンで焼いたものを毎晩のように食べているので、カロリーが高すぎるのではないかと気になっています…。
ですが、お手軽にできて非常に美味しいのです！やめられません！
ということで、本記事の最後にレシピと作り方を載せておきます、お楽しみに！

さて、今回はJavaScriptとjQueryだけで、下記のようなマウスが乗ったときに回転するボタンを作成する方法を記載します。
button1button2

具体的には、下記のように設定をしていきます。

1. 変数を使ってjQueryでボタンのスタイルを設定する
2. 回転を行うCSSの設定をjQueryで追加/削除する

では、早速コードを書いていきましょう！

変数を使ってjQueryでボタンのスタイルを設定する

ボタンのスタイルは下記のように変数の中に記述します。

// ボタンのスタイル
  var btnStyle = {
    "margin": "0 10px",
    "padding": "15px 0",
    "width": "150px",
    "color": "#000",
    "font-weight": "bold",
    "text-align": "center",
    "display": "inline-block",
    "overflow": "hidden",
    "background-color": "#cfcfcf",
    "border": "#999 1px solid",
    "border-radius": "5px",
    "transition": "all 1s ease-in-out",
    "text-decoration": "none"
  };

上記の変数を使用して、下記のように”button1″と”button2″のクラスのスタイルに設定します。

// ボタンのスタイルを設定
  jQuery('.button1, .button2').css(btnStyle);

これで”button1″と”button2″のクラスに対してスタイルを適用することができます。

では次に、ボタンを回転させる設定をしましょう。

回転を行うCSSの設定をjQueryで追加/削除する

下記のように指定して、ボタン回転動作の追加/削除を行います。

// ボタン縦回転
  jQuery('.button1').hover( function() {
    jQuery(this).css('transform', 'rotateX(360deg)');
  }, function() {
    jQuery(this).css('transform', 'none');
  });

  // ボタン横回転
  jQuery('.button2').hover(function() {
    jQuery(this).css('transform', 'rotateY(360deg)');
  }, function() {
    jQuery(this).css('transform', 'none');
  });

jQueryを使用したhoverの設定は「マウスカーソルが要素に入ったとき」と「マウスカーソルが要素から出たとき」の設定ができるため、上記のように設定します。
もしも「マウスカーソルが要素に入ったとき」だけに設定してしまうと、引き続き設定が維持されてしまうため回転は一回限りとなってしまいます。
参考記事：http://semooh.jp/jquery/api/events/hover/over,+out/

上記の設定で下記のようなマウスが乗ったときに回転するボタンをJavaScriptとjQueryのみで作成することができます。

button1button2

回転するボタンを設置できましたね！
スタイルを設定している変数の記述がスタイルシートに記述する様式と近いので、JavaScriptを知らない方でもカスタマイズできそうです。

では、最後に上記プログラムの一式を記載します。

まとめ（回転ボタンの設置とスクリプトの記述）

今回紹介したプログラムの一式は下記になります。

<a href="#" class="RotateButtonX">button1</a><a href="#" class="RotateButtonY">button2</a>

<script>
<!--
  // ボタンのスタイル
  var btnStyle = {
    "margin": "0 10px",
    "padding": "15px 0",
    "width": "150px",
    "color": "#000",
    "font-weight": "bold",
    "text-align": "center",
    "display": "inline-block",
    "overflow": "hidden",
    "background-color": "#cfcfcf",
    "border": "#999 1px solid",
    "border-radius": "5px",
    "transition": "all 1s ease-in-out",
    "text-decoration": "none"
  };

  // ボタンのスタイルを設定
  jQuery('.RotateButtonX, .RotateButtonY').css(btnStyle);

  // ボタン縦回転
  jQuery('.RotateButtonX').hover( function() {
    jQuery(this).css('transform', 'rotateX(360deg)');
  }, function() {
    jQuery(this).css('transform', 'none');
  });

  // ボタン横回転
  jQuery('.RotateButtonY').hover(function() {
    jQuery(this).css('transform', 'rotateY(360deg)');
  }, function() {
    jQuery(this).css('transform', 'none');
  });
-->
</script>

上記のプログラムで注意してほしいのは、アンカータグの前にスクリプトを記述してはいけないことです。
アンカータグの前にスクリプトを記述してしまうと、アンカータグのクラスに対してスタイルの設定をすることができません。
これはスクリプトの実行タイミングの仕様に関係するので、もっと詳しく知りたい方は下記の記事を参考にしてください。
参考記事：http://qiita.com/tomcky/items/07190a3a2d0d993d1b56

動きのあるボタンの一覧リストをjsファイルにまとめてしまうことも可能！

今回のプログラムから、jsファイルだけでボタンのスタイル設定が可能であることがわかりました。
ということは、ホームページ制作で汎用的に使うボタンやメニューは、jsファイルにまとめてしまうことができるということになります。

上記の素晴らしいところは、事前にjsファイルでテンプレをいくつか作っておいてしまえば、プログラムの知識がない人でもファイルの読み込みさえできてしまえばJavaScriptを使用した動きのあるボタンやメニューが作れてしまうところですね！

今までは各ホームページに対して行っていた作業を、ファイルの読み込みだけで済ませてしまえるのであれば、作業時間をぐっと短縮することができる………可能性を秘めていると思います！

取得した知識を簡単に再利用することができて、かつ他の作業者に展開できるのは非常に魅力的です。
こういったライブラリのようなものをどんどん増やして、作業の負担を減らすのはプログラマの重要なお仕事の一つですね。

最後に、冒頭で話題に出していたじゃがいもとベーコンとチーズの炒め物(？)のレシピを載せます！

＜材料＞

• ジャガイモ：1個
• ペーコン：3～4枚
• チーズ：お好みで

＜作り方＞

1. ジャガイモの皮をむいて火が通りやすいサイズに薄切り
2. ジャガイモを加熱用の器に入れて、ラップで蓋をして電子レンジ(500W)で2分～3分加熱
3. フライパンに薄く油をひいてベーコン、加熱したジャガイモ、チーズの順に乗せる
4. フライパンに蓋をしてチーズが溶けるまで弱火～中火で加熱する
5. 完成！

辛い物が好きな方はタバスコをかけると更においしくなりますよ！
是非、お試しください！

ではまた！

この記事であなたの課題を解決することができましたか？

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。