photo credit: JJSchad via photopin cc
Merry X’mas!!!
クリスマスですねー!街がキラキラしているこの時期が何となく好きな凛(@rin_wan)です。
先日、*youさん(@ateitexe)とRochasさん(@Rochas_)から「簡単に雪を降らす事が出来るんだよー!」という話を教えていただきました。
素人の私に出来るのかしら…と思いつつやってみた所無事に出来ました!
必殺!素人の私が見よう見まねでやってみようのコーナー!!!という事で覚書。
目次
お手本サイト様
お二人から教えていただいたのはあくちーさん(@actywav)のこちらの記事。
まずはサンプルを見てみました。記事の中の「この場で snowparticle.○○.js を使う!」って書いてある所をクリック!色々なパターンの雪が降ってきました(*´ω`*)
見よう見まねコーナー
とりあえずベーシックな雪で問題ないと思うので、「PC 向けスクリプト書いたよ!その1」を参考にさせていただくことに。
準備1.必要なファイルの準備
あくちーさん(@actywav)の記事ではお手本となるファイルの中身が書いてあるのと同時に、「snowparticle.1.js をダウンロード!」とご丁寧にDL用のファイルまでご準備いただいております!!
有難くPCへDLさせていただきました。
準備2.Wordpressテーマのバックアップ
この後、テーマにスクリプトを追記するので、万が一変な感じになった時のためにバックアップを。
ただし、今回はテーマの一部だけを触るのでお好みでバックアップしてください。
私はメンドクサイのでテーマのフォルダ全部バックアップ取りました。
準備3.ファイルのアップロード
先ほどあくちーさん(@actywav)の記事からいただいたスクリプトファイルを好きな場所にアップロード。
あんまり関係ない所にupすると後で自分で泣きそうなので、私はテーマ関連の画像が入っているフォルダに入れてみました。
後で使うので、このスクリプトファイルのURLもメモしておく事。
準備4.Wordpressテーマの編集
あくちーさん(@actywav)の記事内「設置方法!」によると、
・「head」タグの間に埋め込む方法
・「Body」タグの間に埋め込む方法
があるそうです。
素人の私は素直にあくちーさん(@actywav)のオススメ、「Body」タグの最後に埋め込む方法をとってみました。
で、素人の私が困ったのは「で、どこのファイルに書き込めば?」という話。
とりあえずWordpressの管理画面より「外観」>「テーマ編集」と進んでみます。右端に並んでいるテーマを構成しているファイル達を一つずつ眺めてみる。
■「ヘッダー」というファイル
ここには「head」タグが全部書いてある。そして「Body」の片割れ(開始タグ)が書いてある。がしかし片割れ(閉じるタグ)が見つからないorz
■「フッター」というファイル
ここには「Body」の片割れ(閉じるタグ)とその前あたりが書いてある。
もう一度あくちーさん(@actywav)の「設置方法!」とにらめっこしてみる。
どうやら「BODY」の閉じるタグの前に書けばいいらしいので、「フッター」に書いてみる。
書くのはこちら。
[html]
<script src="http://さっき自分で保存したsnowparticle.1.jsのURL"></script>
</body>
[/html]
書けたら「ファイルを更新」ボタンをぽち。
完成っ!!
どれどれ。Blogを覗いてみる。
ちらちらと雪が降ってきたーーーヾ(*´∀`*)ノキャッキャ 大成功ーーー!!!
キャプチャも撮ってみましたよ!!
がしかし背景白だからキャプチャ撮ってもわかりにくいっorz
わんこの雪写真にかろうじていくつか写っているので拡大w
こんなオチでしたが、りんろぐ。の雪景色楽しんでいただければ幸いです(*´ω`*)
参考にさせていただいたサイト
■あくちーさん(@actywav)のこちらの記事。
■*youさん(@ateitexe)のサイト
■Rochasさん(@Rochas_)のサイト
皆様、素敵な情報を教えていただきありがとうございました♪
まとめ
・クリスマスと言えば雪!
・素人なりに見よう見まねで10分で出来た!
・スクリプトを埋め込む場所に注意!
・なぜかiphone5でも雪見れてる!
冬の間はしばらく雪を眺めておこうと思いますヾ(*´∀`*)ノ
雪見えたよー!と思った方はぽちっとどうぞ!
[thankyou]
次の記事もお楽しみに~(*`・ω・)ゞ