マウスカーソル追いかけニャンコ・ワンコ(猫犬かんたん切り替えver)

マウスカーソルを追尾する猫や犬のアニメーション画像を表示する方法です。当サイト作者が作成した次のテンプレートについてです。他のブログやウェブサイトでも適用可能です。

概要

  1. マウスカーソルの現在位置へ向かって追尾する猫や犬のアニメーション画像を表示します。

  2. デフォルトでは、猫6種類、犬4種類、ゆでたまごくん1種類の合計11種類の内からランダムで表示されます。

  3. デモ表示として、この記事の公開時にはマウスカーソルに追尾する猫や犬が表示されています。当サイトで表示されていない場合は、愛猫チェリッシュで表示されるようにしておきます。

  4. ブログ管理画面のHTML編集で、JavaScriptコードなどをコピペするだけです。画像のダウンロードやアップロードは不要です。

  5. WEB用の「マウスカーソル追いかけニャンコ」はロゴ&バナー無料自動作成:AUTO LOGO(オートロゴ)の管理人さんが作成されました。当ページの著者は上記サイトの利用規約に基づき、カスタム後の「マウスカーソル追いかけニャンコ・ワンコ(猫犬かんたん切り替えver)」のHTMLおよびJavaScriptのコードだけを利用可能にしています。

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

  1. 読者が癒されます。多分。

  2. 猫や犬がメインテーマのブログにぴったりの装飾です。

    130509neko1_ani.gif
  3. 11種類の内、特定の1つだけが常に表示されるようにできます。たとえば、白色の犬だけが表示されるなどです。

  4. 猫6種類からランダム表示、犬4種類からランダム表示など、動物を指定し色だけランダムも可能です。ゆでたまごくんを除いた猫犬10種類からランダム表示もできます。

  5. 追いかける速さを調整できます。

  6. 猫や犬の画像表示サイズを調整できます。

  7. 猫や犬に特定のページへのハイパーリンクを設定できます。また、ハイパーリンク無しにもできます。

  8. ハイパーリンク設定時に、同一のタブで開くか別タブで開くかを指定できます。

  9. 利用規約上、当サイトでは画像の配布は不可能です。JavaScriptHP用素材からダウンロード可能です。「マウスカーソル追いかけニャンコ」作者さんのサイトです。

  10. 当方で画像をアップロード済みなので、ご自身で画像のダウンロードやアップロードをする必要なく、マウスカーソル追いかけニャンコ・ワンコ(猫犬かんたん切り替えver)を利用できます。

テンプレートのHTMLを編集

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

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

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

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

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

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

    <!--
    マウスカーソル追いかけニャンコ・ワンコ(猫犬かんたん切り替えver)
    http://customtemplate.blog112.fc2.com/blog-entry-135.html
    -->
    <script type="text/javascript" src="http://blog-imgs-60.fc2.com/c/u/s/customtemplate/130509oikake-min.js"></script>
    130509oikake-2.png
  3.  設定 をクリックすれば完了です。11種類の内の1つがランダムで表示されるようになります。

猫犬の選択、色指定、速さ調整

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

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

    <!--
    マウスカーソル追いかけニャンコ・ワンコ(猫犬かんたん切り替えver)
    http://customtemplate.blog112.fc2.com/blog-entry-135.html
    -->
    <script type="text/javascript">
    <!--
    var oikake={
    animal:'', //猫か犬:左のコーテーションのペア内に、neko か inu を入れる。
    color:'',  //色など:brown gray white yellow (nekoのみ black か tora もOK)
    speed:250, //追いかけの速さ:小さいほど速いが、50 以上が望ましい。
    img:'http://blog-imgs-60.fc2.com/c/u/s/customtemplate/',// 画像サーバ
    }
    // -->
    </script>
    <script type="text/javascript" src="http://blog-imgs-60.fc2.com/c/u/s/customtemplate/130509oikake-min.js"></script>
    130509oikake-3.png
  3. 上記コードをコピペしただけだとデフォルト設定のままです。たとえば、常に白色の猫が表示されるようにしたい場合は次のようにカスタムします。反転している部分がカスタムで追加した文字列です。

    <!--
    マウスカーソル追いかけニャンコ・ワンコ(猫犬かんたん切り替えver)
    http://customtemplate.blog112.fc2.com/blog-entry-135.html
    -->
    <script type="text/javascript">
    <!--
    var oikake={
    animal:'neko', //猫か犬:左のコーテーションのペア内に、neko か inu を入れる。
    color:'white',  //色など:brown gray white yellow (nekoのみ black か tora もOK)
    speed:250, //追いかけの速さ:小さいほど速いが、50 以上が望ましい。
    img:'http://blog-imgs-60.fc2.com/c/u/s/customtemplate/',// 画像サーバ
    }
    // -->
    </script>
    <script type="text/javascript" src="http://blog-imgs-60.fc2.com/c/u/s/customtemplate/130509oikake-min.js"></script>
  4. 別の例として、犬なら何色が表示されてもいい場合は次のようにカスタムします。反転している部分がカスタムで追加した文字列です。

    <!--
    マウスカーソル追いかけニャンコ・ワンコ(猫犬かんたん切り替えver)
    http://customtemplate.blog112.fc2.com/blog-entry-135.html
    -->
    <script type="text/javascript">
    <!--
    var oikake={
    animal:'inu', //猫か犬:左のコーテーションのペア内に、neko か inu を入れる。
    color:'',  //色など:brown gray white yellow (nekoのみ black か tora もOK)
    speed:250, //追いかけの速さ:小さいほど速いが、50 以上が望ましい。
    img:'http://blog-imgs-60.fc2.com/c/u/s/customtemplate/',// 画像サーバ
    }
    // -->
    </script>
    <script type="text/javascript" src="http://blog-imgs-60.fc2.com/c/u/s/customtemplate/130509oikake-min.js"></script>
  5. 速さ調整に関しては、コード内のコメントアウトで記載しているとおりです。作者さんのサイトから画像をダウンロードし、ご自身のサーバにアップロードした場合、コード内の img の行を適宜カスタムすれば対応可能です。

  6. 好みのカスタムをしてから、 設定 をクリックすれば完了です。

サイズやハイパーリンクなどを細かくカスタム

  1. いろいろカスタムしたい人向けです。

  2. 次のコードを追加します。追加だけだとデフォルト設定と変わりません。コード内のコメントアウトに解説を記載しています。分かりにくそうな部分を後述しています。

    <!--
    マウスカーソル追いかけニャンコ・ワンコ(猫犬かんたん切り替えver)
    http://customtemplate.blog112.fc2.com/blog-entry-135.html
    -->
    <script type="text/javascript">
    <!--
    if(1){//左の1を0にするとデフォルトのランダム表示に戻せる(かんたん切り替え機能)
    var oikake={
    animal:'', //猫か犬:左のコーテーションのペア内に、neko か inu を入れる。
    color:'',  //色など:brown gray white yellow (nekoのみ black か tora もOK)
    speed:250, //追いかけの速さ:小さいほど速いが、50 以上が望ましい。
    img:'http://blog-imgs-60.fc2.com/c/u/s/customtemplate/',// 画像サーバ
    width:32, //横幅
    height:32, //高さ
    number:11, //種類
    url:'http://customtemplate.blog112.fc2.com/blog-entry-135.html', //リンク先URL
    title:'マウスカーソル追いかけニャンコ・ワンコ(猫犬かんたん切り替えver)', //リンク先のタイトル
    //target:'', //左端の「//(スラッシュ2つ)」削除で同一タブで開く
    //a:'',a2:'', //左端の「//(スラッシュ2つ)」削除でハイパーリンク無し
    }
    }//end if commentout
    // -->
    </script>
    <script type="text/javascript" src="http://blog-imgs-60.fc2.com/c/u/s/customtemplate/130509oikake-min.js"></script>
  3. 表示される動物や色はランダムでいいが、たまごくんだけ表示されないようにするには、コード内の 「number:11」 を次のように変更します。

    number:10, //種類
  4. ハイパーリンクを無しにしたい場合、コード内の 「//a:'',a2:'',」 の行の左端の「//(スラッシュ2つ)」を削除します。これにより、リンク先URLやリンク先タイトルが記載されたままでもハイパーリンクが無しになります。

  5. たまにはデフォルト設定のランダム表示にしたいという場合、「if(1)」の 10 に変更します。戻す場合は、01 に変更します。

  6. 好みのカスタムをしてから、 設定 をクリックすれば完了です。

作者さんの著作権表示や利用規約

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

    //****以下の著作権コメントは消さないで下さい********
    var c1='    カーソル追いかけニャンコ';
    var c2='           **(NEKO_TORA)**';
    var c3='   remade by neon (2000 (c) Nobuo Ishizu)';
    var c4='        http://www6.big.or.jp/~neon/';
    var c5='Original:soft(M.Koba) http://koba.jp/';
    var c6='Original:Illust(j.Gotoh) http://www.win.ne.jp/~juan/';
    
    130509neko1_ani.gif
  2. 利用規約の第6項再配布可能なものJavaScript素材(スクリプト内の著作権コメントを消さないという条件で再配布を可能とする。とあり、JavaScriptコードは再配布可能です。よって、カスタム後のJavaScriptコードを公開しました。

  3. 利用規約の第5項禁止事項再配布、二次配布など不特定多数に当該素材を提供する行為(いわゆる「バナ作」、「ロゴ作」などと呼ばれてるものである。=>作成代行にあたる)とあります。カスタム後のJavaScriptコード公開は、カーソル追いかけニャンコ利用時の利便性を向上させているだけなので、上記引用部分やその他の禁止事項に該当しないと考えています。画像には手を加えておらず、また、画像自体は再配布していません。JavaScriptで読み込む画像はすべて当方が利用しているサーバに保存しています。作者さんのサーバには直リンクしていません。

  4. 万一、当方の考えが不適切であったり、作者さんからご指摘がありましたら、可及的速やかにカスタム後のJavaScriptコードの他者利用を禁止したり、利用規約に合致するよう改めます。

  5. 2013年現在、「マウス追いかけニャンコ」はおよそ24年の歴史があります。多くの人に愛されてきたからこそ、今でもずっと使われているのですね。ありがたいです。

    原作プログラム===古場正行氏
    原作イラスト====後藤寿庵氏
    「マウス追いかけニャンコ」には、約10年(2000.10現在)という長い歴史があります。これから使おうとしてる方も「ニャンコ」の原作者に感謝する気持ちを忘れないようにしてください。
    にゃんこの版権について | ロゴ&バナー無料自動作成:AUTO LOGO(オートロゴ)

このページに関して

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

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

  3. 作成時間

    • 5/7 JavaScriptコードのカスタムに6.5時間
    • 5/8 JavaScriptコードのカスタムに1.5時間
    • 5/9 JavaScript圧縮時の不具合修正に30分、この記事作成~公開に5時間

他サイトの参考になるページへのリンクです。ありがとうございます。

以上です。

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