ビルダー用メニュー画面内のボタン位置を調整する方法の備忘録。

今回も突発で、ビルダー用メニュー画面内のボタン位置を調整する方法の備忘録行きます。

ビルダーの機能では、デフォルトのメニューが入っており、任意のメニューボタンを非表示にすることが出来ます。

その時ボタンの位置は自動で調整が入りますが、ボタン配置が偏って見えて気に入らない……という場合も。

少し偏って見える？

ビルダーの機能では細かい調整が出来ないようなので、今回はhtmlをエディタで開いて触って、直接ボタンの位置を指定してみます。

※自分はhtmlを触るのに「Visual Studio Code」という無料のソースコードエディタを使いました。

エディタDLページ↓
https://code.visualstudio.com/Download

①ビルダーにて
myproject>作品名>tyrano>html内のmenu.html
を探して、menu.htmlをエディタで開きます。

エディタで見た画面。

現在ビルダーの機能でウィンドウクローズ（テキスト枠消去）が消えている状態になります。
そして、オブジェクトのサイズだけが指定されている状態です。

以下はセーブの部分の記述です。

<div class="menu_item ">

		<a href="javascript:void(0)"><img class="menu_save" src="tyrano/images/system/menu_button_save.png" style="width: 520px;"></a>
		</div>

ここに、位置の指定を書き加えます。

②styleに「position: absolute」を入れて、「オブジェクトの位置を絶対値で指定」します。
高さはtop、横位置はleft、単位はpxでボタンの位置を指定します。

		<div class="menu_item" style="position: absolute;top: 100px;left: 0px;width: 100%;">
		<a href="javascript:void(0)"><img class="menu_save" src="tyrano/images/system/menu_button_save.png" style="width: 520px;"></a>
		</div>

今回は横位置を全て0．縦位置をそれぞれsave100px,load220px,menu_skip340px,menu_back_title460pxで指定しました。
サイズは100％です。

表示してみるとこんな感じに。

バランス良くなったでしょうか。位置の数値は好みで調整して下さい。
応用で戻るボタン等も任意の場所に移動出来ますが……今回はここまで。

ではまたしても駆け足でしたが、グッドラック！