« Google Chrome + Gmail 読込みが極端に遅い | Main | Windows7からWindows10へのアップグレード後、スリープから起動しない »

02/15/2016

WordPressの画面に音符を降らせる

WordPressには、いろいろなプラグインがある。その中の『Super Snow』を使って、音符を降らせてみようと思う。

3 画面上を降らせる音符は、Adobe Illustrator で 1つの音符当たり 高さ 100px 幅 100px で 左図のように 3種類の音符を制作し、背景を透明にし、左から右方向順に
①note-1.png  ②note-2.png  ③note-3.png  として保存した。


《手順》
①WPを起動させ、メディアに上記の音符 ( note-1.png, note-2.png, note-3.png ) を「新規追加」する。

新規追加した後、
②メディア → ライブラリ を確認する。
 追加したメディアの一つについて「編集」をクリックする。
 画像の右側の欄に、ファイルのURL: の下に枠があり、その中にこの画像が保存されているURLが表示されている。⇒ この枠の中の文字をハイライトしてコピーする。

③プラグイン「
WP Super Snow (Falling Snow, Customizable) 」をインストール、有効化する。
次に、プラグインした「WP Super Snow」 を有効化する。⇒ これだけでは未だ(雪)は降らない。 Settings をクリックして、降らせ方を調整する。

 開いた画面で「Virtual Snow Blower」をクリックしてみると、
 画面上に降りそそいでいる雪は、「雪の結晶」と「雪のボール」の 2つになっている。

 Snowflake Images (Line-Delimited) を読むと
 《自分のイメージを追加したいか、デフォルトの雪片画像を交換したければ、ここでそれをすることができる。背景を
透明にした 約 100x100 pixels のpngファイルを推奨する。
グラフィックスの数に制限はない。各行には、一個のファイルだけを置くこと。
 と記載があるので、②でコピーしたファイルのURLを Snowflake Imagesの説明分下にある枠内の行、例えば、「/wp-content/plugins/wp-super-snow/src/client-s/images/snowball.png」 と置き換える。

 イメージファイルの置き換えが終わったら、このページを下にスクロールし、《 Save All Changes 》 をクリックし変更内容を保存する。

④プラグイン ⇒ インストール済みプラグイン ⇒
WP Super Snow ⇒ Settings と辿り、
「Virtual Snow Blower」を起動した
画面の右側にある Preview 画面には、上記で入れ替えた音符画像が画面上を降っているのを確認出来る。

⑤ 次の音符を WP Super Snow の「Virtual Snow Blower」部分へ追加するには、②へ戻り、その音符のURLをコピーした後、

プラグイン ⇒ インストール済みプラグイン ⇒ WP Super Snow ⇒ Settings と辿り、「Virtual Snow Blower」を起動し、

メディアのライブラリ
でコピーしたファイルのURLを Snowflake Imagesの説明分下にある枠内に既存の行と 置換あるいは追加し、作業が終わったら、このページを下にスクロールし、《 Save All Changes 》 をクリックし変更内容を保存する。

 全ての音符が Snowflake Images の中の枠内に追加できるまで、⑤⇒⑥を繰り返す。


⑦上記⑥までの作業では、プレビューで仮想画面上に降りそそいでいるだけで、音符は実画面上で降りそそぐ設定にはなっていない。

 プラグイン ⇒ インストール済みプラグイン ⇒ WP Super Snow ⇒ Settings で開いた「WP Super Snow 」画面の上方部分にある

 ○ Yes, enable WP Super Snow!   をクリックして、設定した内容で画像を降らせる事を了解し、 《 Save All Changes 》 をクリックして、この内容を確定保存する。

 この後、ホームページを確認すると、雪片に変えて音符が画面上を降りそそいでいる事が確認出来るはずである。

⑧上記で追加した内容を一時的に止めるためには、
 プラグイン ⇒ インストール済みプラグイン のリストから「WP Super Snow」を探し、
 
停止 をクリックすればよい。

《情報》
ところで、HTML5で制作したホームページの画像上に上記の音符を降らせる方法は、私の別のブログ Gloabl Edgewalk ( http://edgewalk.wp.xdomain.jp/?p=651 ) で雪の結晶片 snowflake-1.png, snowflake-3.png, snowflake-3.png をそれぞれ note-1.png, note-2.png, note-3.png に置き換えれば容易に実現する事が出来る。

《追記》
Snowcrossflow 音符を画面の上から下に流す方法では、音楽が流れ漂っているという雰囲気を醸し出せない。そのため、音符を画面の左から右方向に流れるように変更する方法を、私が管理するもう一つのブログ「雪の結晶を画面の左から右方向に流す方法」 
( http://edgewalk.wp.xdomain.jp/?p=685 ) に記載した。この方法は、WordPressでは使えず(多分NG?)、HTMLでダイレクトに記載する必要があるし、前述のJavaScriptをインストールして加筆変更が必要、更に限られた所にしか適用出来ないかも知れないが・・・、興味のある方は、是非参考にされたい。

《参考にさせて戴いたブログ》
Somethinghitme 「Snowfall 1.6」 より jQuery Snowfall 1.6 をdownload する。
・ダウンロードされた JQuery-Snowfall-master.zip を解凍して snowfall.jquery.js を左記表のように加筆変更し使わせて貰った。

« Google Chrome + Gmail 読込みが極端に遅い | Main | Windows7からWindows10へのアップグレード後、スリープから起動しない »

PC and PC troubles」カテゴリの記事

Comments

Post a comment

Comments are moderated, and will not appear on this weblog until the author has approved them.

(Not displayed with comment.)

TrackBack


Listed below are links to weblogs that reference WordPressの画面に音符を降らせる:

« Google Chrome + Gmail 読込みが極端に遅い | Main | Windows7からWindows10へのアップグレード後、スリープから起動しない »

August 2019
Sun Mon Tue Wed Thu Fri Sat
        1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31

Recent Trackbacks

無料ブログはココログ