あめみかスマートフォン用の表示で見るあめみか「雨はいつもわたしのみかた。ブログ-カスタマイズ混々と這い出るオバケ再来月ぐらいに雪を降らせようかと思ったのですが、それでは忘れてしまいそうなのでふらふら~っとフライングしてしまおうといろいろ調べて試行錯誤しておりましたらこんなのできました。いってもほぼほぼコピペした代物ですけれどもね。1月後に近年、年々盛り上がりを増しているともっぱらの噂ハロウィンというものらしいので、そんなときにブログのにぎやかしにでも使ってみてはいかがでしょうか?コードはこんな感じどえす。class="Halloween">と</div>の間に画像やテキストを書き込めばアニメショーンを背景に絵や文章を表示させることができます。くぐらうんどぽじしょん3枚の画像を使うときは「background-position:」のところに3組の数値が必要となります。前にある画像ほど前面に描画されます。「画像2枚しか使わないよ~」というときは2組、1枚だけなら1組にしてね。この数値は座標を表しています。0;}は、アニメーションをx座標400pxのy座標400pxから開始(0%のbackground-position)してx座標0のy座標0で終了(100%のbackground-position)してちょうだいということです。ゴーストの画像サイズが400×400なのでちょうど画像の右下(400,400)から始めて左上(0,0)で終わるといった具合なので画像が左上に流れていきます。2枚目の500×500のpumpkin画像は(-500,500)から(0,0)に向かうので右上に流れていきます。3枚目の400×400のtomb画像は(0,400)から(0,0)に向かうので真上に画像が流れていきます。この数字テキトウでも動かないこともないですが、ちゃんと画像サイズに合わせないとときどきスムーズに流れずひっかかったようになりますので、できれば合わせておきましょうね。ちなみに、手っ取り早く雨や雪のように上から下に画像が流れるようにするには、0%と100%を入れ替えちゃえばいいですよ。はいけいとじかん白や黒を基調とした画像を使う場合には背景色と同化して見えなくなってしまわないように「background-color:」を適宜変えましょう。「animation:」のところの「10s」はそのままずばり画像の流れ行く速さをコントロールするものです。お好みで変更なさってみてください。infinite」もそのままズバリで、画像を延々流し続けなさいよと指示するものですから、これは消さないように残しておきましょうね。えいっちゃんやっかいなのは画像を用意することでしょう。1枚の画像を流すのであればあまり気にするところはありませんが、複数枚の画像を合わせるとなると背景を透過させたpng形式の画像でないとなりません。いうのにコピペした画像はコピー元ではpng形式で提供してくださってはいても、うっとこに貼り付けたときにはたしかにpng形式ではあっても背景が塗りつぶされたものとなっていることがあります。右クリックで「画像をコピー」あるいは「Ctr+C」派の方はたいていそうなりますのでご注意くださいね。png形式で提供されている画像であれば右クリック「名前を付けて画像を保存」などダウンロードするようにすればこの事態を回避できることでしょう。残念ながらjpg形式で提供されている場合はGIMPなどのソフトを使って背景を消し、png形式でエクスポートしたものを使うとよいでしょう。ご自身で画像をこさえる場合は画像サイズや背景を消すこと、透過情報を含めてpng形式で保存することなどなどを意識してお忘れなきように。このようにひとに説明しているようでいて実は自分に言い聞かせているのでした。よかったらどうぞ同じ絵でよければこちらをどうぞ。画像は「コピー」ではなく「保存」してね。雪の結晶の画像サイズは297×222です。雪の結晶以外の画像処理が粗いのは「コピー」したものの背景をちまちまと削ったもので、できあがった後に「保存」すればいいのだということに気づき、「今となっては作り直すのめんどう」状態に陥ったためです。ディテールを気にされる方はつぎにご紹介しますサイトより元画像を「保存」してつくってみてください。わたしはまだGIMPに慣れないのですが、画像ソフトをそこそこ使える方であればちょちょいと10分とかからずできます。こちらが今回参考にさせていただいたサイトです。(id:takiji13)風雪に耐えない風説が綴らています。簡単な話もわざわざぱくぱく小難しく語る比喩で息する溺れる魚。(14)Archiveスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。