RedmineのWikiで色(文字/背景)を操作する方法をわかりやすく解説

今回はRedmineのWikiで主に文字を中心に色をつける方法を紹介します。

真っ黒なWikiページも良いですが、できればカラフルな方が見栄えがよくわかりやすくなるのでしっかり理解していきましょう。今回も画面を用いてわかりやすく解説していきます。

RedmineのWikiで文字色を変える方法

まずは文字色を変えてみましょう。文字色を変えるには変えた箇所に%{color: 色}文字%を入力します。最後に%をしっかり入れるのがポイント！そして色の部分はredやblueなどでもいいですし、#ff0000のようにコードの入力でも大丈夫です。

下記が実際に文字色を変更した画面になります。

前者のredなどの表記は限りがあるので、コードを使ったほうがバラエティ豊富にできますね。本記事の末にコードの参考例を記載しているので参考にしてみてください。

RedmineのWikiで文字に背景色をつける方法

続いては文字の背景に色を付ける方法を見ていきます。いわゆるマーカーですね。先にどのようになるか見てみると下記のように表示することができます。

方法としては文字色をつけるのと似ていまして、%{background-color: 色}文字%と入力することでマーカーをつけることができます。実際の入力画面で見ると下記の通りですね。

RedmineのWiki内の表に色をつける方法

続いては少し変わりまして、Wiki内の表で色を付ける方法を見ていきます。表で色を付けるパターンは2つありまして、①列に色を付ける、②表全体に色を付けるがあります。それぞれ見ていきましょう。

①RedmineのWikiで列に色を付ける

列に色を付けるには表の頭に{background:色}.をつけます。実際の入力例を見たほうがわかりやすいと思うので見ていきますね。

大分鮮やかな表になりましたね。

②RedmineのWikiで表全体に色を付ける

続いては表全体に色を付ける方法を見ていきます。表全体に色を付けるには表の上にtable{background:red}.を入力します。こちらも入力例を見ていきます。

注意点としては表の1行目を書く前にしっかり改行を入れることです。

ちなみに①と②は併用可で下記のように使用することができます。

うまく使うと表も見やすくなりますね。

おまけ：RedmineのWikiでも活用できる代表的な色コード

最後に

色のつけ過ぎは逆に読みづらくなってしまいますが、程よく色を付けると見やすくなってユーザビリティも上がりますね。しっかりとユーザ目線に立ってどのようなWikiなら読みやすくなるか？を考えて作成していきましょう。頑張ってWiki作ったけど誰も読んでくれない…なんてことにならないように(笑)

Wikiの他の使い方については下記をご参照ください。

またRedmineについてもっと詳しく見たい方は下記より御覧下さい。