TipsUseIcon » 履歴 » バージョン 1
Mitsuyoshi Yoshida, 2011/05/25 00:38
| 1 | 1 | Mitsuyoshi Yoshida | h1.アイコンを使用する |
|---|---|---|---|
| 2 | |||
| 3 | Redmine にはプロジェクトメニューや新規作成、編集といったリンクでアイコンが使われています。プラグインを作る場合でもこういったアイコンを使いたい場合がよくあります。それらのアイコンを使う方法を紹介します。 |
||
| 4 | |||
| 5 | 例えばの [編集] のリンクでは次のように記述されています。( @app/views/issues/show.rhtml@ ) |
||
| 6 | <pre><code class="ruby"> |
||
| 7 | link_to l(:button_edit), {:controller => 'queries', :action => 'edit', :id => @query}, :class => 'icon icon-edit' |
||
| 8 | </pre> |
||
| 9 | これをみるとアイコンを使う場合、 Redmine では、使いやすいようにアイコン画像を直接指定するのではなく、 CSS のクラスでアイコンを指定子、そのクラスを指定しています。 |
||
| 10 | また、'icon icon-edit' と 2 つのクラスが指定されていますが、クラスは複数指定しているとその定義全部が適用されます。これを使って *icon* クラスでアイコンを使う場合の基本的なスタイルを定義し、*icon-xxx* で個別のアイコン画像を _background-image_ を使って指定しています。 |
||
| 11 | このクラス定義は Redmine のデフォルトの CSS である @public/stylesheets/application.css@ で定義されています。 |
||
| 12 | |||
| 13 | <pre> |
||
| 14 | .icon { |
||
| 15 | background-position: 0% 50%; |
||
| 16 | background-repeat: no-repeat; |
||
| 17 | padding-left: 20px; |
||
| 18 | padding-top: 2px; |
||
| 19 | padding-bottom: 3px; |
||
| 20 | } |
||
| 21 | .icon-edit { background-image: url(../images/edit.png); } |
||
| 22 | </pre> |
||
| 23 | |||
| 24 | デフォルトのアイコンは @public/images@ におかれています。アイコンを使う場合、以下のような手順で行ってみてください。 |
||
| 25 | # @public/images@ で使いたいアイコンを探す |
||
| 26 | # @public/stylesheets/application.css@ でそのアイコンがどのようなクラス名で定義されている調べる |
||
| 27 | # 使用したいタグのクラスに 'icon _見つかったクラス名_ ' とつける |
||
| 28 | |||
| 29 | ちなみに Redmine の本体ではアイコンだけでいい場合、 image_tag などを使っているところもあるのですが、プラグインだとなぜか失敗したので、クラスで指定した方がいいと思います。 |