#前回までの概要

前回は、既存の111_InputForm.cssで設定されている内容の確認と改造のためのツールの紹介まで説明しました。

これから実際に下の状態のものを改造していきましょう。

> #テキストボックスのフォント設定を変更

手始めに、テキストボックス内のフォントの設定変更して、ゲームになじむようにします。
フォントサイズを24pxに変更して、以下のようにフォント定義を追加してください。

#_111_input{
    /*位置指定*/
    position: absolute;
    /*重なり優先度*/
    z-index:999;
    /*フォントサイズ*/
    font-size: 24px;
    /*幅*/
    width : 20em;
    /*高さ*/
    height : 1.5em;
    
    /*ここからフォント定義追加*/
    font-weight:bold; 
    color: #f8f8f8;
    text-shadow: black 1px 1px 0px, black -1px 1px 0px,
                 black 1px -1px 0px, black -1px -1px 0px;
    font-family: GameFont;
  }

まず、フォントのスタイルであるfont-weightをbold(太字)に設定します。

次にテキストの色であるcolorをRGBと呼ばれる形式で指定します。
RGBって何？という方は、こちらのカラーコード一覧表のサイトなどを参照してください。

ちなみにVisial stdio codeなど、一部のエディタではのような感じで色見本がその場で見れます。
今回は白にかなり近い灰色です。

次に、text-shadowを指定して、テキストに影をつけます。
black 1px 1px 0px, black -1px 1px 0px,black 1px -1px 0px, black -1px -1px 0px; の指定で、テキストの周りを1ピクセルの黒い線で囲みます。

次に font-family (フォントの種類) をGameFontにします。
ちなみにですが、GameFontの指定はプロジェクトフォルダ内 \fonts\gamefont.css で指定されています。

@font-face {
    font-family: GameFont;
    src: url("mplus-1m-regular.ttf");
}

それでは、ここまでの状態を見てみましょう。
まだゲームっぽくないですが、文字は変わりましたね！

> #テキストボックスの定義を追加

次に、ボックス部分の設定変更して、ゲームになじむようにします。
幅を15emに変更して、以下のようにボックス定義を追加してください。

#_111_input{
    /*位置指定*/
    position: absolute;
    /*重なり優先度*/
    z-index:999;
    /*フォントサイズ*/
    font-size: 24px;
    /*幅*/
    width : 15em;
    /*高さ*/
    height : 1.5em;
    
    /*ここからフォント定義追加*/
    font-weight:bold; 
    color: #f8f8f8;
    text-shadow: black 1px 1px 0px, black -1px 1px 0px,
                 black 1px -1px 0px, black -1px -1px 0px;
    font-family: GameFont;
  
    /*ここからボックス定義追加*/
    border:none;
    outline: 0;
    background: rgba(0,0,0, 0.5);
  }

まず枠線である**border**を**none** (無し) にして、へこんでいるように見える部分を直しましょう。

次にoutlineを0して、入力中に出ているアウトラインを消しましょう。

最後は、backgroundをrgbaで指定します。
0,0,0の部分がRGBでの色指定ですが、colorと異なり10進数で指定します。
0.5の部分は透過率で、0に近づくほど透過していきます。

それでは、ここまでの状態を見てみましょう。
ここまでの指定で、かなりゲームの中でもなじむようになったと思うのですがどうでしょう？

ちなみに、borderをsolid (1本線) にして、線の太さと線の色をそれぞれ指定し、border-radius (角の丸み) を指定すると。

/*ここからボックス定義追加*/
  border:solid 3px #f8f8f8;
  border-radius:5px;
  background: rgba(0,0,0, 0.5);

ゲームのウィンドウに似た、枠線を作ることができます。

> #ボタンの定義を変更

最後にボタンを改造してみましょう。
せっかくなので、ボタンは画像を使用します。

重なり優先度のあとに、以下のようにボタン定義を追加してください。

#_111_submit{
  /*位置指定*/
  position: absolute;
  /*重なり優先度*/
  z-index:999; 

  /*ここからボタン定義追加*/
  width : 66px;
  height :66px;
  font-size: 0px;
  color: rgba(0,0,0,0);
  outline: 0;
  border:none;
  background: url(../img/sv_actors/Actor1_1.png) 0px 0px no-repeat;
}

1度説明しているものは割愛しますが、フォントを使用しないため、フォントサイズを0にして、尚且つ透明にしています。

本来は、プラグイン側でボタンのテキストを変更するのが望ましいと思いますが、ひとまずCSS側で強引に指定します。

background (背景)で画像を指定します。
*url(../img/sv_actors/Actor1_1.png)*の部分は、使用する画像を111_InputForm.cssからの相対パスで指定しています。
../img/sv_actors/Actor1_1.png の..がひとつ上の階層フォルダの指定で、プロジェクトフォルダのトップです。
/img/sv_actors/ はプロジェクトフォルダ内のサブフォルダです。
Actor1_1.png はファイル名になります。
0px 0px の指定はそれぞれ、ボタンの上と左からどれくらい離して画像を表示するかになりますが、ぴったりくっつけるのでどちらも0です。
no-repeat は画像を繰り返し表示させる(ループさせる)かの指定ですが、ループの必要はないのでno-repeatを指定してます。

完成！ちょっと可愛くないですか？

というわけで、今回はCSS改造までの記事を作ってみました。
１１１さんの許可を得ておりますので、次回はプラグイン部分を少し改造してみます。