Gリンクボタンをちょっとオリジナルデザインにする方法。
色も選べて便利です。
オリジナルボタンにしようとすると、画像ボタンを
つくる必要があり、素材作成にひと手間、
プラグイン借りるのもいいんだけど…
Gリンクボタンのデザインが自分でいじれたらなぁ…と
調べてみました。
ティラノビルダーで
Gリンクボタンのデザインを変える！方法。
みつけたので、時間空けると忘れそうなので、メモしときます。
Gリンクボタンのデザインは
マイプロジェクト＞tyrano> tyrano.css
の中に記述されています。
CSS…つまりカスケードスタイルシートドキュメント！
ホームページとかのデザインを一括でやれるあれだ。
tyrano.cssをテキストエディタで開くと
195行目あたりぐらいから
/* button
---------------------------------------------- */
.glink_button {
display: inline-block;
zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */
*display: inline;
vertical-align: baseline;
margin: 0 2px;
outline: none;
cursor: pointer;
text-align: center;
text-decoration: none;
font: 14px/100% Arial, Helvetica, sans-serif;
padding: .5em 2em .55em;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.glink_button:hover {
text-decoration: none;
}
.glink_button:active {
position: relative;
top: 1px;
}
という記述があります。
Gリンクボタンの形デザインを指定しています。
この文字列をコピーしてググると
https://developer.mozilla.org/ja/docs/Web/CSS/border-radius
https://www.webcreatorbox.com/tech/border-radius
とスタイルシートの詳しいサイトが出てきます。
こんな感じで調べながら改造したいひとはやってみてください。
さらに２６８行以下
Gリンクボタンの形デザインを指定しています。
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
の数字を変えるとボタンの角の丸みなんかが変えられます。この文字列をコピーしてググると
https://developer.mozilla.org/ja/docs/Web/CSS/border-radius
https://www.webcreatorbox.com/tech/border-radius
とスタイルシートの詳しいサイトが出てきます。
こんな感じで調べながら改造したいひとはやってみてください。
さらに２６８行以下
/* color styles
---------------------------------------------- */
/* black */
.black {
color: #d7d7d7;
border: solid 1px #333;
background: #333;
background: -webkit-gradient(linear, left top, left bottom, from(#666), to(#000));
background: -moz-linear-gradient(top, #666, #000);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#666666', endColorstr='#000000');
}
.black:hover {
background: #000;
background: -webkit-gradient(linear, left top, left bottom, from(#444), to(#000));
background: -moz-linear-gradient(top, #444, #000);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#000000');
}
.black:active {
color: #666;
background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#444));
background: -moz-linear-gradient(top, #000, #444);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#666666');
}
という記述があり
/* black */ /* gray */ /* white */ /* orange */
/* red */ /* blue */ /* rosy */ /* green */ /* pink */
/* black */ /* gray */ /* white */ /* orange */
/* red */ /* blue */ /* rosy */ /* green */ /* pink */
の色味がそれぞれ指定されています。
このうちの1つの色味(#feeef5の部分)をオリジナル色の組み合わせにしてしまえば
そのままビルダーのプルダウンボタンで使えました。
このうちの1つの色味(#feeef5の部分)をオリジナル色の組み合わせにしてしまえば
そのままビルダーのプルダウンボタンで使えました。
私はスタイルシート全然詳しくないので
色はペイントソフトで調べながらボタンのどの部分かなー
と書き出しました（THE力業）
画像と下の記述みくらべてみて
色はペイントソフトで調べながらボタンのどの部分かなー
と書き出しました（THE力業）
画像と下の記述みくらべてみて
/* pink */
.pink {
color: #feeef5; ←文字の色
border: solid 1px #d2729e;
background: #f895c2;
background: -webkit-gradient(linear, left top, left bottom, from(#feb1d3), to(#f171ab));
background: -moz-linear-gradient(top, #feb1d3, #f171ab);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#feb1d3', endColorstr='#f171ab');
}
.pink:hover {
background: #d57ea5;
background: -webkit-gradient(linear, left top, left bottom, from(#f4aacb), to(#e86ca4));
background: -moz-linear-gradient(top, #f4aacb, #e86ca4);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f4aacb', endColorstr='#e86ca4');
}
.pink:active {
color: #f3c3d9;
background: -webkit-gradient(linear, left top, left bottom, from(#f171ab), to(#feb1d3));
background: -moz-linear-gradient(top, #f171ab, #feb1d3);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f171ab', endColorstr='#feb1d3');
}
そもそもこんなに、細かくたくさんのボタンデザインが用意されている
ティラノ…すごいですわ…。
ここの記述をスタイルシートボタンデザインとか検索した
サイト様のものを参考に改造してしまえば、きっといろいろできます。
あと、ピンクの行の下にオリジナルのボタンデザインの記述も書き足すこともできます。
ティラノ…すごいですわ…。
ここの記述をスタイルシートボタンデザインとか検索した
サイト様のものを参考に改造してしまえば、きっといろいろできます。
あと、ピンクの行の下にオリジナルのボタンデザインの記述も書き足すこともできます。
/* orijinal */
.oriji {
color: #CFFAFF;
border: none;
background: #235ED8;
background: -webkit-gradient(linear, left top, left bottom, from(#2875AE), to(#2875AE));
background: -moz-linear-gradient(top, #B1F6FE, #B1F6FE);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3756BB', endColorstr='#3756BBb');
opacity: 0.8;
}
.oriji:hover {
background: #29498B;
background: -webkit-gradient(linear, left top, left bottom, from(#1D557D), to(#1D557D));
background: -moz-linear-gradient(top, #B1F6FE, #B1F6FE);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1D557D', endColorstr='#1D557D');
}
.oriji:active {
color: #68D6FC;
background: -webkit-gradient(linear, left top, left bottom, from(#2875AE), to(#2875AE));
background: -moz-linear-gradient(top, #B1F6FEb, #B1F6FE);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2875AE', endColorstr='#2875AE');
}
これで[glink color="oriji " storage="scene1.ks" size="20" target="*tes" text="テスト" x="603" y="156" width="" height="" _clickable_img="" ]
とスクリプト直記入でオリジナルボタンも使うことができます。
（/* black */ ～ /* pink */のプルダウンメニューからは使えません。）
（/* black */ ～ /* pink */のプルダウンメニューからは使えません。）
デフォルトで9色あるのですがもっとボタンの色の種類を増やしたいときに有効です。
opacity: 0.8; は透明度です。
ブラウザによっては使えない記述もあるみたいなので
要検証・調べがいりますな。
CSSファイルの編集はバックアップとって
ファイル壊さないように自己責任で行ってください。
では。グッドゲーム制作ライフ！
opacity: 0.8; は透明度です。
ブラウザによっては使えない記述もあるみたいなので
要検証・調べがいりますな。
CSSファイルの編集はバックアップとって
ファイル壊さないように自己責任で行ってください。
では。グッドゲーム制作ライフ！
PR