Help us understand the problem. What is going on with this article?

RPGツクールMVで自由に漢字入力を行うテキストボックスをツクろう! 【CSS改造編2】

More than 3 years have passed since last update.

前回までの概要

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

これから実際に下の状態のものを改造していきましょう。
SnapCrab_NoName_2016-2-27_22-19-51_No-00.png


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

手始めに、テキストボックス内のフォントの設定変更して、ゲームになじむようにします。
フォントサイズを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-weightbold(太字)に設定します。

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

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

次に、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");
}

それでは、ここまでの状態を見てみましょう。
まだゲームっぽくないですが、文字は変わりましたね!
SnapCrab_NoName_2016-2-27_20-29-15_No-00.png


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

次に、ボックス部分の設定変更して、ゲームになじむようにします。
幅を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);
  }



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

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

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

それでは、ここまでの状態を見てみましょう。
ここまでの指定で、かなりゲームの中でもなじむようになったと思うのですがどうでしょう?
SnapCrab_NoName_2016-2-27_21-54-21_No-00.png

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

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

ゲームのウィンドウに似た、枠線を作ることができます。
SnapCrab_NoName_2016-2-27_23-43-24_No-00.png


ボタンの定義を変更

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

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

#_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を指定してます。

完成! ちょっと可愛くないですか?
SnapCrab_NoName_2016-2-27_23-29-54_No-00.png


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

fftfantt
よろしくです。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away