ティラノビルダーの分岐ボタンデザインを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のプロパティ({}で囲まれてる部分)を書き換えました。(ちょっと意味がわからないよって方は上のコードを全コピして、文章たちの一番下にペーストしてください)

     

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

いいね~(自画自賛)

 

コメントを残す

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