①背景画像(必要に応じで)
②オープニング画像(必要に応じで)
③プロフィール画像(必要に応じで)
④ステータスメイン画像(必須)
⑤そうび画像(必要に応じで)
⑥とくぎ/特性画像(必要に応じで)
⑦耐性画像(必要に応じで)
⑧ステータス詳細画像(必要に応じで)
⑨アニメGIF画像(必要に応じで)
① お好きな画像を指定してください サイズは1024ｘ576でない場合は拡大・縮小して表示されます ② album.htmlを起動したときに表示される画像です モンパレスタート画面等お好みで… ③ 上記オープニング画像の次に表示される画像です モンパレプロフィール画面等お好みで… ④ この画像が指定されていないと、他が指定されていても無効となります ⑤⑥⑦ 指定されていると、タブ切り替えに対応します ※赤枠部分を切り出し表示しているので、そうびに関しては同じ画像を使いまわしできます ⑧ 指定されていると、ステータス詳細表示に対応します ⑨ モンスターの動きも再現したい時は指定してください(④画像黄枠部分のアニメGIF画像) ←クリックすると開きます一応④画像黄枠辺りでスクショしてあれば、設定で位置の微調整はできるようにしてあります 一枚一枚左上原点が違うと個別調整する必要があり大変なので、左上原点だけは同じにしておくと調整が楽になります 【具体的にどの範囲をスクショすればいいのか確認する方法(Chromeの場合)】 1.デベロッパーツールを開く（F12もしくはブラウザ右上設定より「その他のツール」-「デベロッパーツール」） 2.『Console』をクリックして、下記スクリプトを「>」のところへコピペしてEnterdocument.head.appendChild(document.createElement("style")).textContent = (function(){/* #content.mask { position: relative; } #content.mask:after { position: absolute; content: ""; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, red 99px, transparent 99px,transparent 340px, red 340px), linear-gradient(to right , red 89px, transparent 89px,transparent 462px, red 462px); } */}).toString().replace(/^.+\/\*[\r\n]+|[\r\n]+\*\/.+$/g, ""); (function(){ const mask = document.body.appendChild(document.createElement("button")); mask.textContent = "マクス"; mask.onclick = function(){ content.classList.toggle("mask"); } return "Add Mask Button"; }());3.デベロッパーツールは閉じて、画面左下に追加された『マスク』クリックでスクショ範囲外をマスクできます
⇔
この範囲でのスクショが規定値にしてあるので、うまいことこれに合わせてスクショすれば微調整なしでいけます
D:\ダウンロード |-album.html |-album.json ←この設定より生成されます |-setting.html |-背景画像.png |-オープニング画像.png |-プロフィール画像.png |-スクショ1(ステータス).png |-スクショ1(そうび).png |-スクショ1(とくぎ/特性).png |-スクショ1(耐性).png |-スクショ1(ステータス詳細).png |-スクショ1(アニメGIF).gif | ・ | ・ | ・ |-スクショ99(ステータス).png |-スクショ99(そうび).png |-スクショ99(とくぎ/特性).png |-スクショ99(耐性).png |-スクショ99(ステータス詳細).png |-スクショ99(アニメGIF).gif
エディタに簡単な使い方を記してるのでそちらも御覧ください
一応どのブラウザでも動作するかと思いますが、できればChromeでの利用をおすすめします
配置が完了したら、『設定ファイル保存』クリックしてalbum.jsonを同じフォルダに保存します
