マウスカーソルからティンカーベルみたいなきらきらが降り注ぐ♪

マウスカーソルを動かすときらきらが降り注ぐ設定です。まるでティンカーベルが飛んでいるみたいです。当サイト作者が作成した次のテンプレートについてです。

概要

  1. TINKERBELL MOUSE EFFECTをコピペで使えるようにします。

  2. 下図で淡い黄色の丸で囲ったような効果です。画像引用元はこちら。

    130720tinkerbell-3.jpg
    130720tinkerbell-4.gif

メリット・できること・できないこと

  1. ティンカーベルの魔法でブログのかわいさが上がり、ブログ管理人の女子力アップを期待できます。なお、ブログ管理人がおっさんでも使用できます。

  2. マウスを動かすことでティンカーベルのきらきらが軌跡として残るので、マウスカーソルの位置を見失った時に発見しやすくなります。

  3. ページの閲覧に必要な効果ではないので、人によっては余計な機能と思われるかもしれません。

  4. マウスカーソル追いかけニャンコ・ワンコ(猫犬かんたん切り替えver)との併用はできませんティンカーベルと追いかけニャンコの2つのコードをHTML内に記述しても、最初に記述した方が機能しません。また、これ以外にも何らかの未知の現象が発生するかもしれません。

テンプレートのHTMLを編集

コードをコピペで追加する場所

  1. 次のコメントアウトを探します。下図で反転している部分です。

    <!-- ▲▲▲ jQueryなど読み込み 終了 ▲▲▲ -->
    130509oikake-1.png
  2. 上記コメントアウトの上に後述するコードを追加します。

最もかんたんに設置できるデフォルト表示

  1. デフォルト設定なら、コピペだけで利用できます。

  2. 次のコードを追加します。下図で反転している部分が追加後です。

    <!--
    マウスカーソルからティンカーベルみたいなきらきらが降り注ぐ♪ ver130719
    http://customtemplate.blog112.fc2.com/blog-entry-145.html
    -->
    <script type="text/javascript" src="http://blog-imgs-60.fc2.com/c/u/s/customtemplate/130719tinkerbell-min.js"></script>
    130720tinkerbell-1.png
  3.  設定 をクリックすれば完了です。

    THAT'S IT When your page loads and you move your mouse, magic sparkles (or fairy dust, whichever you prefer) appear, just like Tinkerbell in Peter Pan!
    Tinkerbell Magic Sparkle Fairy Dust Mouse :: RV's free DHTML and JavaScript effects

きらきらの色、きらきらの数、きらきらの位置を調整可能

  1. ニーズが高そうな部分をカスタム可能にします。

  2. 次のコードを追加します。下図で反転している部分が追加後です。

    <!--
    マウスカーソルからティンカーベルみたいなきらきらが降り注ぐ♪ ver130719
    http://customtemplate.blog112.fc2.com/blog-entry-145.html
    -->
    <script type="text/javascript">
    <!--
    if(1){//左の1を0にすると下3行の設定を無視してデフォルトに戻せる(かんたん切り替え機能)
    var colour='random';//左のコーテーションのペア内を #f0f や red などに変更し色の指定可能
    var sparkles=50;//きらきらの数
    var lower_sparkles=20;//きらきらが降り始める位置
    }//end if commentout
    // -->
    </script>
    <script type="text/javascript" src="http://blog-imgs-60.fc2.com/c/u/s/customtemplate/130719tinkerbell-min.js"></script>
    130720tinkerbell-2.png
  3. 上記コードをコピペしただけだとデフォルト設定のままです。たとえば、きらきらの色を青に指定し、数を20に減らし、位置をデフォルトよりも少し下げるなら、次のようにカスタムします。反転している部分がカスタムで変更した部分です。

    <!--
    マウスカーソルからティンカーベルみたいなきらきらが降り注ぐ♪ ver130719
    http://customtemplate.blog112.fc2.com/blog-entry-145.html
    -->
    <script type="text/javascript">
    <!--
    if(1){//左の1を0にすると下3行の設定を無視してデフォルトに戻せる(かんたん切り替え機能)
    var colour='blue';//左のコーテーションのペア内を #f0f や red などに変更し色の指定可能
    var sparkles=20;//きらきらの数
    var lower_sparkles=30;//きらきらが降り始める位置
    }//end if commentout
    // -->
    </script>
    <script type="text/javascript" src="http://blog-imgs-60.fc2.com/c/u/s/customtemplate/130719tinkerbell-min.js"></script>
  4. 別の例として、マウスカーソルに近い位置からきらきらを降らせるだけなら、次のようにカスタムします。反転している部分がカスタムで変更した文字列です。

    <!--
    マウスカーソルからティンカーベルみたいなきらきらが降り注ぐ♪ ver130719
    http://customtemplate.blog112.fc2.com/blog-entry-145.html
    -->
    <script type="text/javascript">
    <!--
    if(1){//左の1を0にすると下3行の設定を無視してデフォルトに戻せる(かんたん切り替え機能)
    var colour='random';//左のコーテーションのペア内を #f0f や red などに変更し色の指定可能
    var sparkles=50;//きらきらの数
    var lower_sparkles=1;//きらきらが降り始める位置
    }//end if commentout
    // -->
    </script>
    <script type="text/javascript" src="http://blog-imgs-60.fc2.com/c/u/s/customtemplate/130719tinkerbell-min.js"></script>
  5. 好みのカスタムをしてから、 設定 をクリックすれば完了です。

オリジナル版への追加機能

  1. きらきらの位置調整オプションはオリジナル版にはありませんでした。

  2. 当テンプレート標準装備のグローバルナビゲーションで展開される項目にきらきらが被っている状態で、きらきらにマウスカーソルが合わさると展開部分が非表示になりました。これでは読者の利便性を損なうので、きらきらが降り注ぎ始める位置を下げられるようにしました。

  3. これにより、マウスカーソルときらきらが被りにくくなり、それほど利便性が下がらなくなりました。

  1. JavaScriptファイル内に記載していますが、ここでも記載致します。

    *  Tinkerbell Magic Sparkle *
    *(c)2005-13 mf2fm web-design*
    *  http://www.mf2fm.com/rv  *
  2. 当ページで記載しているカスタム方法について、上記作者さんに質問するのは迷惑なのでやめてください。このページに記載されているとおりにカスタムしても、他のJavaScriptと競合して機能しない場合があるかもしれません。その際は使用を諦める、もしくは次のページを熟読し当方が管理する掲示板に投稿できます。

  3. ちなみにですが、TINKERBELL MOUSE EFFECTの作者さんも不躾な質問者に辟易しているようです。以下の英語の引用文の要点を意訳すると「問題を詳述されないと返答しようがない。少なくとも問題のあるページのURLを知らせろ。」です。

    It doesn't work... What do I do?
    You wouldn't believe how many times I get asked this question. And the simple answer is "Without more information, I have no idea!" If you are having a problem getting a script to work, and even with the help of these FAQs you still can't get it going, at least send me a link to the page where the problem is, otherwise you might as well be asking "How long is a piece of string?" for all the assistance I can be.
    RV's free DHTML and JavaScript effect scripts :: Frequently Asked Questions (FAQ)
  1. 次の動画から引用しました。

  2. ついでに秀逸な動画も紹介します。

  3. まさかディズニーで次のネタが見れるとは思いませんでした。上記動画のネタバレ注意

    あぶなーい!
    130720tinkerbell-6.jpg
    130720tinkerbell-7.jpg
    わたしはいいから逃げて!
    130720tinkerbell-5.jpg
    _________________________
         <○ノ
          ∥
          くく
     しまった!ここは糞スレだ!
     オレが止めているうちに他スレへ逃げろ!
     早く!早く!オレに構わず逃げろ!
  4. 関連商品です。

このページに関して

  1. 予告なく変更する場合があります。

  2. このページに限りませんが、記載内容の正確性は保証いたしかねます。

  3. 今後のテンプレート改訂時には上記説明と相違があるかもしれません。ご了承願います。

  4. このページの制作時間

    • 2013年07月17日:当サイトへの実装とJavaScript圧縮時のエラー修正に1時間。
    • 2013年07月19日:グローバルナビゲーションで展開される項目が勝手に非表示になる原因の特定、きらきらの位置調整機能の追加、この記事の作成途中までで3時間。
    • 2013年07月20日:この記事の作成仕上げ~公開に2時間。
    • 製作時間は合計6時間だった。

他サイトの参考になるページへのリンクです。

以上です。

関連記事
(この一行は、各記事の最後に固定表示するサンプルです。テンプレートを編集して削除もしくは非表示にしてください。)
スポンサードリンク
(この一行は、各ページ下部に固定表示するサンプルです。テンプレートを編集して削除もしくは非表示にしてください。)