memoスマートフォン用の表示で見るmemoゲーム制作やデザインについての個人的メモこの広告は、90日以上更新していないブログに表示しています。2017-03-20【ティラノスクリプト】ダイアログのデザインを変更したいティラノスクリプト========================================ver4.57でダイアログがalertifyからremodalに変更されました。最新版には対応していない内容の記事になります。========================================[dialog]タグや[close]タグを使用したときに出てくるアラート・ダイアログの見た目を変更してみようというお話です。標準のままでも十分シンプルでわかりやすいのですが、ゲームの雰囲気によってはデザインを変えたい場合もあると思います。CSSってあんまりいじったことないし、難しそう......という方向けに、各プロパティを自分なりにかみ砕いて説明します。CSSの知識としては不十分だったり違う意味だったりする場合もありますのでご了承ください。サンプルに使用するコードはこちらです。target="*ok_label"]編集するファイルは【tyrano/libs/alertify/alertify.default.css】です。このファイルの中身をいじることでダイアログのデザインを変更することができます。上から順番に説明していきます。sans-serif;}フォントの設定です。sans-serifの部分がフォント名を書くところです。このままだと漢字が明朝体、ひらがながゴシック体のような、少し読みにくいフォントになっているかと思います。ここはあまり深く考えずに、ゲームの本文と同じフォントにしたい場合はConfig.jsのuserFaceと同じフォント名にしてください(デフォルトは「メイリオ」)。*/}ダイアログ全体の設定です。要素が多いのでそれぞれ説明します。#FFF;ダイアログの背景色の設定です。#FFFはカラーコードで白を表します。「カラーコード」等で検索すると色のカラーコードを調べることができます。背景画像を表示させることも可能です。rgba(0,0,0,.7);ダイアログの周囲の枠線の設定です。上はrgba(透明度を設定できる色指定の方法)に対応していないブラウザ向けの表記です。環境では下の設定が適用されていると思います。色」の設定を書いています。デフォルトでは「10pxの太さの黒い一本線を0.7の透明度で表示する」という設定になっています。8px;枠線の角丸設定です。複数の数値を指定することで上下左右個別に設定できます。rgba(0,0,0,.3);ダイアログのボックスの影の設定です。色」の設定を書いています。*/背景の適用範囲の設定です。上2つはプロパティの前にベンダープレフィックスと呼ばれるものがついていますが、これは先行実装された機能を使用するときに付ける識別子です。気にしなくて大丈夫です。値を変更する場合は3つとも同じように変更しておけば問題ないでしょう。※追記:2017年現在、background-clipのベンダープレフィックスは不要です。上2つは消してしまっても大丈夫です。(教えてもらった)適用範囲というのがちょっとわかりにくいのですが、実際の使用例を見てもらった方がはやいです。左がbackground-clipを「padding-box」に設定したもの、右が「border-box」に設定したものです。わかりやすいように背景色を半透明の赤、枠線の色を半透明の青にしています。border-boxの方は背景色がボーダーにまで適用されて紫色になっているのがわかると思います。4px;}テキストを入力する部分の設定です。borderとborder-radiusは先程と同じ使い方なので説明を省略します。paddingは内側の余白の設定です。複数の数値を設定すると上下左右個別に設定できます。rgba(255,255,255,0));}ボタンの設定です。説明していないプロパティを紹介します。#FFF;文字色の設定です。デフォルトは#FFF(白)です。bold;フォントのウェイト(太さ)の設定です。デフォルトはbold(太字)です。none;文字の上下に線をつけたり打消し線をつけたりできます。デフォルトはnone(装飾なし)です。変更することはないかもしれません。rgba(0,0,0,.5);文字の影の設定です。色」の設定を書いています。デフォルトでは半透明の黒い影が右下についています。rgba(255,255,255,.5);先ほど出てきたbox-shadowとの違いは「inset」です。これを指定すると影が内側につくようになります。ここでなにをしているのかというと、ボタンの上部にある白い光沢を表現し、ボタンに立体感を出しています。rgba(255,255,255,0));ここではグラデーションの設定をしています。白~透明のグラデーションを上から下にうっすらかけることで、ボタンに立体感を出しています。※追記:2017年現在、linear-gradientのベンダープレフィックスは不要です。上4つは消してしまっても大丈夫です。(教えてもらった)linear-gradient()-CSS3リファレンス試しに「rgba(255,255,255,.9)」にしてみるとグラデーションのかかり方がよくわかります。rgba(0,0,0,0));}ボタンにカーソルを合わせたとき(ホバー時)と、ボタンにフォーカスがあたっているときの設定です。none;アウトラインのスタイルの設定です。変更することはおそらくないでしょう。rgba(0,0,0,0));}先程とは逆に黒~透明のグラデーションを上から下にうっすらかけることで、ボタンがへこんだような状態を表現しています。#2B72D5;}フォーカス時にボタンの周りに表示される枠の設定です。デフォルトは青っぽい色です。rgba(0,0,0,.05);}ボタンをクリックした時(アクティブ時)の設定です。positionは変更することはないでしょう。box-shadowでボタンの光沢部分を今度は黒色にして、押されたボタンを表現しています。#3B7808;}Cancelボタン、OKボタンの設定です。background-colorでボタンの色を、borderでボタンの枠線を指定しています。デフォルトでは通常時もホバー時も同じ色(グラデーションの変化のみ)ですが、別に設定してまったく違う色にすることも可能です。rgba(92,184,17,.9);}この部分はダイアログの設定ではなく、alertify.jsの機能のひとつ「ログ表示」のデザイン設定です。ティラノスクリプトでは(たしか)使われていなかったので、ここはまったく編集しなくても問題ありません。***とりあえずここまででいったん終了です。alertify.core.cssの方は表示するときの動きやボックス自体のサイズや位置の設定が書かれているので、余裕があればそっちも見ていきたいです。見た目だけならalertify.default.cssの変更だけで十分じゃないかな~と思ってますが。なにか不明な点とか間違ってる箇所とかあればお気軽にお知らせくださいー。自分でいろいろ調べてみるのも大事だし楽しいですが、誰かに気軽に聞けるっていうのも大事だと思います。答えるほうも勉強になるし。21:39【ティラノスクリプト】ダイアログのデザインを変更したいTweet広告を非表示にする関連記事2018-02-15【ティラノスクリプト】ローディング画面をつくる(プログレスバー付き)これをつくります(説明投げた)。プリロードやらなにやらのや...2017-11-23【ティラノスクリプト?】プレイヤーに背景色や背景画像を変更してもらうティラノスクリプトというか、HTML5とjQueryの話です。先日更新...2017-06-05【ティラノスクリプト】マウスカーソルが載ったときに何かするティラノスクリプトというかjQeryの話です。コメ...2017-05-13【ティラノスクリプト】着せ替えテーマプラグインこんな感じのシステムデザインに着せ替えできます。【ティラノスクリプト】ローディング画面をつくる(プログレスバー付き)【ティラノスクリプト】Meryでラベルの位置に移動する【ティラノスクリプト】画像ファイルを一括で取得するバッチファイル(Windows専用)【ティラノスクリプト】一定時間マウス操作がない場合にカーソルを非表示にする【ティラノスクリプト?】プレイヤーに背景色や背景画像を変更してもらう月別アーカイブはてなブログをはじめよう!onigirimgmgさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。