Tech & Tips コーディング デザイン プログラミング

ImageMagickでCSS Sprite用の画像を作る。

この記事は2年以上前ですので、内容が古い可能性があります

フリーのアイコンを使ってWebサイトを作るとします。感謝しながらアイコンを使っていますが、残念ながら、一つ一つ画像が分かれている場合もあります。別にそのまま使えばいいのですが、サーバーの負荷やクライアント側での速度を考えるとCSSスプライトでやりたいですよね。

自分はプログラマーですし、PCにフォトショップなんて入っていませんし、大体、たくさんのアイコンを一つの画像になんてめんどくさくてやってられないです。当然、デザイナーの方も嫌でしょう。やることはアイコンを並べるだけで単純かつ繰り返しなので、こういう作業こそプログラマーの出番ですよね。
そこで、ImageMagickを使って アイコンを結合します。以下の様なコマンドをコマンドプロンプトやbatファイルで実行して、appendしていけば画像の右にどんどん追加されていきます。[0]がついていますが、つけなくてもいいです。これがついていると元画像がアニメーションgifだった場合に1枚目の画像をappendするようになります。


"C:\Program Files\ImageMagick-6.7.6-Q16\convert.exe" +append icon1.gif[0] cloud.gif[0] iconList.gif[0]
"C:\Program Files\ImageMagick-6.7.6-Q16\convert.exe" +append iconList.gif[0] icon2.gif[0] iconList.gif[0]
"C:\Program Files\ImageMagick-6.7.6-Q16\convert.exe" +append iconList.gif[0] icon3.gif[0] iconList.gif[0]
"C:\Program Files\ImageMagick-6.7.6-Q16\convert.exe" +append iconList.gif[0] icon4.gif[0] iconList.gif[0]
"C:\Program Files\ImageMagick-6.7.6-Q16\convert.exe" +append iconList.gif[0] icon5.gif[0] iconList.gif[0]
"C:\Program Files\ImageMagick-6.7.6-Q16\convert.exe" +append iconList.gif[0] icon6.gif[0] iconList.gif[0]
"C:\Program Files\ImageMagick-6.7.6-Q16\convert.exe" +append iconList.gif[0] icon7.gif[0] iconList.gif[0]
この記事をシェアする:
◇ ◇ ◇ ◇ ◇ ◇ ◇ ◇ ◇ ◇ ◇ ◇ ◇ ◇ ◇ ◇ ◇ ◇ ◇

私たちと一緒に働きませんか?

「ImageMagickでCSS Sprite用の画像を作る。」はいかがでしたか?
株式会社プレスマンでは、 WordPressが大好きな方、仕事を通してさらにスキルを磨きたい方を募集しています。 まずは募集職種をご覧の上、お気軽にお問い合わせください。 あなたとお会いできるのを楽しみにしています。

採用情報を見る

-Tech & Tips, コーディング, デザイン, プログラミング

© 2024 PRESSMAN*Tech Powered by STINGER