文字を背景より上に持っていく
見栄えの関係上、
文字を背景より上に持っていく
作業を開始する!
![男子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-86-1024x538.webp)
![男子D](https://sazano123.com/wp-content/uploads/2021/10/名称未設定のデザイン-99.png)
上に持っていく
![](https://sazano123.com/wp-content/uploads/2023/10/image-87-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)
それ完全に
あなたの感想ですよねの
スキル範囲内だよ
なら、5分休憩するか
![男子C](https://sazano123.com/wp-content/uploads/2021/04/6_144-3-300x300.png)
![](https://sazano123.com/wp-content/uploads/2023/10/image-2-6-150x150.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-88-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-89-1024x538.webp)
![男子D](https://sazano123.com/wp-content/uploads/2021/10/名称未設定のデザイン-99.png)
押したら、
画像変更の画面になったよ
そうしたら、
「Unsplash」をクリックして
![男子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-90-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)
![男子D](https://sazano123.com/wp-content/uploads/2021/10/名称未設定のデザイン-99.png)
こっちの時にやった
![](https://sazano123.com/wp-content/uploads/2022/04/構図サンプル-右一番端(白瀬さん)→令-右から2番目(三峰)→和-12-300x158.jpg)
なら、やり方は分かるか?
![男子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)
もちろん、英語で検索する
「Cafe」で頼む
![男子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-91-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-92-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-93-1024x538.webp)
いや、まだできてない
![男子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)
ミリ単位の調整とかいいよ…
いや、
アニメーションつけたい
![男子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)
!
それはしたい
流石、分かってくれると
思っていた
![男子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)
![男子D](https://sazano123.com/wp-content/uploads/2021/07/2.png)
あれできるの?
あれ、できます
![男子C](https://sazano123.com/wp-content/uploads/2021/04/2_144-1-300x300.png)
まず、全身立ち絵を
動かすから、
4回クリックして選択
![男子C](https://sazano123.com/wp-content/uploads/2021/04/1_144-300x300.png)
![](https://sazano123.com/wp-content/uploads/2023/10/image-94-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-95-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)
![男子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/表のページの作成-90-1024x538.png)
![男子D](https://sazano123.com/wp-content/uploads/2021/10/名称未設定のデザイン-99.png)
色々なアニメーションが
出て来た。
![](https://sazano123.com/wp-content/uploads/2023/10/image-96-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-98-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)
終わりに
今回は
トップページを装飾する流れを
一緒にやってみた
![男子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)
今お知らせが入った。
何の?
![男子C](https://sazano123.com/wp-content/uploads/2021/04/5_144-1-300x300.png)
![男子D](https://sazano123.com/wp-content/uploads/2021/07/2.png)
サクッと言ったのに、
編集が重くなるほど長尺なせいで
この説明、2分割されるって…
お、おう…
思ったより長かったな…?
![男子C](https://sazano123.com/wp-content/uploads/2021/04/5_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の操作や使い方などのまとめ
–
–
–
–