icons

Silk Icons GIF版

標準のアイコンパックは"Silk Icons"ですが、24ビット透過PNGに対応していない一部のブラウザ(IE6以前など)ではうまく表示されません(IE6以前では背景が薄いブルーになります)。そこで、各アイコン画像をGIFで作り変えてみました。背景なしと白背景の2種類のアイコンパックとPSDソースがダウンロードできます。ご自分のサイトの背景が淡色系の場合は背景なしを使ってみてください。濃色系の場合は、背景なしで試してみてアイコンの輪郭の粗さが目立たないようでしたらそのまま使ってください。粗が目立つようでしたらPSDソースをPhotoshopで開き、背景色をご自分のサイトの色に合わせて新しいパックを作ってみてください。

当初は8ビットPNGで作成しましたが、IE7で正しく表示されない問題があった(色に誤差が出る)ため、GIF形式にしました。

操作手順

「背景なし」または「白背景」をそのまま使う場合は、解凍後3.から操作してください。

1.アイコンパックの作成

任意の場所にフォルダを作成します(フォルダ名は既存のアイコンパックと重複しない名前を指定)。
上記silk-gifフォルダの3つのファイルをコピーします。

  • icons.css
  • icons-rtl.css
  • iconpack.inc

iconpack.incを開き、パック名を他と重複しない名前に変えます。

'name' => $gallery->i18n('Silk Icons gif')  >  'name' => $gallery->i18n('Silk Icons gif hoge')

2.アイコンファイルの作成

サイズ違いのソースが幾つかあります。すべて同じ手順でアイコン画像を作成してください。
ソースはPhotoshop CS(V8)で作成しました。

  • backsレイヤーセットのレイヤーを希望の背景色で塗りつぶす
  • 「ファイル」 > 「Web用に保存」
  • GIF(128)を選び、「保存ボタン」押下
  • ダイアログのスライス指定で「すべてのユーザ定義スライス」を選択して保存
  • 作成されたgifファイル群を上記のパックフォルダに移動

3.フォルダのアップロード

新しいアイコンパックフォルダを"gallery2/modules/icons/iconpacks/"にアップします。

4.アイコンパックの変更

管理画面の「アイコン」を開き、アップしたパックを選んで保存します。