ティラノビルダーの分岐ボタンデザインをCSSで変更してみた！【やり方解説】

趣味でブログカスタマイズをしています。ふと「あれ？ティラノビルダーってCSS使えるんじゃなかったっけ？」と思ったので、ゲームの雰囲気に合うグラデーションボタンに変更してみました。

手順
- STEP.1 プロジェクトファイルを開く
STEP.2tyrano.cssを開く

手順

STEP.1 プロジェクトファイルを開く

ティラノビルダーを起動して、変更したいプロジェクトファイルを左上の恐竜マークをクリックして開きます。

STEP.2tyrano.cssを開く

tyrano>tyrano.cssで開けます。メモ帳よりもワードパッドが使いやすいです。

STEP.3 編集場所をみつける

アルファベットだらけで混乱しそうですが、やることはコピペだけなので安心してください。下にスクロールして「/* color styles 」と書かれた場所を探します。（検索つかってもＯＫ）

すると、分岐ボタンでおなじみのブラックだとか、オレンジとかいう単語が出てきます。

こういうやつ

STEP.4　お好みのCSSを探す・つくる

「ボタン　CSS」でググるとたくさん出てくるので、そこからお借りしましょう。なんとなくわかってきたら数値や色をいじることもできます。

ちなみに私は、

.red {
background-image: linear-gradient(to top, #a8edea 0%, #fed6e3 100%);
flex: 1 1 auto;
margin: 10px;
padding: 30px;
text-align: center;
text-transform: uppercase;
transition: 0.5s;
background-size: 200% auto;
color: white;
box-shadow: 0 0 20px #eee;
border-radius: 10px;
color:#fff;
}
.red:hover {
background-position: right center;
color:#FFF;
}
.red:active {
background-position: right center;
color:#FFF;
}

これを使ってます。（コピペＯＫです）

コピーするときは{}で囲まれた部分だけを持ってきてください。