プロジェクト

全般

プロフィール

Wiki » ソフトウェア開発環境 » Redmine »

Redmineにテーマを入れる

テーマ一覧とインストールメモ

/var/lib/redmine/public/themes にテーマを入手して展開します。

デフォルト

Redmineのデフォルトのテーマ。青基調

Classic

Redmineに標準で搭載されているテーマ。青基調。

Alternate

Redmineに標準で搭載されているテーマ。デフォルトのテーマにチケット一覧の色分けなど追加。青基調。

farend basic

Redmineのデフォルト（Alternate）テーマをベースに日本語向け設定がされたもの。青基調。
http://blog.redmine.jp/articles/farend-basic-theme/

インストール方法

~$ su - redmine
~$ cd /var/lib/redmine/public/themes
themes$ git clone https://github.com/farend/redmine_theme_farend_basic.git farend_basic
themes$

farend fancy

上述のfarend basicから、アイコン追加、色変更がされたもの。青基調。

インストール方法

~$ su - redmine
~$ cd /var/lib/redmine/public/themes
themes$ git clone https://github.com/farend/redmine_theme_farend_fancy.git farend_fancy
themes$

bleu clair

redmineのデフォルトである青系基調で、日本語をみやすく、チケット一覧の色付けなどが追加されたテーマ
http://blog.redmine.jp/articles/farend-bleuclair-theme/

Redmineのバージョンに応じたブランチで管理されているので、インストールはRedmineのバージョンに応じたブランチを取得します。
以下は、Redmine 4.1にインストールするものです。

~$ su - redmine
~$ cd /var/lib/redmine/public/themes
themes$ git clone -b redmine4.1 https://github.com/farend/redmine_theme_farend_bleuclair.git bleuclair
themes$

gitmike

A1テーマから派生して github 風のUIにしたテーマ。白基調。

インストール方法

~$ su - redmine
~$ cd /var/lib/redmine/public/themes
themes$ git clone git://github.com/makotokw/redmine-theme-gitmike.git gitmike
themes$

Red-Andy

レスポンシブなテーマ。やや色使いが多い（主コンテンツが白背景にオレンジと黒、ページ上下が暗色背景）。
Wiki記法表示で見出しがオレンジ系（下線付き）なのは見やすい。

インストール法
ダウンロードページ
からダウンロードしてテーマディレクトリに展開

~$ su - redmine
~$ cd /var/lib/redmine/public/themes
themes$ sudo svn co http://svn.s-andy.com/red-andy red-andy
themes$ sudo chown -R redmine.redmine gitmike

PurpleMine2

T.B.D.

kodomo

子供向けに、見た目、使用フォント（手書き風フォント）が設定されたテーマ。

~$ su - redmine
~$ cd /var/lib/redmine/public/themes
themes$ git clone https://github.com/akiko-pusu/redmine_theme_kodomo.git kodomo
themes$

テーマには手書き風フォントとして、欧文の Patrick Hand、和文のきろ字、Kosugi Maruが同梱されています。
同梱されていませんが、あんずもじは、別途入手（無償）して設定する案内があります（「大変可愛らしい文字」とのこと）。

あんずもじの設定

READMEの記述では設定方法が分からなかったので1、いろいろ試行錯誤していました。

  • あんずもじ配布サイト(http://www8.plala.or.jp/p_dolce/index.html)から、右側メニューの[フォント]を辿り、[あんずもじ]を辿って次の2つのフォントアーカイブファイルをダウンロード
    ap1.zip、ap2.zip
  • アーカイブを展開します。Linux（UTF-8環境）ではアーカイブファイル内の日本語が化けるのでオプション指定しています。
    ~$ unzip -O CP932 ap1.zip
Archive:  ap1.zip
  inflating: あんずもじ/APJapanesefont.ttf
  inflating: あんずもじ/emozi1.gif
  inflating: あんずもじ/ReadMeあんずもじ.txt
~$ unzip -O CP932 ap2.zip
Archive:  ap2.zip
  inflating: あんずもじ等幅/APJapanesefontT.ttf
  inflating: あんずもじ等幅/emozi1.gif
  inflating: あんずもじ等幅/ReadMeあんずもじ.txt
~$
  • 展開された中にあるフォントファイル（APJapanesefont.ttfとAPJapanesefontT.ttf）を、こどもテーマのfontディレクトリ下に配置します。
    ~$ cp あんず*/*.ttf /var/lib/redmine/public/themes/kodomo/font
  • こどもテーマのstylesheets/fonts.cssにあんずもじの設定を追記します。
    +/* anzu */
+@font-face {
+  font-family: anzu;
+  src: url("../font/APJapanesefont.ttf") format("truetype");
+}
+
+/* anzu tofuku */
+@font-face {
+  font-family: anzu_t;
+  src: url("../font/APJapanesefontT.ttf") format("truetype");
+}
+
 :root {
-  --font-family: 'Patrick Hand', 'kiroji_b', 'Kosugi Maru', Verdana, sans-serif;
-  --font-family-t: 'Patrick Hand', 'kiroji', 'Kosugi Maru', Consolas, Menlo, "Liberation Mono", Courier, monospace;
+  --font-family: 'Patrick Hand', 'anzu', 'kiroji_b', 'Kosugi Maru', Verdana, sans-serif;
+  --font-family-t: 'Patrick Hand', 'anzu_t', 'kiroji', 'Kosugi Maru', Consolas, Menlo, "Liberation Mono", Courier, monospace;
 }

1 Web技術に疎く、そもそもWebフォント（？）の概念がなく、フォントは利用する端末側にインストールするものと思っていたため、設定方法の説明がちんぷんかんぷんでした。

テーマのカスタマイズ

日本語の表示をぎざぎざにしない（MS ゴシック／MS 明朝を使わない）

特に欧米系のテーマでは、フォント指定が非日本語フォントとなっており、日本語表示が代替フォントとなって残念な表示となるものが多いです。
Windows OS上では代替フォントとしてMS ゴシックやMS 明朝が使われます。これは、文章表示に使われる大きさではビットマップ表示されるため、見た目がぎざぎざになります。そこで、テーマのフォント指定にスケーラブルフォントとして表示される日本語フォント（メイリオ系、IPA系、游系など）を追加します。

T.B.D.

Windows 7環境でのフォント

標準搭載のメイリオフォント、別途入手のIPAフォント、游フォントあたりが利用しやすいでしょう。

編集エリアのフォントがプロポーショナル

T.B.D.

参考情報

ほぼ4年前に更新