Sprite画像の無料生成 - ヘルプ - Spritebox.IO

Spritebox.IO

登録
コンソール ログオフ ニュース
menu
登録処理が完了いたしました。Spritebox.IOをお楽しみください。
close
Sprite画像の本格運用をはじめるには以下が必要になります。
close
登録 コンソール ログオフ ニュース

無料プランの機能を使う方法

無料プランはSpritebox.IOに登録しているかどうかに関わらずすべての人が利用できる機能を揃えています。

無料プランにはSprite画像の生成機能も含まれています。

無料プランでSprite画像を生成するにはこちらのページにアクセスし、ページの右側(スマホなど画面が小さい機器では下側)に以下のようなフォームが表示されます。

このフォームを使ってSprite画像とCSSを生成してください。

「SPRITE画像生成」機能

このフォームでは簡易的にSprite画像(複数の画像を1つの画像にまとめる)が作成できます。

加えて、そのSprite画像をサイト上などで利用するためのCSSファイルも同時に作成されますので、サイトに埋め込めばスグに使えます(利用例も含まれるのでそれに沿えば簡単に埋め込めますよ!)

ただ、有料プランとは以下の点が違っています。あくまで「お試し用」なのでご了承いただき、本格利用には登録有料プランサブスクライブをしてください。

  • 1つのSprite画像には5個までしか画像を含められません
    有料プランでは20個までか無制限が選べます
  • 生成されたSprite画像やCSS、および使用例を示すファイル群はその場でブラウザ経由でダウンロードしてのみ使えます
    有料プランではファイル群は、すぐに使えるように自動でクラウド上に配置されます
  • Sprite画像に含んでいる画像の編集(画像追加・削除など)はできません
    有料プランではSpritebox.IOのコンソール上でSprite画像に画像を追加したり、不必要な内包画像を削除したりできます

生成実行するには以下のステップを実行してください。

  1. 「元画像の指定」フィールドをクリックして元画像を2個以上5個まで指定してください
    各画像のサイズは1Mバイトまでで、フォーマットはGIF/JPEG/PNGです
  2. 「Sprite画像フォーマット」を選択してください
    デフォルトはJPEGです
  3. 上のステップ作業で問題がなければ「生成する」ボタンがクリックできる状態になるのでクリックしてください。生成処理が開始され、完了し次第生成されたファイルがZIP形式ファイルにまとめられてダウンロードされます
    「生成する」ボタンがクリックできる状態にならない場合は、ステップ1・2でなにか問題がある場合です、選択しているファイルの個数・サイズ・フォーマットをチェックして条件に合うようにしてください

生成されたファイル群はZIPファイルとしてダウンロードされますが、内容は以下のとおりです。

sample.htmlをブラウザで開いて内容を確認してください。

このような形で利用例が表示されます。

Sprite画像がロードされ、含まれている各画像がx2 / x1.5 / x1 / x0.5の倍率で表示されています。

CSSやsample.htmlのソースを確認し、Sprite画像の使い方を確認し、ご自身のWebサイトなどで利用してみてください。

簡単ですよ!

done ヘルプ done 登録とアカウント削除 登録について アカウントの削除について done 登録後の準備 ログイン プロフィール設定 ルートパス名の設定 利用プランのサブスクライブ done 無料プラン Sprite画像の無料生成 移行ツールの利用 done Web制作プラン Sprite画像の生成 Sprite画像の編集 Sprite画像の削除 サンプルページの確認 Sprite画像の利用 ダウンロードして利用 ルートパスの変更 利用プランの変更・停止
Spritebox.IOについて 無料プランについて Web制作プランについて DevOpsプランについて Spritebox.BIZについて 料金 ニュース ヘルプ FAQ 利用規約 プライバシーポリシー お問い合わせ 運営者について