性格概要
これが最後の要素だな
性格概要
![男子C](https://sazano123.com/wp-content/uploads/2021/04/1_144-300x300.png)
![](https://sazano123.com/wp-content/uploads/2023/10/image-83-1-1024x538.webp)
![男子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)
装飾を追加
まずは装飾の追加だ。
つまり、
![男子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)
「+」をクリック
正解!
![男子C](https://sazano123.com/wp-content/uploads/2021/04/2_144-1-300x300.png)
![](https://sazano123.com/wp-content/uploads/2023/10/image-84-1-1024x538.webp)
から、どうする?
![男子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)
・・・・・
–
![男子D](https://sazano123.com/wp-content/uploads/2021/07/3.png)
装飾を選択
正解!
![男子C](https://sazano123.com/wp-content/uploads/2021/04/2_144-1-300x300.png)
![](https://sazano123.com/wp-content/uploads/2023/10/image-85-1-1024x538.webp)
![男子D](https://sazano123.com/wp-content/uploads/2021/07/3.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)
よし
日を改めよう
![男子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)
???
で、丸い四角形を選んで欲しいから
紫のやつを選択
![男子C](https://sazano123.com/wp-content/uploads/2021/04/2_144-1-300x300.png)
![](https://sazano123.com/wp-content/uploads/2023/10/image-86-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-87-1-1024x538.webp)
![男子D](https://sazano123.com/wp-content/uploads/2021/10/名称未設定のデザイン-99.png)
こんな感じ?
![](https://sazano123.com/wp-content/uploads/2023/10/image-88-1-1024x538.webp)
そう、かなりOK
![男子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)
任せていいな?
![男子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)
拒否権あんまない言い方だね、
分かった
–
![男子D](https://sazano123.com/wp-content/uploads/2021/10/名称未設定のデザイン-99.png)
まず右上のボタンを押す
![](https://sazano123.com/wp-content/uploads/2023/10/image-89-1-1024x538.webp)
![男子D](https://sazano123.com/wp-content/uploads/2021/10/名称未設定のデザイン-99.png)
ペンみたいなボタンを押す
![](https://sazano123.com/wp-content/uploads/2023/10/image-90-1-1024x538.webp)
![男子D](https://sazano123.com/wp-content/uploads/2021/10/名称未設定のデザイン-99.png)
紫の正方形をクリックする
![](https://sazano123.com/wp-content/uploads/2023/10/image-91-1-1024x538.webp)
![男子D](https://sazano123.com/wp-content/uploads/2021/10/名称未設定のデザイン-99.png)
白色をクリックする
![](https://sazano123.com/wp-content/uploads/2023/10/image-92-1-1024x538.webp)
![男子D](https://sazano123.com/wp-content/uploads/2021/10/名称未設定のデザイン-99.png)
これで白くなった
![](https://sazano123.com/wp-content/uploads/2023/10/image-93-1-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)
–
色を付ける場所の
2つ下の所にある
「影を付ける」をクリック
![男子C](https://sazano123.com/wp-content/uploads/2021/04/2_144-1-300x300.png)
![男子D](https://sazano123.com/wp-content/uploads/2021/07/2.png)
本当だ、こんなところに
「影を付ける」がある。
–
![男子D](https://sazano123.com/wp-content/uploads/2021/10/名称未設定のデザイン-99.png)
押そう
![](https://sazano123.com/wp-content/uploads/2023/10/image-94-1-1024x538.webp)
![男子D](https://sazano123.com/wp-content/uploads/2021/10/名称未設定のデザイン-99.png)
! 影がついた。
![](https://sazano123.com/wp-content/uploads/2023/10/image-95-1-1024x538.webp)
そう、
これだけで終わり。
![男子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)
レイヤー(順番・重なり優先度)を変更する
今のままだと
帯が下にあるから
これを変更する
![男子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-100-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)
良かった。
–
![男子D](https://sazano123.com/wp-content/uploads/2021/10/名称未設定のデザイン-99.png)
セクションを開いて、
コンテナを広く
![](https://sazano123.com/wp-content/uploads/2023/10/image-2-4-1024x538.webp)
![男子D](https://sazano123.com/wp-content/uploads/2021/10/名称未設定のデザイン-99.png)
今触っている白い四角は
★基本のシェイプ、だね
![](https://sazano123.com/wp-content/uploads/2023/10/image-3-4-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/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)
分かった。
![](https://sazano123.com/wp-content/uploads/2023/10/image-4-4-1024x538.webp)
![男子D](https://sazano123.com/wp-content/uploads/2021/10/名称未設定のデザイン-99.png)
よし、これで
良くなった。
![](https://sazano123.com/wp-content/uploads/2023/10/image-6-4-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)
![](https://sazano123.com/wp-content/uploads/2023/10/image-7-4-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)
STRとか、どのキャラクターでも
統一されている者に関しては
手入力、だ
![男子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)
これも
テキストでいい?
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-12-5-1024x538.webp)
なら、
「接続されていません」を
選んで
![男子C](https://sazano123.com/wp-content/uploads/2021/04/1_144-300x300.png)
![](https://sazano123.com/wp-content/uploads/2023/10/image-13-5-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)
![](https://sazano123.com/wp-content/uploads/2023/10/image-14-5-1024x538.webp)
![男子D](https://sazano123.com/wp-content/uploads/2021/10/名称未設定のデザイン-99.png)
あとは色々変更して、
完了
![](https://sazano123.com/wp-content/uploads/2023/10/image-15-5-1024x538.webp)
「性格概要」の内容テキスト(リッチテキスト)について
![男子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-16-5-1024x538.webp)
![男子D](https://sazano123.com/wp-content/uploads/2021/10/名称未設定のデザイン-99.png)
テキストをクリック
![](https://sazano123.com/wp-content/uploads/2023/10/image-17-5-1024x538.webp)
![男子D](https://sazano123.com/wp-content/uploads/2021/10/名称未設定のデザイン-99.png)
テキストの接続先を
クリック
![](https://sazano123.com/wp-content/uploads/2023/10/image-19-5-1024x538.webp)
![男子D](https://sazano123.com/wp-content/uploads/2021/10/名称未設定のデザイン-99.png)
性格概要(リッチテキスト)を
クリック
![](https://sazano123.com/wp-content/uploads/2023/10/image-18-4-1024x538.webp)
![男子D](https://sazano123.com/wp-content/uploads/2021/07/2.png)
すごい…
改行までしっかりできている
![](https://sazano123.com/wp-content/uploads/2023/10/image-20-5-1024x538.webp)
太字とか、斜め文字とかも
全部反映されるはず
![男子C](https://sazano123.com/wp-content/uploads/2021/04/2_144-1-300x300.png)
![男子D](https://sazano123.com/wp-content/uploads/2021/07/2.png)
便利だ…。
–
![男子D](https://sazano123.com/wp-content/uploads/2021/10/名称未設定のデザイン-99.png)
あとは
色々変更するだけだね
フォントはUD明朝で
![男子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-21-5-1024x538.webp)
フォントサイズは
レスポンシブ対応にして
8~20にしようか
![男子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-22-5-1024x538.webp)
![男子D](https://sazano123.com/wp-content/uploads/2021/10/名称未設定のデザイン-99.png)
これで、
8~20にする
![](https://sazano123.com/wp-content/uploads/2023/10/image-23-5-1024x538.webp)
![男子D](https://sazano123.com/wp-content/uploads/2021/10/名称未設定のデザイン-99.png)
これで、
性格概要は完成かな?
![](https://sazano123.com/wp-content/uploads/2023/10/image-24-5-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の操作や使い方などのまとめ
–
–