着せ替えゲームのカスタマイズについて

みなりん堂様のmaid-systemをお借りして着せ替えゲームを作ろうと考えています。
以下の事を行いたいのですが可能でしょうか？

・アイテム名部分を画像に変更
・全体的に中央寄せ
・アイテムグループ名ごとに折りたたみ表示にする

htmlで中央寄せの指定をしてみたりしたのですが、変化がありません。
Javascriptの知識が全くなくどこをどのように変更すればいいのかわかりません。どうかお力をいただければ幸いです。

どれかひとつでも構いません。可能であれば方法をご教示いただきたいです。
どうかよろしくお願いいたします。

--追記---

ありがとうございます。

中央寄せに関しては全体を<center></center>で挟んだり以下のcssを試してみました。

css
1position: absolute;
2top: 0;
3left: 0;
4right: 0;
5bottom: 0;
6margin: auto;
7width:300px;
8height:300px;

検討違いの部分を載せてしまっていたら申し訳ありません。

html
1
2<style type="text/css">
3<!--
4* { font-size:12px; }
5body {
6    background:#FFFFFF; line-height:120%;
7}
8#guide {
9    color:#444444; padding:20px; position:absolute; left:0; top:200px; z-index:0;
10}
11#panel {
12    cursor:default; width:160px; position:absolute; top:0; z-index:2;
13}
14#imgbody { position:absolute; z-index:1; }
15#setlist { width:105px; }
16#panel p { text-align:center; }
17#panel p, #itemlist table { border:1px solid; padding:2px; margin:0 0 4px 0; }
18#itemlist { overflow:auto; }
19#itemlist table { width:100%; border-collapse:collapse; }
20#itemlist td { border-bottom:1px solid; height:20px; padding:0; margin:0; }
21#itemlist .name { width:100%; }
22#itemlist .chg input { width:12px; height:12px; padding:0; margin:2px 0; }
23
24/*==================*/
25/*  拡張パネル設定  */
26/*==================*/
27#imgarea {
28    position:absolute; left:0; top:0; z-index:0;
29    background:none;        /* ← 画像エリアに背景画像を表示する場合は「url(画像URL);」*/
30                            /*    を指定。表示しない場合は「none;」を指定              */
31}
32
33#panel-ext {
34    background:#FAF9F8; overflow-y:scroll; cursor:default; display:none;
35    position:absolute; left:0; top:0; z-index:2; width:260px;
36}
37
38#panel-ext p { padding:4px; margin:0; }
39#panel-ext .category { color:#605550; background:#D8D5CF; border:1px solid #AAA099; margin-bottom:4px; }
40#panel-ext .title { color:#524A43; background:#AAA099; font-weight:bold; }
41
42.adjust-opt { position:absolute; right:2px; }
43.adjust-opt a { color:#524A43; padding:0 2px; }
44.adjust-name { color:#6B615E; font-weight:bold; }
45.adjust-hsv, #random-make { background:#F3F2F0; padding:4px; }
46.adjust-hsv, .adjust-hsv input { width:100%; }
47.adjust-hsv td:nth-child(odd) { width:34px; }
48.adjust-hsv * { text-align:right; vertical-align:bottom; margin:0; }
49
50#panel-popup {  /* popup表示用 */
51    background:#F8F8FB; text-align:center; border-radius:12px; box-shadow:2px 2px 5px 3px rgba(86,90,96,0.5);
52    display:none; padding:16px; margin:0 auto; position:absolute; left:0; right:0; top:20%; z-index:3;
53}
54
55-->
56</style>
57</head>
58<body onload="init()">
59<script src="maid.js" type="text/javascript"></script>
60<script src="maidChrMake.js" type="text/javascript"></script>
61
62<div id="imgbody">
63<script type="text/javascript">
64<!--
65/*============*/
66/*  動作設定  */
67/*============*/
68
69panel.imgAreaWidth  = 0;  // 画像エリアの横幅ピクセル数 (0:自動設定 [デフォルト値])
70panel.imgAreaHeight = 0;  // 画像エリアの縦幅ピクセル数 (0:自動設定 [デフォルト値])
71
72img("set:1; src:face/;    group:face; adjust:face");
73img("set:1; src:base.png; ctrl:0");  // ベース画像の指定
74
75pnl("set:00,AA; ctrl:3; name:顔; group:face", [
76"chr:A; src:1.png; name:画像１",
77"chr:B; src:2.png; name:画像２",
78]);
79pnl("set:1111; ctrl:0; group:body");
80
81//-->
82</script>
83</div><!-- /#imgbody -->
84
85

javascript
1/*
2 *  Pnlオブジェクト
3 */
4function Pnl(arg, item)
5{
6	var i, n, wk, tb, s1, s2;
7
8	this.opIndex;
9	this.img = [];
10	this.src = [];
11	this.set = [];
12	this.item = item || [];
13
14	panel.param.call(this, arg);
15
16	tb = [0,1,17,15,13,11,9,7,5,3,2,4,6,8,10,12,14,16];
17	s1 = arg.set1 || "";
18	s2 = arg.set2 || "";
19	wk = [];
20
21	for (i = 0; i < this.item.length; i++) {
22		this.item[i] = parseParam(this.item[i]);
23		if (this.item[i].chr1) wk[this.item[i].chr1.charAt(0)] = i;
24	}
25
26	for (i = 0; i < s1.length; i++) this.set.push(tb[parseInt(s1.charAt(i), 18) | 0] | (wk[s2.charAt(i)] << 5));
27
28	n = this.chgIndex = this.getset(0).n;
29	wk = imgs[arg.group1] || [];
30
31	for (i = 0; i < wk.length; i++) {
32		this.src.push(wk[i][0]);
33		this.img.push(new Img(this.getsrc(i, n), wk[i][1]));
34	}
35}
36
37Pnl.prototype = {
38	getset: function(n) {
39		n = this.set[n];
40		return { v:!!(n & 1), o:(n >> 1) & 15, n:(n >>> 5) };
41	},
42
43	getsrc: function(i, n) {
44		return (this.src[i] || "") + ((this.item[n] && this.item[n].src1) || "");
45	},
46
47	eff: function(func) {
48		for (var i = 0; i < this.img.length; i++) {
49			if (effuse && ua.LE_IE8 && $("effect-on").checked) {
50				this.img[i].eff.filters.blendTrans.apply();
51				func.call(this, i);
52				this.img[i].eff.filters.blendTrans.play();
53			}
54			else {
55				func.call(this, i);
56			}
57		}
58	},
59
60	visible: function(mode) {
61		this.eff(function(i){
62			this.img[i].setVisible(mode);
63		});
64	},
65
66	opacity: function(index) {
67		this.eff(function(i){
68			this.img[i].setOpacity(maid.op[index]);
69		});
70		this.opIndex = index;
71	},
72
73	change: function(index) {
74		if (this.chgIndex == index) return;
75
76		this.eff(function(i){
77			this.img[i].change(this.getsrc(i, index));
78		});
79		this.chgIndex = index;
80	}
81};
82
83/*
84 *  パラメータ取り込み
85 */
86function img(arg, item)
87{
88	if (!ua) return;
89	arg = parseParam(arg);
90
91	var g = arg.group1 || (arg.group1 = "_" + imgno);
92
93	if (!imgs[g]) imgs[g] = [];
94	imgs[g].push([arg.src1, imgno++]);
95
96	if ("_" == g.charAt(0)) pnls.push(new Pnl(arg, item));
97}
98
99function pnl(arg, item)
100{
101	if (!ua) return;
102	pnls.push(new Pnl(parseParam(arg), item));
103}
104
105/*
106 *  パネル制御で使用する関数
107 */
108function syncImg(no, index, func)
109{
110	var i, wk, ct = 300, tmp = [], load = function(obj, n){
111		var i, wk;
112		if (obj.chgIndex == n) return;
113
114		for (i = 0; i < obj.src.length; i++) {
115			wk = tmp[tmp.push(new Image()) -1];
116			wk.onload = wk.onerror = wk.onabort = function(){ this.$ok = true; };
117			wk.src = obj.getsrc(i, n);
118		}
119	};
120
121	if (-1 == no) {
122		for (i = 0; i < pnls.length; i++) load(pnls[i], pnls[i].getset(index).n);
123	}
124	else {
125		load(pnls[no], index);
126	}
127
128	(wk = function(){
129		for (i = 0; (i < tmp.length) && (0 < ct); i++) {
130			if (!(tmp[i].complete || tmp[i].$ok)) {
131				ct--;
132				setTimeout(wk, (-1 == no) ? 200 : 100);
133				return;
134			}
135		}
136		setTimeout(func, 1);
137	})();
138}
139
140function applySet(index)
141{
142	syncImg(-1, index, function(){
143		var i, wk, rv;
144
145		effuse = 0;
146		for (i = 0; i < pnls.length; i++) {
147			wk = pnls[i];
148			rv = wk.getset(index);
149
150			wk.visible(rv.v);
151			wk.opacity(rv.o);
152			wk.change(rv.n);
153		}
154		effuse = 1;
155	});
156}
157
158/*
159 *  パネル制御処理
160 *  setTimeout(,1) はIEの表示乱れ防止のため使用
161 */
162var panel = new function() {
163	var PREF_CHK  = "chk";
164	var PREF_CHG  = "chg";
165	var PREF_NAME = "name";
166	var curNo = -1, op;
167
168	function focus(mode) {
169		var wk = $(PREF_NAME + curNo).style;
170		wk.color = maid.color[(mode) ? 0 : 2];
171		wk.backgroundColor = maid.color[(mode) ? 1 : 3];
172	}
173
174	this.param = function(arg) {
175		this.ctrl = arg.ctrl1 || 3;
176		this.name = arg.name1;
177	};
178
179	this.init = function() {
180		var i, j, wk, bf, dsp;
181
182		bf = '<table>\n';
183		for (i = 0; i < pnls.length; i++) {
184			dsp = (pnls[i].ctrl & 2) ? '' : ' style="display:none"';
185
186			bf += '<tr' + dsp + '><td><input type="checkbox" id="' + PREF_CHK + i +
187				'" onclick="panel.checkItem(' + i +
188				',this.checked)"' + ((pnls[i].ctrl & 1) ? '' : ' disabled') +
189				'></td><td class="name" id="' + PREF_NAME + i +
190				'" onmousedown="panel.selectItem(' + i +
191				')">' + (pnls[i].name || i) + '</td></tr>\n';
192
193			if ((wk = pnls[i].item).length) {
194				bf += '<tr class="chg"' + dsp + '><td>&nbsp;</td><td>\n';
195
196				for (j = 0; j < wk.length; j++) {
197					bf += '  <input type="radio" name="' + PREF_CHG + i +
198						'" id="' + (PREF_CHG + i + '-' + j) +
199						'" onclick="panel.changeItem(' + i + ',' + j +
200						')"><label for="' + (PREF_CHG + i + '-' + j) +
201						'">' + (wk[j].name1 || (i + '-' + j)) + '</label><br>\n';
202				}
203
204				bf += '</td></tr>\n';
205			}
206		}
207
208		bf += '</table>\n';
209		$("itemlist").innerHTML = bf;
210
211		for (i = 0; (wk = (i < pnls.length)) && !(pnls[i].ctrl & 2); i++);
212		curNo = (wk) ? i : 0;
213		focus(1);
214
215		op = $("oplist");
216		this.changeSet(0);
217	};
218
219	this.checkItem = function(no, mode) {
220		pnls[no].visible(mode);
221	};
222
223	this.selectItem = function(no) {
224		var ctrl = !!(pnls[no].ctrl & 1);
225
226		focus(0);
227		curNo = no;
228		focus(1);
229
230		if (ctrl) {
231			$(PREF_CHK + no).checked = true;
232			pnls[no].visible(true);
233		}
234		op.disabled = !ctrl;
235		op.selectedIndex = pnls[no].opIndex;
236	};
237
238	this.changeItem = function(no, index) {
239		syncImg(no, index, function(){
240			if (no != curNo) panel.selectItem(no);
241			pnls[no].change(index);
242		});
243	};
244
245	this.changeOp = function(index) {
246		if (-1 == curNo) return;
247		setTimeout(function(){ pnls[curNo].opacity(index); }, 1);
248	};
249
250	this.changeSet = function(index) {
251		var i, wk, rv;
252
253		if (-1 == curNo) return;
254		op.disabled = !(pnls[curNo].ctrl & 1);
255		op.selectedIndex = pnls[curNo].getset(index).o;
256
257		for (i = 0; i < pnls.length; i++) {
258			wk = pnls[i];
259			rv = wk.getset(index);
260
261			if (wk.item.length) $(PREF_CHG + i + '-' + rv.n).checked = true;
262			$(PREF_CHK + i).checked = rv.v;
263		}
264
265		applySet(index);
266	};
267};
268
269var changeOp  = panel.changeOp;
270var changeSet = panel.changeSet;
271

HTMLとCSSの知識は、コードを調べながら簡単なホームページを作れる程度です。

どうかよろしくお願いいたします。

defghi1977

2018/04/06 03:47

https://teratail.com/help/avoid-asking

m.ts10806

2018/04/06 03:48

まずは自身が試されたソースコードをご提示し、調べたことややってみたことを具体的に追記してください。

Lhankor_Mhy

2018/04/06 04:12

「Javascriptの知識が全くなく」とのことですが、HTMLとCSSについてはどの程度習熟されていますか？

行動規範の内容に同意します

回答1件

ベストアンサー

全体的に中央寄せ

CSS
1body {
2	display: flex;
3	justify-content: center;
4}
5#imgbody {
6	position: relative;
7}
8#panel {
9	position: static;
10}

　

残りの二つは、javascriptが書けないと難しいと思いました。

投稿2018/04/06 10:53

Lhankor_Mhy

総合スコア37445

knl

2018/04/09 10:36

お礼が大変遅くなってしまって申し訳ありません。ご丁寧にありがとうございました！少しずつJavaScriptの知識もみにつけていきたいと思います。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.31%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

着せ替えゲームのカスタマイズについて

全体的に中央寄せ

関連した質問