カスタマイズ方法から導入・設置まで!15042013サクラ+カスタマイズで「サクラマイズ」って心の中で言っています。はじめにこの記事は前に書いた「春風そよよ〜!桜の花びらがヒラヒラ舞い落ちるスクリプトだよー!」のカスタマイズやアレンジ方法のお助け記事です。(スマートフォンで使っていただけると思っていなかったので、スマホ対応も少し。分かれば比較的簡単にカスタマイズして使っていただける、と思っています。内容の記事にしては反響があったと思いますし、みなさん設置される時に色々とカスタマイズされてる様だったのでもう少し詳しく書いていたら良かったなー、と反省も含みます。カスタマイズ!説明対象になるのは、前回の記事の最後の、全部入れのsakura.8222.7.jsです。(実際に動きを見てみる)これの変数を分かりやすい名前に変更しスペース等を入れた物、さらにそれにコメントを入れた物の2ファイル用意してみました。指定は、8行〜105行の間に書いています。構文中なので「‘(シングルクォーテーション)」で挟む事と、継続して書く場合は「+(プラス)」、終わる場合は「;(セミコロン)」が必要になります。'<style>html,body{overflow-x:hidden;}.hana{position:absolute;height:0;width:0;}</style>';1行で書く事もできます。rotate(15deg);'+'}</style>';「‘CSSの文字列’+」なら、途中に改行入れて複数業に股がっても、タブを入れても半角スペースを入れても問題ありません。あとあと見やすい様に入れておくと無難かもしれません。ランダムに追加しています。1タイプ減らすとこんな感じになります。1タイプ増やすとこんな感じです。r6」が新たに追加されました。ランダムに追加出来るようにしていますが、この数を減らしたい(増やしたい)場合は6の部分を変更してください。r20」を使いたい場合はこんな感じになります。乱数の取得にMath.random()を、少数点以下の切り捨てにMath.floor()を使っています。1これを実行すると1〜6が得られます。Math.floor()で小数点以下を切り捨ててさらに1加えると5が得られます。花びらの枚数を減らしたい(増やしたい)!今回のスクリプトはデモ用に50枚にしていますが、実際に使っていただくとかなりウザい事になると思います。i++){50をお好きな数値に変更してください!※枚数を多くしすぎると重くなるので注意が必要です。参考にお使いいただけたサイトでの枚数をピックアップ!(ちょっと時期を逃してしまったみたいで、もう使っていただけていないサイトもありました。45);})();最後の45の数値を、速めたい場合は小さく、遅めたい場合は大きくしてみてください。ここの数値はsetInterval()のミリ秒なので、大きめなら70とか、小さめなら20とか色々試してみてください。横風が邪魔だ!横風が必要ない場合もありますよねw159行〜189行を削除するかコメントアウトするとかしてください。*/133行目の40の数値を変更してみてください。大きくすると揺らぐ幅が大きく、逆は小さくなります。*/134行目の5の数値を変更してみてください。大きくすると落下速度は速く、逆は遅くなります。さんからも記事で紹介していただけまして、iPhoneからのアクセスも多かったんですよ〜!なので、スマートフォン用に調整した物も用意してみました。変更で大丈夫でしょ、と考えてましたが甘かったですw花びらを10枚に減らしたり、落下速度、揺らぎ、横風等の数値を調節してスマートフォンからでも使用しやすくしてみました。詳しく書きましたので参考にしてみてください。タグの閉じる直前で読み込ませるのが無難かなーと思います。ボタンを押すだけで小さくしてくれますので、それをファイルに保存するだけなので比較的に手軽だと思います。ファイルサイズは、物によりますがコメントやタブとか入ってる状態から半分程度にはなると思います。気をつけたいのは、余計な情報が削除されるのはもちろん、変数名なども短い文字に置き換えもされるので原形はなくなります。13:17:22actyway.com@actywayフロントエンドエンジニアにとっての2019年。インデックスをデフォルトに。15:47:08actyway.com@actywayブログを続ける難しさ。同墓地では国内外のお蔵入りしたベンチャー企業のサービスを紹介します。00:19:24actyway.com@actyway任天堂のゲームでよく見かける「あのフォント」の秘密に迫る。(12)Archives2015年3月2013年12月2013年11月2013年10月2013年9月2013年7月2013年6月2013年5月2013年4月2013年3月2012年12月2012年10月2012年9月2012年8月2012年7月2012年6月2012年4月2012年3月2012年2月2011年12月2011年11月2011年8月2011年7月2011年6月2011年5月2011年4月2011年3月2011年2月2011年1月2010年12。