ステータス
次はこのステータス部分を作る
![男子C](https://sazano123.com/wp-content/uploads/2021/04/1_144-300x300.png)
![](https://sazano123.com/wp-content/uploads/2023/10/image-50-3-1024x538.webp)
コンテナを作る
まず、基本のベースは
「コンテナ」で作る
![男子C](https://sazano123.com/wp-content/uploads/2021/04/1_144-300x300.png)
![男子D](https://sazano123.com/wp-content/uploads/2021/10/名称未設定のデザイン-99.png)
分かった
「+」を押すね
![](https://sazano123.com/wp-content/uploads/2023/10/image-51-3-1024x538.webp)
![男子D](https://sazano123.com/wp-content/uploads/2021/10/名称未設定のデザイン-99.png)
メニューが出たよ
OK、なら
コンテナを選択して
![男子C](https://sazano123.com/wp-content/uploads/2021/04/2_144-1-300x300.png)
![](https://sazano123.com/wp-content/uploads/2023/10/image-52-3-1024x538.webp)
![男子D](https://sazano123.com/wp-content/uploads/2021/10/名称未設定のデザイン-99.png)
コンテナを選択するよ
–
![男子D](https://sazano123.com/wp-content/uploads/2021/10/名称未設定のデザイン-99.png)
コンテナが出て来た
![](https://sazano123.com/wp-content/uploads/2023/10/image-53-3-1024x538.webp)
コンテナを分ける
次に、コンテナを
分ける作業だ
![男子C](https://sazano123.com/wp-content/uploads/2021/04/2_144-1-300x300.png)
![男子D](https://sazano123.com/wp-content/uploads/2021/10/名称未設定のデザイン-99.png)
分ける?
STRとか、DEXごとに
枠を作る感覚
![男子C](https://sazano123.com/wp-content/uploads/2021/04/1_144-300x300.png)
![男子D](https://sazano123.com/wp-content/uploads/2021/10/名称未設定のデザイン-99.png)
了解
まず、コンテナを
クリックしてると出てくる
「1×1」を押して欲しい
![男子C](https://sazano123.com/wp-content/uploads/2021/04/2_144-1-300x300.png)
![](https://sazano123.com/wp-content/uploads/2023/10/image-55-3-1024x538.webp)
![男子D](https://sazano123.com/wp-content/uploads/2021/10/名称未設定のデザイン-99.png)
クリックしたら、
どの分割か?を聞かれた
そうしたら、
「その他」をクリックで
![男子C](https://sazano123.com/wp-content/uploads/2021/04/2_144-1-300x300.png)
![男子D](https://sazano123.com/wp-content/uploads/2021/10/名称未設定のデザイン-99.png)
押すよ
![](https://sazano123.com/wp-content/uploads/2023/10/image-56-3-1024x538.webp)
![男子D](https://sazano123.com/wp-content/uploads/2021/10/名称未設定のデザイン-99.png)
列と行を
入力する場所になった
列が8、行は2にして
「適用する」をクリックして欲しい
![男子C](https://sazano123.com/wp-content/uploads/2021/04/1_144-300x300.png)
![男子D](https://sazano123.com/wp-content/uploads/2021/10/名称未設定のデザイン-99.png)
分かった
![](https://sazano123.com/wp-content/uploads/2023/10/image-57-3-1024x538.webp)
![男子D](https://sazano123.com/wp-content/uploads/2021/10/名称未設定のデザイン-99.png)
これでいいかな?
![](https://sazano123.com/wp-content/uploads/2023/10/image-58-3-1024x538.webp)
OKOK、かなり良い感じ!
![男子C](https://sazano123.com/wp-content/uploads/2021/04/2_144-1-300x300.png)
–
コンテナを微調整する
その後、
高さ100、横650にして
右側に置いて欲しい
![男子C](https://sazano123.com/wp-content/uploads/2021/04/1_144-300x300.png)
これも全部
任せられそうだし
・・・頼んだ
![男子C](https://sazano123.com/wp-content/uploads/2021/04/2_144-1-300x300.png)
![男子D](https://sazano123.com/wp-content/uploads/2021/10/名称未設定のデザイン-99.png)
分かった、変更するよ
![](https://sazano123.com/wp-content/uploads/2023/10/image-59-3-1024x538.webp)
![男子D](https://sazano123.com/wp-content/uploads/2021/10/名称未設定のデザイン-99.png)
まずは
サイズを変更する
![](https://sazano123.com/wp-content/uploads/2023/10/image-60-3-1024x538.webp)
![男子D](https://sazano123.com/wp-content/uploads/2021/10/名称未設定のデザイン-99.png)
それから、
右の方に移動させる
![](https://sazano123.com/wp-content/uploads/2023/10/image-62-3-1024x538.webp)
ステータスタイトル
次に、ここ
![男子C](https://sazano123.com/wp-content/uploads/2021/04/1_144-300x300.png)
![](https://sazano123.com/wp-content/uploads/2023/10/image-63-3-1024x538.webp)
このステータスの
文字部分だ
![男子C](https://sazano123.com/wp-content/uploads/2021/04/1_144-300x300.png)
![男子D](https://sazano123.com/wp-content/uploads/2021/10/名称未設定のデザイン-99.png)
紐付けずに、
文字を入力すれば良い?
そうだが、
紐づけを切る方法が
面倒だから
飛ばさずにやろうと思う
![男子C](https://sazano123.com/wp-content/uploads/2021/04/6_144-3-300x300.png)
テキストの挿入
![男子D](https://sazano123.com/wp-content/uploads/2021/10/名称未設定のデザイン-99.png)
まず「+」を押す?
それ言えば9割当たると
思ってるだろ
![男子C](https://sazano123.com/wp-content/uploads/2021/04/5_144-1-300x300.png)
![男子D](https://sazano123.com/wp-content/uploads/2021/10/名称未設定のデザイン-99.png)
思ってる
まあ正解なんだけどな
![男子C](https://sazano123.com/wp-content/uploads/2021/04/5_144-1-300x300.png)
![](https://sazano123.com/wp-content/uploads/2023/10/image-64-2-1024x538.webp)
テキスト押せばいいのも、
分かるな?
![男子C](https://sazano123.com/wp-content/uploads/2021/04/6_144-3-300x300.png)
![男子D](https://sazano123.com/wp-content/uploads/2021/10/名称未設定のデザイン-99.png)
うん、何度もやって
そこそこ覚えた
![](https://sazano123.com/wp-content/uploads/2023/10/image-65-2-1024x538.webp)
![男子D](https://sazano123.com/wp-content/uploads/2021/10/名称未設定のデザイン-99.png)
文字と
紐づけのメニューが出ているよ
![](https://sazano123.com/wp-content/uploads/2023/10/image-66-3-1024x538.webp)
テキストのデータセットを外す(紐づけを外す)
OK、それなら
データセットを選択を
クリックして
![男子C](https://sazano123.com/wp-content/uploads/2021/04/2_144-1-300x300.png)
![男子D](https://sazano123.com/wp-content/uploads/2021/10/名称未設定のデザイン-99.png)
これだね、
押すよ
![](https://sazano123.com/wp-content/uploads/2023/10/image-67-3-1024x538.webp)
それ押したら、
「接続されていません」を
クリックで
![男子C](https://sazano123.com/wp-content/uploads/2021/04/2_144-1-300x300.png)
![](https://sazano123.com/wp-content/uploads/2023/10/image-68-3-1024x538.webp)
![男子D](https://sazano123.com/wp-content/uploads/2021/10/名称未設定のデザイン-99.png)
押したら、
接続が解除されたみたい
![](https://sazano123.com/wp-content/uploads/2023/10/image-69-3-1024x538.webp)
テキストを編集する
それが終わると、
テキストが自由に
編集できる
![男子C](https://sazano123.com/wp-content/uploads/2021/04/2_144-1-300x300.png)
![男子D](https://sazano123.com/wp-content/uploads/2021/10/名称未設定のデザイン-99.png)
ここにSTR…とか
書けばいい?
頼んだ
![男子C](https://sazano123.com/wp-content/uploads/2021/04/2_144-1-300x300.png)
![](https://sazano123.com/wp-content/uploads/2023/10/image-70-2-1024x538.webp)
![男子D](https://sazano123.com/wp-content/uploads/2021/10/名称未設定のデザイン-99.png)
出来た。
![](https://sazano123.com/wp-content/uploads/2023/10/image-71-3-1024x538.webp)
完璧!
![男子C](https://sazano123.com/wp-content/uploads/2021/04/2_144-1-300x300.png)
文字サイズや場所の調整(ほぼ省略)
あとは
細かい修正をする
![男子C](https://sazano123.com/wp-content/uploads/2021/04/1_144-300x300.png)
![男子D](https://sazano123.com/wp-content/uploads/2021/10/名称未設定のデザイン-99.png)
文字を小さくして、
箱の中に収めれば良い?
やる事としては
そんな感じだ
![男子C](https://sazano123.com/wp-content/uploads/2021/04/2_144-1-300x300.png)
・・・数分後
![男子D](https://sazano123.com/wp-content/uploads/2021/10/名称未設定のデザイン-99.png)
こんな感じかな?
![](https://sazano123.com/wp-content/uploads/2023/10/image-73-3-1024x538.webp)
OK!
綺麗に整っている
![男子C](https://sazano123.com/wp-content/uploads/2021/04/2_144-1-300x300.png)
![男子D](https://sazano123.com/wp-content/uploads/2021/07/3.png)
カットされているけど、
これ数テイク目だし、
何なら中央揃えのボタンを
先に教えろって感じだった
![](https://sazano123.com/wp-content/uploads/2023/10/image-3-6-1024x538.webp)
カットしたのに、言ったな…?
![男子C](https://sazano123.com/wp-content/uploads/2021/04/5_144-1-300x300.png)
他ステータスも入力する(これも省略)
あとは、他ステータスも
同じ要領で入力して欲しい
![男子C](https://sazano123.com/wp-content/uploads/2021/04/1_144-300x300.png)
![男子D](https://sazano123.com/wp-content/uploads/2021/10/名称未設定のデザイン-99.png)
コピー貼り付け、でも良い?
それでもOK!
![男子C](https://sazano123.com/wp-content/uploads/2021/04/1_144-300x300.png)
・・・
![男子D](https://sazano123.com/wp-content/uploads/2021/10/名称未設定のデザイン-99.png)
こんな感じで出来た
![](https://sazano123.com/wp-content/uploads/2023/10/image-74-2-1024x538.webp)
ステータスの値
残ったステータスの値、だな
![男子C](https://sazano123.com/wp-content/uploads/2021/04/1_144-300x300.png)
![](https://sazano123.com/wp-content/uploads/2023/10/image-75-2-1024x538.webp)
さっき紐づけなしの
テキストやったから
・・・…念の為に、やるか?
![男子C](https://sazano123.com/wp-content/uploads/2021/04/5_144-1-300x300.png)
![男子D](https://sazano123.com/wp-content/uploads/2021/10/名称未設定のデザイン-99.png)
なら、テキストを
出した状態からやるよ
テキストとデータを紐づける
![男子D](https://sazano123.com/wp-content/uploads/2021/10/名称未設定のデザイン-99.png)
テキストを出すと、
紐づけメニューが出てきている
–
![男子D](https://sazano123.com/wp-content/uploads/2021/10/名称未設定のデザイン-99.png)
テキストの接続先を
クリックする
![](https://sazano123.com/wp-content/uploads/2023/10/image-76-2-1024x538.webp)
![男子D](https://sazano123.com/wp-content/uploads/2021/10/名称未設定のデザイン-99.png)
STR(数字)を
クリックする
![](https://sazano123.com/wp-content/uploads/2023/10/image-77-1-1024x538.webp)
![男子D](https://sazano123.com/wp-content/uploads/2021/10/名称未設定のデザイン-99.png)
これで紐づけは完了
![](https://sazano123.com/wp-content/uploads/2023/10/image-78-2-1024x538.webp)
文字の微調整
![男子D](https://sazano123.com/wp-content/uploads/2021/10/名称未設定のデザイン-99.png)
あとは
文字の微調整すればいい?
そうだな
![男子C](https://sazano123.com/wp-content/uploads/2021/04/1_144-300x300.png)
–
見本だと、
フォントのサイズは
18~25にしている
![男子C](https://sazano123.com/wp-content/uploads/2021/04/2_144-1-300x300.png)
![](https://sazano123.com/wp-content/uploads/2023/10/image-81-1-1024x538.webp)
![男子D](https://sazano123.com/wp-content/uploads/2021/10/名称未設定のデザイン-99.png)
あとは明朝体にしてる?
困ったら
何でも明朝
![男子C](https://sazano123.com/wp-content/uploads/2021/04/1_144-300x300.png)
![](https://sazano123.com/wp-content/uploads/2023/10/image-82-1-1024x538.webp)
![男子D](https://sazano123.com/wp-content/uploads/2021/10/名称未設定のデザイン-99.png)
できた。
こんな感じかな
![](https://sazano123.com/wp-content/uploads/2023/10/image-79-2-1024x538.webp)
OK!
違和感なくて綺麗に見える
![男子C](https://sazano123.com/wp-content/uploads/2021/04/2_144-1-300x300.png)
CON~EDUまで同じことをする
あとは、
値を繰り返し
入れていく作業だな
![男子C](https://sazano123.com/wp-content/uploads/2021/04/1_144-300x300.png)
![男子D](https://sazano123.com/wp-content/uploads/2021/10/名称未設定のデザイン-99.png)
ぱっと出来ないの?
紐づけはそれぞれにやるから
全部手作業だな?
![男子C](https://sazano123.com/wp-content/uploads/2021/04/6_144-3-300x300.png)
・・・
![男子D](https://sazano123.com/wp-content/uploads/2021/10/名称未設定のデザイン-99.png)
これを何度か
繰り返したものがこれ
![](https://sazano123.com/wp-content/uploads/2023/10/image-80-1-1024x538.webp)
これでステータスは終了
![男子C](https://sazano123.com/wp-content/uploads/2021/04/2_144-1-300x300.png)
関連記事
-
エディタXを使って探索者まとめサイトやキャラクターまとめサイトを作る。WixSTUDIO、テンプレートを使って探索者まとめサイトやキャラクターまとめサイトを作る① 新規登録編&データベース作成 前編 エディタXの登録方法、CMSとは、CMSの追加方法、コレクションの作成、データベースのフィールド追加、データベースに画像を追加する方法 Editor X
-
エディターXを使って探索者まとめサイトやキャラクターまとめサイトを作る。WixSTUDIO、テンプレートを使って探索者まとめサイトやキャラクターまとめサイトを作る② データベース作成 後編 データベースにステータスや年齢等の数字を入れる方法、タグ付けのやり方、リッチテキストの追加し方、アイテムの増やし方、段落の増やし方、データベースのバックアップの取り方、Editor X
-
エディターXを使って探索者まとめサイトやキャラクターまとめサイトを作る。WixSTUDIO、テンプレートを使って探索者まとめサイトやキャラクターまとめサイトを作る③ トップページ作成前編 要素追加のやり方、ワイヤーフレームのリピーターの付け方、テンプレートの編集し方、余白の変更し方、プレビューのやり方、Editor X
-
エディターXを使って探索者まとめサイトやキャラクターまとめサイトを作る。WixSTUDIO、テンプレートを使って探索者まとめサイトやキャラクターまとめサイトを作る④ トップページ作成後編、データセットの作成し方、コレクションの選択し方、要素とデータのセットし方、テキストの編集し方、フォントの変更し方、プレビューのやり方、Editor X
-
エディターXを使って探索者まとめサイトやキャラクターまとめサイトを作る。WixSTUDIO、テンプレートを使って探索者まとめサイトやキャラクターまとめサイトを作る⑤ トップページの装飾前編 背景画像を付ける 画像を不透明にするやり方 レイヤーの使い方等、Editor X
-
エディターXを使って探索者まとめサイトやキャラクターまとめサイトを作る。WixSTUDIO、テンプレートを使って探索者まとめサイトやキャラクターまとめサイトを作る⑥ トップページの装飾後編 Unsplashの使い方、アニメーションの付け方等 Editor X
-
エディターXを使って探索者まとめサイトやキャラクターまとめサイトを作る。WixSTUDIO、テンプレートを使って探索者まとめサイトやキャラクターまとめサイトを作る⑦ 動的ページの作り方&動的ページの大枠を作る前編 ページの追加し方、コンテナの追加し方、レイヤーの使い方 Editor X
-
エディターXを使って探索者まとめサイトやキャラクターまとめサイトを作る。WixSTUDIO、テンプレートを使って探索者まとめサイトやキャラクターまとめサイトを作る⑧ 動的ページの大枠を作る後編 コンテナの作り方、コンテナの長さや高さの調整し方 Editor X
-
エディターXを使って探索者まとめサイトやキャラクターまとめサイトを作る。WixSTUDIO、テンプレートを使って探索者まとめサイトやキャラクターまとめサイトを作る⑨ 動的ページの画像とデータを紐づける編 データセットの選択、画像元の接続先の設定、CMSと動的ページを繋げる、レイヤーの使い方、EditorX
-
エディターXを使って探索者まとめサイトやキャラクターまとめサイトを作る。WixSTUDIO、テンプレートを使って探索者まとめサイトやキャラクターまとめサイトを作る⑩ 動的ページの帯作成編 装飾の追加し方、装飾の色の変え方、装飾のサイズ変更し方、フォントのレスポンシブ対応の設定し方、EditorX
-
エディターXを使って探索者まとめサイトやキャラクターまとめサイトを作る。WixSTUDIO、テンプレートを使って探索者まとめサイトやキャラクターまとめサイトを作る⑪ 動的ページのステータス作成編 コンテナの追加し方、コンテナの分割し方、自由に入力できるテキストのやり方、テキストのデータセットを外す方法、EditorX
-
エディターXを使って探索者まとめサイトやキャラクターまとめサイトを作る。WixSTUDIO、テンプレートを使って探索者まとめサイトやキャラクターまとめサイトを作る⑫ 動的ページの性格概要作成編 装飾の追加、装飾の色の変更、装飾の影の付け方、レイヤーの使い方、リッチテキストの紐づけ方、データセットの選択し方、テキストの接続先の設定し方、EditorX
-
エディタXを使って探索者まとめサイトやキャラクターまとめサイトを作る。WixSTUDIO、テンプレートを使って探索者まとめサイトやキャラクターまとめサイトを作る⑬ 動的ページの「次へ」「前へ」ボタン編集編 ボタンのテキスト編集し方、コンテナの色の変更し方、コンテナの色の半透明にするやり方、レイヤーの使い方、Editor X
-
エディターXを使って探索者まとめサイトやキャラクターまとめサイトを作る。WixSTUDIO、テンプレートを使って探索者まとめサイトやキャラクターまとめサイトを作る⑭ ホバーアニメーション編 ホバーアニメーションの付け方、ホバーの付け方、Editor X
-
エディターXを使って探索者まとめサイトやキャラクターまとめサイトを作る。WixSTUDIO、テンプレートを使って探索者まとめサイトやキャラクターまとめサイトを作る⑮ レスポンシブ対応編 レスポンシブ対応の作り方、レスポンシブ対応ボタンの場所、画面サイズによってレイアウトを変更する方法、スマートフォンから見たレイアウトの編集、デスクトップから見たレイアウトの確認 Editor X
-
EditorX、エディタX、WixSTUDIOでやりたいことが出来ない!と困ったら見るところ(アイコンの説明)
-
探索者一覧 サイトを作る!エディターXで作るキャラクター紹介ページや、創作PCまとめサイト、探索者まとめサイト、キャラクターまとめサイトの作り方、Wix系統のホームページ作成ツールEditorXの操作や使い方などのまとめ
–
–