CMSデータとトップページを紐づける
データセットを作成する
では、最後にCMSデータと
トップページを
紐づける作業をします
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 通常-2-254x300.png)
–
まずは1回クリックして
リピーター…
大きな枠ごと
クリックして下さい
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 笑顔-1-261x300.png)
![男子D](https://sazano123.com/wp-content/uploads/2021/10/名称未設定のデザイン-99.png)
クリックしたよ
![](https://sazano123.com/wp-content/uploads/2023/10/image-36-1-1024x538.webp)
いいですね
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 笑顔-1-261x300.png)
![男子D](https://sazano123.com/wp-content/uploads/2021/10/名称未設定のデザイン-99.png)
上の方にメニューがあるね
![](https://sazano123.com/wp-content/uploads/2023/10/image-28-1-1024x538.webp)
では、
紐づける様なボタンを
押してください。
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 嬉しい-2-267x300.png)
![男子D](https://sazano123.com/wp-content/uploads/2021/10/名称未設定のデザイン-99.png)
これかな?
押すよ
![](https://sazano123.com/wp-content/uploads/2023/10/image-29-1-1024x538.webp)
![男子D](https://sazano123.com/wp-content/uploads/2021/10/名称未設定のデザイン-99.png)
データセットを作成?の
ボタンが出て来た。
それをクリックで
合っていますよ
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 嬉しい-2-267x300.png)
![](https://sazano123.com/wp-content/uploads/2023/10/image-30-1-1024x538.webp)
![男子D](https://sazano123.com/wp-content/uploads/2021/10/名称未設定のデザイン-99.png)
データセット作成、の
画面に飛んだ
![](https://sazano123.com/wp-content/uploads/2023/10/image-31-1-1024x538.webp)
いいですね。
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 笑顔-1-261x300.png)
–
では、
コレクションを選択を押して
「探索者一覧」を選択して下さい
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 嬉しい-2-267x300.png)
![男子D](https://sazano123.com/wp-content/uploads/2021/10/名称未設定のデザイン-99.png)
データセット名も入った
![](https://sazano123.com/wp-content/uploads/2023/10/image-33-1-1024x538.webp)
「作成」を
クリックして下さい
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 嬉しい-2-267x300.png)
![男子D](https://sazano123.com/wp-content/uploads/2021/10/名称未設定のデザイン-99.png)
データがセットされたみたい
![](https://sazano123.com/wp-content/uploads/2023/10/image-34-1-1024x538.webp)
それで
データセットの作成は
完了です。
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 嬉しい-2-267x300.png)
画像をデータセットと紐づける
では、画像とデータを
紐付けます
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 通常-2-254x300.png)
![男子D](https://sazano123.com/wp-content/uploads/2021/10/名称未設定のデザイン-99.png)
画像を押すよ
![](https://sazano123.com/wp-content/uploads/2023/10/image-35-1-1024x538.webp)
はい、
押してください
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 嬉しい-2-267x300.png)
![男子D](https://sazano123.com/wp-content/uploads/2021/10/名称未設定のデザイン-99.png)
メニューが出て来た
では、画像元の接続先を
クリックして下さい
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 嬉しい-2-267x300.png)
![](https://sazano123.com/wp-content/uploads/2023/10/image-37-1-1024x538.webp)
![男子D](https://sazano123.com/wp-content/uploads/2021/10/名称未設定のデザイン-99.png)
押すと、
一覧が出てくるね
では、「アイコン」を
選んで下さい
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 通常-2-254x300.png)
![](https://sazano123.com/wp-content/uploads/2023/10/image-38-1-1024x538.webp)
![男子D](https://sazano123.com/wp-content/uploads/2021/10/名称未設定のデザイン-99.png)
アイコンをクリック。
アイコンが変わるのに、
時間がかかるので
ゆっくり待ってください
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 笑顔-1-261x300.png)
![男子D](https://sazano123.com/wp-content/uploads/2021/07/2.png)
自動で…変わった…
![](https://sazano123.com/wp-content/uploads/2023/10/image-39-1-1024x538.webp)
便利ですよね…
それがCMSの便利機能です
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 笑顔-1-261x300.png)
![男子D](https://sazano123.com/wp-content/uploads/2021/07/2.png)
すごい…
では、「リピーター接続」を
押して前の画面に
戻って下さい
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 嬉しい-2-267x300.png)
![](https://sazano123.com/wp-content/uploads/2023/10/image-40-1-1024x538.webp)
![男子D](https://sazano123.com/wp-content/uploads/2021/10/名称未設定のデザイン-99.png)
押して戻った。
タイトル部分→名前に紐づけする
では、次はタイトルの部分を
名前に紐付けようかな
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 嬉しい-2-267x300.png)
![男子D](https://sazano123.com/wp-content/uploads/2021/10/名称未設定のデザイン-99.png)
テキストは二つあるね?
2番目のテキストで
お願いします。
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 嬉しい-2-267x300.png)
![](https://sazano123.com/wp-content/uploads/2023/10/image-41-1-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-42-1-1024x538.webp)
そうですね
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 嬉しい-2-267x300.png)
![男子D](https://sazano123.com/wp-content/uploads/2021/10/名称未設定のデザイン-99.png)
名前(テキスト)を
クリックするよ
![](https://sazano123.com/wp-content/uploads/2023/10/image-43-1-1024x538.webp)
これで完了です。
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 嬉しい-2-267x300.png)
![男子D](https://sazano123.com/wp-content/uploads/2021/10/名称未設定のデザイン-99.png)
まだ…変わっていない…
XエディタとWixは編集重いので
待ちながら
次のテキストをやりましょうか。
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 笑顔-1-261x300.png)
![男子D](https://sazano123.com/wp-content/uploads/2021/07/3.png)
…あっ、変わった。
![](https://sazano123.com/wp-content/uploads/2023/10/image-44-1-1024x538.webp)
よかったです。
では、戻りましょうか。
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 笑顔-1-261x300.png)
![男子D](https://sazano123.com/wp-content/uploads/2021/10/名称未設定のデザイン-99.png)
うん、
リピーターを接続を押して
元の画面に戻る。
![](https://sazano123.com/wp-content/uploads/2023/10/image-40-1-1024x538.webp)
テキスト→シナリオHO名に変更
では、次は上のテキストを
クリックして下さい
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 嬉しい-2-267x300.png)
![](https://sazano123.com/wp-content/uploads/2023/10/image-45-1-1024x538.webp)
![男子D](https://sazano123.com/wp-content/uploads/2021/10/名称未設定のデザイン-99.png)
押したよ
–
![男子D](https://sazano123.com/wp-content/uploads/2021/10/名称未設定のデザイン-99.png)
HO(テキスト)を
選択して良い?
![](https://sazano123.com/wp-content/uploads/2023/10/image-46-1-1024x538.webp)
はい、
それで合っています
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 嬉しい-2-267x300.png)
![男子D](https://sazano123.com/wp-content/uploads/2021/10/名称未設定のデザイン-99.png)
無事に変わった…
![](https://sazano123.com/wp-content/uploads/2023/10/image-47-1-1024x538.webp)
タイトル部分の文字の編集
流石にタイトルが英語だと
いかにもテンプレートなので
変更しましょうか
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 笑顔-1-261x300.png)
![](https://sazano123.com/wp-content/uploads/2023/10/image-48-1-1024x538.webp)
![男子D](https://sazano123.com/wp-content/uploads/2021/10/名称未設定のデザイン-99.png)
確かに変更したい…
テキスト編集を可能にする
では、編集するために
タイトル文字を
クリックしましょう
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 嬉しい-2-267x300.png)
![男子D](https://sazano123.com/wp-content/uploads/2021/07/2.png)
クリックはした……
![](https://sazano123.com/wp-content/uploads/2023/10/image-49-1-1024x538.webp)
![男子D](https://sazano123.com/wp-content/uploads/2021/07/2.png)
けど、カーソルがついたり、
編集は出来ないね
編集は
「テキストを編集」を押すと
編集できます
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 嬉しい-2-267x300.png)
![男子D](https://sazano123.com/wp-content/uploads/2021/10/名称未設定のデザイン-99.png)
助かった。
テキストを編集を
クリックする
![](https://sazano123.com/wp-content/uploads/2023/10/image-50-1-1024x538.webp)
![男子D](https://sazano123.com/wp-content/uploads/2021/10/名称未設定のデザイン-99.png)
いかにも
編集できそうな画面になった。
![](https://sazano123.com/wp-content/uploads/2023/10/image-51-1-1024x538.webp)
フォントを変更する
先にフォントを
明朝体にしようかな
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 嬉しい-2-267x300.png)
![男子D](https://sazano123.com/wp-content/uploads/2021/10/名称未設定のデザイン-99.png)
フォント部分を
クリックするよ
![](https://sazano123.com/wp-content/uploads/2023/10/image-52-1-1024x538.webp)
![男子D](https://sazano123.com/wp-content/uploads/2021/10/名称未設定のデザイン-99.png)
どれがいいかな?
なんとなくで、
MS P明朝体にします
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 笑顔-1-261x300.png)
![](https://sazano123.com/wp-content/uploads/2023/10/image-53-1-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-54-1-1024x538.webp)
明朝体、
重いことが多いですが
おしゃれですよね
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 嬉しい-2-267x300.png)
タイトルを変更する
では、クリックして
タイトルを
自由に変えてください
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 嬉しい-2-267x300.png)
![](https://sazano123.com/wp-content/uploads/2023/10/image-55-1-1024x538.webp)
![男子D](https://sazano123.com/wp-content/uploads/2021/10/名称未設定のデザイン-99.png)
こんなかんじ?
![](https://sazano123.com/wp-content/uploads/2023/10/image-56-1-1024x538.webp)
良いですね
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 嬉しい-2-267x300.png)
プレビューをする
最後にプレビューをして
崩れていないか、を
確認します
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 嬉しい-2-267x300.png)
![](https://sazano123.com/wp-content/uploads/2023/10/image-57-1-1024x538.webp)
![男子D](https://sazano123.com/wp-content/uploads/2021/10/名称未設定のデザイン-99.png)
それ毎回やるね
癖にしないと
いつどこで間違えたか、
分からなくなるので…
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 不安-2-257x300.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-58-1-1024x538.webp)
良いですね…!
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 笑顔-1-261x300.png)
–
では、これで一先ず
トップページは完成です。
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 嬉しい-2-267x300.png)
![男子D](https://sazano123.com/wp-content/uploads/2021/10/名称未設定のデザイン-99.png)
次は
トップページの装飾、って
言ってたよね?
面倒派の僕はこれでいいのですが
なんか違うってCが言うので
装飾あたりはCに任せました
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 笑顔-1-261x300.png)
![男子D](https://sazano123.com/wp-content/uploads/2021/10/名称未設定のデザイン-99.png)
そっか
・・・…動的ページも
試しに押し付けたら
担当してくれるらしいので
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 笑顔-1-261x300.png)
–
僕は此処で
無事に逃げられる
というわけですよ
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 笑顔-1-261x300.png)
![男子D](https://sazano123.com/wp-content/uploads/2021/10/名称未設定のデザイン-99.png)
分かった。
ありがとう。
役に立てたのなら、何より
では、後は他力に頼りますね
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 笑顔-1-261x300.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の操作や使い方などのまとめ
–
–
–
–