プロジェクト

全般

プロフィール

操作
履歴

プラグイン Tips »

TipsUseIcon » 履歴 » リビジョン 2

« 前 | リビジョン 2/7 (差分) | 次 »
Mitsuyoshi Yoshida, 2011/05/25 00:38

アイコンを使用する

Redmine にはプロジェクトメニューや新規作成、編集といったリンクでアイコンが使われています。プラグインを作る場合でもこういったアイコンを使いたい場合がよくあります。それらのアイコンを使う方法を紹介します。

例えばの [編集] のリンクでは次のように記述されています。( app/views/issues/show.rhtml )

link_to l(:button_edit), {:controller => 'queries', :action => 'edit', :id => @query}, :class => 'icon icon-edit'

これをみるとアイコンを使う場合、 Redmine では、使いやすいようにアイコン画像を直接指定するのではなく、 CSS のクラスでアイコンを指定子、そのクラスを指定しています。
また、'icon icon-edit' と 2 つのクラスが指定されていますが、クラスは複数指定しているとその定義全部が適用されます。これを使って icon クラスでアイコンを使う場合の基本的なスタイルを定義し、*icon-xxx* で個別のアイコン画像を background-image を使って指定しています。
このクラス定義は Redmine のデフォルトの CSS である public/stylesheets/application.css で定義されています。

.icon {
background-position: 0% 50%;
background-repeat: no-repeat;
padding-left: 20px;
padding-top: 2px;
padding-bottom: 3px;
}
.icon-edit { background-image: url(../images/edit.png); }
デフォルトのアイコンは public/images におかれています。アイコンを使う場合、以下のような手順で行ってみてください。
  1. public/images で使いたいアイコンを探す
  2. public/stylesheets/application.css でそのアイコンがどのようなクラス名で定義されている調べる
  3. 使用したいタグのクラスに 'icon 見つかったクラス名 ' とつける

ちなみに Redmine の本体ではアイコンだけでいい場合、 image_tag などを使っているところもあるのですが、プラグインだとなぜか失敗したので、クラスで指定した方がいいと思います。

{{fnlist}}

Updated by {{lastupdated_by}} , {{lastupdated_at}}{{count}}
Access count: {{show_count}} :since 2009-10-30

Mitsuyoshi Yoshida さんがほぼ13年前に更新 · 2件の履歴