フリーのアイコンを使って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]
※作成から4年前(1782日経過)の記事です。内容が古い可能性があります。
東京都東日本橋の株式会社プレスマンPRESSMAN*Tech