忍者ブログ
大変古い古すぎるレビューの置場。お絵かき掲示板消失により3年ぶりに雑記に転用(2017年)。現在はノベルゲーム制作とライブ2Dがマイブーム。
ビルダーの選択肢ドロップで作れる分岐ボタン手軽だし
色も選べて便利です。
オリジナルボタンにしようとすると、画像ボタンを
つくる必要があり、素材作成にひと手間、
プラグイン借りるのもいいんだけど…

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リンクボタンの形デザインを指定しています。
-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

とスタイルシートの詳しいサイトが出てきます。
こんな感じで調べながら改造したいひとはやってみてください。



さらに268行以下
/* 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 */
の色味がそれぞれ指定されています。


このうちの1つの色味(
#feeef5の部分)をオリジナル色の組み合わせにしてしまえば
そのままビルダーのプルダウンボタンで使えました。
私はスタイルシート全然詳しくないので
色はペイントソフトで調べながらボタンのどの部分かなー
と書き出しました(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 */のプルダウンメニューからは使えません。)
デフォルトで9色あるのですがもっとボタンの色の種類を増やしたいときに有効です。

opacity: 0.8; は透明度です。
ブラウザによっては使えない記述もあるみたいなので
要検証・調べがいりますな。


CSSファイルの編集はバックアップとって
ファイル壊さないように自己責任で行ってください。

では。グッドゲーム制作ライフ!




PR

dora_samana.gifはじめに。

ここをブログというよりも
レビュー記事(というか感想)、置き場
としてつかっているので

 

カテゴリーから選択して飛んでください。→

ちなみに、文下手、変テンション
当然のごとくネタバレ
ドラマデビサマに関するレビューの目次は下に↓
!!

目次 


1.「ドラマ版デビサマの紹介。


ドラマ 真女神転生 デビルサマナー(1stシリーズ)

vol.1 「覚醒」 ・vol.2「邪気」 ・vol.3「召喚」 ・vol.4「決戦」

 各話の解説と感想があります。

ドラマ 真女神転生 デビルサマナー 閃魔降臨(2ndシリーズ)

vol.1「還ってきた男」 ・vol.2「ジャックフロストの幻影」vol,2 その2
vol.3「聖なる誘惑」  ・vol.4 「絆」

ブログ内検索
カレンダー
08 2019/09 10
S M T W T F S
1 2 3 4 5
10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30
管理人
HN:
アワラギ
自己紹介:
藤子不二雄(A&F)とアトラスが好き。
ペンタブがCOMPのサマナー勢。

HP:
管理人用
女神転生イマジンカテゴリー画像!!
女神転生IMAGINEのゲーム画像は、
○権利表記
Copyright (c) ATLUS/(c) CAVE
当サイトに掲載されている画像及び文章等の著作権は、株式会社ケイブ及び株式会社アトラスに帰属します。
無許可転載・転用を禁止します。
アクセス解析
Powered by ニンジャブログ  Designed by 穂高
Copyright © でんきみちブロgu。 All Rights Reserved
忍者ブログ / [PR]