[glink]タグの見た目を変える
[glink]タグデフォルトのあのグラデの入った黒いボタン、あれをもうちょっとシャレオツな感じに変えます。
[glink]のスタイルの指定は、「tyrano/tyrano.css」に書かれています。
210行目くらいからが[glink]タグで表示されるボタンのスタイルです。
.glink_button {
...
この中が通常時のスタイル
...
}
.glink_button:hover {
...
この中がマウスカーソルをボタン上に乗せたときのスタイル
...
}
.glink_button:active {
...
この中がボタンをクリックしたときのスタイル
...
}
各要素ごとにどんなプロパティにどんな値が指定されているとどういう表示になるのかは、開発者ツール（DevTools）を使うと簡単に調べられます。
ティラノスタジオでゲームをデバッグしているのなら、「デバッグを表示する」にチェックを入れてゲームを再生すると開発者ツールのウィンドウが表示されます。
ティラノスタジオでゲームをデバッグしているのなら、「デバッグを表示する」にチェックを入れてゲームを再生すると開発者ツールのウィンドウが表示されます。
画像の右側に表示されているのが開発者ツールです。
赤丸で囲った部分（Elementsタブ）を見ていきます。
赤丸で囲った部分をクリックします。
クリックした部分が青くなっているときに、ゲーム画面内のボタン画像にマウスカーソルを乗せると、開発者ツール内のHTMLウィンドウから、マウスカーソルを乗せた部分の要素がハイライト表示されます。
そのままクリックすると、クリックした部分の要素がHTMLウィンドウ内で選択された状態になります。
そのままクリックすると、クリックした部分の要素がHTMLウィンドウ内で選択された状態になります。
HTMLウィンドウの下側に、選択された要素に適用されているスタイルが表示されています。
適用されているスタイルの左側にあるチェックボックス（スタイル欄にマウスカーソルを乗せると表示されます）のチェックを外すと、そのスタイルが適用されなくなります。
画像では、「position: absolute;（要素を固定位置に表示）」のスタイルが外れたため、ボタン画像の位置が変わっています。
画像では、「position: absolute;（要素を固定位置に表示）」のスタイルが外れたため、ボタン画像の位置が変わっています。
適用されているスタイルの値の部分をクリックすることで、値を変更することもできます。
画像では、「left: 100px」を「left: 300px」に変更しています。ボタンの横位置が変わっているのがわかります。
画像では、「left: 100px」を「left: 300px」に変更しています。ボタンの横位置が変わっているのがわかります。
新しく別のプロパティを追加したいときは、スタイル欄の空白部分（一番下のプロパティのやや下あたり）をクリックします。
画像赤線のように、カーソルが表示されます。
画像赤線のように、カーソルが表示されます。
ボーダー（枠線）のプロパティを追加しました。ゲーム画面にも反映されています。
注意点として、プロパティの名前や値の書き方が間違っていると、スタイルは反映されません。
画像では、指定したプロパティの値が間違っているため（solid→solido）、プロパティに取り消し線が惹かれ、ボーダーが表示されていません。
画像では、指定したプロパティの値が間違っているため（solid→solido）、プロパティに取り消し線が惹かれ、ボーダーが表示されていません。
ティラノスタジオの開発者ツール上でスタイルを試す→tyrano.cssを書き換える、という手順でスタイルを変更すると、効率的に変更できます。
 |
価格:1,980円
(2020/2/11 16:39時点) |
 |
価格:3,080円
(2020/2/11 16:43時点) |
