サイト改装中です。デザイン崩れるかも

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

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

手順

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

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

STEP.2
tyrano.cssを開く

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

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

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

こういうやつ

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;
}
これを使ってます。(コピペOKです)

MEMO
コピーするときは{}で囲まれた部分だけを持ってきてください。
STEP.5
いらないボタンデザインを書き換え
この色は使わないだろうな、というところをコピペで書き換えます 。わたしは赤色を使うことが無いので、redのプロパティ({}で囲まれてる部分)を書き換えました。(ちょっと意味がわからないよって方は上のコードを全コピして、文章たちの一番下にペーストしてください)

 

こうして完成したのがこのボタン。分岐ボタンのカラーをレッドにしてプレビューにすると、シャレオツなボタンが登場します。

いいね~(自画自賛)

 

コメントを残す

メールアドレスが公開されることはありません。