![](https://cybernoughts.com/wp-content/uploads/question.png)
バックログ画面の文字の色を変えたいなぁ
![バックログが初期設定の状態。](https://cybernoughts.com/wp-content/uploads/tyrano-builder-backlog-16.png)
バックログ画面の文字の色を変更することは、プログラム・スクリプトが分からないという方でも簡単にできます。
![バックログの文字の色・文字の大きさ・行の高さを変更した状態。](https://cybernoughts.com/wp-content/uploads/tyrano-builder-backlog-14.png)
数値の変更や、コードのコピペで簡単にデザインを変更できます。
それでは、始めていきましょう。
tyrano.cssファイルの準備
今回、作業に使うファイルは、tyrano.css(ティラノ・シーエスエス)ファイルです。
tyrano.cssファイルには、文字の色、文字の大きさ等の見た目についてのコードが書かれています。
それでは、tyrano.cssファイルを開いてみましょう。
プロジェクト一覧画面を開く
![プロジェクト一覧画面を開く。プロジェクト一覧をクリック。](https://cybernoughts.com/wp-content/uploads/tyrano-builder-backlog-1.png)
最初に、プロジェクト一覧画面を開きます。
作業中のプロジェクトのフォルダを開く
![作業中のプロジェクトのフォルダを開く。フォルダのアイコンをクリック。](https://cybernoughts.com/wp-content/uploads/tyrano-builder-backlog-2.png)
プロジェクト一覧画面から作業中のフォルダのアイコンをクリックします。
tyrano.cssを開く
![tyrano.cssを開く。矢印のアイコンをクリック。](https://cybernoughts.com/wp-content/uploads/tyrano-builder-backlog-3.png)
フォルダを開き、上矢印のアイコンをクリックします。
![tyranoフォルダをクリック。](https://cybernoughts.com/wp-content/uploads/tyrano-builder-backlog-4.png)
tyranoフォルダを開きます。
![tyrano.cssファイルをクリック。](https://cybernoughts.com/wp-content/uploads/tyrano-builder-backlog-5.png)
最後に、tyrano.cssファイルを開きます。
tyrano.cssファイルを編集する前に、元々あるファイルを一度コピーしておきましょう。
初期設定に戻したい場合は、編集中のファイルを削除し、コピーしておいたファイルの名前をtyrano.cssに戻すだけで、元通りになります。
文字の色を変更する
メモ帳でtyrano.cssファイルを開き、バックログ画面と書かれた項目までスクロールします。
![tyrano.cssファイルで、バックログ画面の文字の色を指定する。](https://cybernoughts.com/wp-content/uploads/tyrano-builder-backlog-6.png)
log.body(ログ・ボディ)と書かれた項目の中にある、color(カラー)という項目が、バックログ画面の文字の色を指定しています。
それでは、初期設定の色から、変更してみます。
今回は、色の指定方法として、キーワードで指定する方法と16進数で指定する方法をご紹介します。
キーワードで指定する方法
- black (黒)
- white (白)
- red (赤)
- blue (青)
- yellow (黄)
キーワードの一例を挙げてみました。
16進数で指定する方法
- #000000 (黒)
- #ffffff (白)
- #ff0000 (赤)
- #000ff (青)
- #ffff00 (黄)
16進数で指定する方法は、# + カラーコードで指定します。
カラーコードの検索はこちらのサイトが便利です。
【配色の見本帳】
https://ironodata.info/search/
お好きな色のカラーコードをコピー・貼り付けします。
![バックログ画面の文字の色を変更。](https://cybernoughts.com/wp-content/uploads/tyrano-builder-backlog-7.png)
今回は、color(カラー)を#00A0E9と指定してみました。
変更した後は、上書き保存を忘れないようにしましょう。
上書き保存がされていないと変更が反映されないので注意です。
プレビューして確認してみましょう。
![バックログ画面の文字の色を変更した状態。](https://cybernoughts.com/wp-content/uploads/tyrano-builder-backlog-8.png)
文字の色が変わっていたら、完了です。
文字の大きさを変更する
今度は、文字の大きさを変えてみましょう。
font-size: 35px;
こちらのコードをtyrano.cssファイルに追加します。
![tyrano.cssファイルに、バックログ画面の文字の大きさを指定する。](https://cybernoughts.com/wp-content/uploads/tyrano-builder-backlog-9.png)
px(ピクセル)は文字の大きさの単位です。
数字はお好みで調整してください。
プレビューして確認してみましょう。
![バックログ画面の文字の色・文字の大きさを変更した状態。](https://cybernoughts.com/wp-content/uploads/tyrano-builder-backlog-10.png)
文字の大きさが変わっていたら、完了です。
文字の行の高さを変更する
最後に、文字の行の高さを変更してみます。
行の高さを変更することで、行と行の間隔が広がります。
複数行になっても、読みやすくなります。
![tyrano.cssファイルで、バックログ画面の文字の行の高さを指定する。](https://cybernoughts.com/wp-content/uploads/tyrano-builder-backlog-12.png)
log.body(ログ・ボディ)と書かれた項目の中にある、line-height(ラインハイト)という項目が、バックログ画面の文字の行の高さを指定しています。
![バックログ画面の文字の色・大きさを変更した状態。](https://cybernoughts.com/wp-content/uploads/tyrano-builder-backlog-11.png)
上の画像は、line-height(ラインハイト)が初期設定の状態です。
![バックログ画面の文字の行の高さを変更。](https://cybernoughts.com/wp-content/uploads/tyrano-builder-backlog-13.png)
line-height (ラインハイト)を3に変更してみます。
![文字の大きさにline-heightの値をかけたものが、文字の行の高さになる。](https://cybernoughts.com/wp-content/uploads/tyrano-builder-backlog-15.png)
文字の行の高さは、105pxとなります。
プレビューして確認してみましょう。
![バックログ画面の文字の色・文字の大きさ・文字の行の高さを変更した状態。](https://cybernoughts.com/wp-content/uploads/tyrano-builder-backlog-14-1.png)
文字の行の高さが変わっていたら、完了です。
今回の解説は以上です。おつかれさまでした。
コメント