導入
これを
![男子C](https://sazano123.com/wp-content/uploads/2021/04/1_144-300x300.png)
![](https://sazano123.com/wp-content/uploads/2023/10/image-59-1-1024x464.webp)
こうする、
![男子C](https://sazano123.com/wp-content/uploads/2021/04/2_144-1-300x300.png)
![](https://sazano123.com/wp-content/uploads/2023/10/image-60-1-1024x598.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/3_144-1-300x300.png)
作業が増えるから
すべてを任せた、
とBに言われた
![男子C](https://sazano123.com/wp-content/uploads/2021/04/3_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)
ちょっとBが可哀想
…反省と後悔も含めて
ここからは全部伝えるわ
![男子C](https://sazano123.com/wp-content/uploads/2021/04/6_144-3-300x300.png)
ってことで、
完成しているのを、
見栄え良くしたい人用。
![男子C](https://sazano123.com/wp-content/uploads/2021/04/1_144-300x300.png)
蛇足ページだと感じる場合は、
動的ページに進んでも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)
![](https://sazano123.com/wp-content/uploads/2023/10/image-99-1024x538.webp)
アイコン→全身立ち絵に変更する
画像を、全身立ち絵サイズにする
まず、アイコンを
全身立ち絵に
変更する作業だ。
![男子C](https://sazano123.com/wp-content/uploads/2021/04/1_144-300x300.png)
アイコンを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-62-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/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-63-1-1024x538.webp)
![男子D](https://sazano123.com/wp-content/uploads/2021/10/名称未設定のデザイン-99.png)
これでいい?
![](https://sazano123.com/wp-content/uploads/2023/10/image-65-1024x538.webp)
OKOK、完璧
![男子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-66-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/10/名称未設定のデザイン-99.png)
アイコン(画像)を押せば
良いかな?
![](https://sazano123.com/wp-content/uploads/2023/10/image-67-1-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-68-1-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)
無事に変更出来たよ
![](https://sazano123.com/wp-content/uploads/2023/10/image-69-1-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)
![男子D](https://sazano123.com/wp-content/uploads/2021/10/名称未設定のデザイン-99.png)
文字の枠部分であろう所を
クリックしたよ
![](https://sazano123.com/wp-content/uploads/2023/10/image-70-1024x538.webp)
OK、そうしたら
文字を下に動かして欲しい
![男子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-71-1-1024x538.webp)
![男子D](https://sazano123.com/wp-content/uploads/2021/10/名称未設定のデザイン-99.png)
こう、かな?
![](https://sazano123.com/wp-content/uploads/2023/10/image-72-1-1024x538.webp)
OK!
良い感じに整ったと思う
![男子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/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-1-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-74-1-1024x538.webp)
![男子D](https://sazano123.com/wp-content/uploads/2021/10/名称未設定のデザイン-99.png)
画像が置かれた
![](https://sazano123.com/wp-content/uploads/2023/10/image-75-1-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-76-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)
![男子D](https://sazano123.com/wp-content/uploads/2021/10/名称未設定のデザイン-99.png)
本当だ、
画像が広がった
![](https://sazano123.com/wp-content/uploads/2023/10/image-77-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-79-1-1024x538.webp)
そうそう、
デザインツールだ
![男子C](https://sazano123.com/wp-content/uploads/2021/04/2_144-1-300x300.png)
–
そこにある不透明度を
25%にして欲しい
![男子C](https://sazano123.com/wp-content/uploads/2021/04/1_144-300x300.png)
![男子D](https://sazano123.com/wp-content/uploads/2021/10/名称未設定のデザイン-99.png)
25%、分かった。
![](https://sazano123.com/wp-content/uploads/2023/10/image-78-1-1024x538.webp)
![男子D](https://sazano123.com/wp-content/uploads/2021/10/名称未設定のデザイン-99.png)
透明には…なったけど、
![](https://sazano123.com/wp-content/uploads/2023/10/image-80-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/5_144-1-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/2_144-1-300x300.png)
![](https://sazano123.com/wp-content/uploads/2023/10/image-81-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)
![男子D](https://sazano123.com/wp-content/uploads/2021/10/名称未設定のデザイン-99.png)
分かった。
![](https://sazano123.com/wp-content/uploads/2023/10/image-82-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-83-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/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/3_144-1-300x300.png)
![](https://sazano123.com/wp-content/uploads/2023/10/image-84-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-85-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の操作や使い方などのまとめ
–
–