EC studio EC studio デザインブログ

2007年09月21日投稿者:谷 拓樹

管理画面に使える14のミニアイコン集

企画デザイン・谷です。

僕の主な業務は(X)HTML+CSSコーディングなのですが
システム管理画面のデザイン設計も担当しています。
(実際にデザインを作り込む作業もおこないます。)

こういった業務ですから、技術部との連携もおおく
他のデザイナーよりも関わりも多くなります。

そして徐々に技術部の「お抱え」のデザイナーとなります。笑

よく技術部の方から
「ここ寂しいから、何かアイコンないかなぁ?」
「このリンクがわかりにくいからアイコンつけてー」
という要望を受けることが多く、それに答えてアイコンを作ります。

中には設計段階では採用されていても結局ボツになってしまう
アイコンもありますが、そういうものも含めてこれまで作った
アイコンを振り返ってみると・・・たくさんありました。

今回はその中から、特に使いやすそうなアイコンをセットにして
配布いたします!

中でも個人的におすすめは・・・これ!→ floating window

最近よく見かけるGreyboxやLightboxなどのフローティングウィンドウを
開くリンクなんかに使えるんじゃないでしょうか。

アイコンのダウンロード

ecicon-0.5.zip(合計8.03 KB,透過gif)

ECアイコン バージョン0.5
Creative Commons License
Creative Commonsライセンスで配布します。(商用利用も可)

アイコンの使い方

テキストリンクの頭につける、というのがおすすめです。
サンプルとしてスタイルシートでの指定を紹介します。

CSS:
  1. /* 文字サイズが12px程度の場合 */
  2.  
  3. /* 16x16pxの場合 */
  4. .ico-add {
  5. padding: 2px 0 2px 20px;
  6. background: url(16x16/ico_edit.gif) left top no-repeat;
  7. }
  8.  
  9. /* 14x14pxの場合 */
  10. .ico-add {
  11. padding: 1px 0 1px 18px;
  12. background: url(14x14/ico_mail.gif) left top no-repeat;
  13. }

上記はあくまでも例ですので、皆さんのサイトのスタイルに
合わせてぜひ使ってみてください。


関連した記事:
投稿者
カテゴリー
人気のエントリー
最近のエントリー
アーカイブ
Copyright© ChatWork, All Rights Reserved. secured by ESET.