今日は少し、具体的で技術的な話。いつかブログにまとめたいので、書く練習と壁打ちという事でここに書きます。
ティラノスクリプトには、[glink]というタグが存在します。buttonのようにクリック＆jumpできるモノでありながら、中に文字まで書ける優れもの。デフォルトで入っているglinkのデザインも良くて、そのままでも十分に活用できます。
公式リファレンス: https://tyrano.jp/sample2/code/siryou/1
個人的に好きなのは btn_03_black です。どんなUIにも馴染む。
この glink をさらにカスタマイズして、自分好みのボタンを簡単に実装する方法を説明します。
1. glink.css を見てみる
glinkに関するcssは、tyrano/css/glink.cssに書かれています。
特に重要なのは、このファイルの最初の方に書かれているコード。
.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の見た目に関する基本的なことはここで書かれています。
これ以降の行に、.black{ ~とか色々書かれていて、こちらではそれぞれのcolorごとの設定が書かれています。
つまり、これらを編集すれば、glinkに関するデザインを微調整する事ができます。
個人的には、これを直接編集するより、glink_button_custom という独自のクラスを作って、glinkを使うときに追加でクラスを付与する方が扱いやすい（公式ドキュメントを見ながら挙動の確認などするときに、混乱しづらくなる）ので、今回はそうしています。この辺はお好みだと思います。
今回は、tyrano/css/glink.cssの一番最後に、独自のクラスを追加します。
2. デフォルトのglink、余白や幅がややこしい問題
先ほどのcssを見てわかる通り、デフォルトのglinkにはmarginやpaddingが付与されています。
「glinkタグのwidthなどを設定しても思っているような幅にならない事がある」という問題は、このスタイルなどが原因です。
そこで、今回カスタマイズするglinkでは、この余白とかどうとかを取り除くことにしました。
他にもいくつか調整して、tyrano/css/glink.cssの一番最後に、以下の記述をします。
.glink_button_custom {
display: flex;
zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */
vertical-align: baseline;
margin: 0; /* 外の余白を0に */
outline: none;
cursor: pointer;
text-align: center;
text-decoration: none;
font: 14px/100% Arial, Helvetica, sans-serif;
padding: 0em; /* 内側の余白を0に */
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
-webkit-border-radius: 0.5em;
-moz-border-radius: 0.5em;
border-radius: 0.5em;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
justify-content: flex-start; /* 文字を水平方向左寄せに。中心寄せがいいならcenterを指定 */
align-items: center; /* 文字を垂直方向中央寄せに */
}
これで、下準備は整いました。
次に、さらにカスタマイズしたglinkクラスを作って拡張していきます。
3. 独自のクラス設定
.item_btn {
padding-left: 2em; /* 左に2文字分の余白を設定 */
box-sizing: border-box; /* 余白込みでの幅指定を可能にします */
}
.item_btn:hover {
color: #00b7ff; /* マウスカーソルをhoverしたときに文字色を変える */
}
今回は、item_btnという独自クラスを作りました。
ここで背景画像も指定してしまってもいいのですが、今回はglink側で書きます。
背景画像ではなくcssで背景を指定する場合は、他にも色々付け足してください。
4. あとはglinkを書くだけ
[glink name="glink_button_custom item_btn" graphic="parts/item_btn_white.png" enterimg="parts/item_btn_blue.png" storage="ほにゃら.ks" text="ほにゃら" width="560" height="48" ...（略）]
glinkタグを使い、nameに「"glink_button_custom item_btn"」のように、独自で作ったクラスを書きます。また、graphicやenterimgに背景画像のパスも追加します。幅や高さ、テキストなどはよしなに。
5. 実際の結果はこんな感じ
見た目よりずっと簡単に作れるね！
ということで、glinkをカスタマイズしつつ活用してみてください。
追記: 参考として、glinkに使っている画像を添付しておきます。この画像の著作権はMiz Graciaにあるので、無断転載・無断利用しないでください。
