最終的に作れるもの
ホームのページ&動的ページ
管理画面データベース(CMS)!今回は此処の作り方のみ、やります!
動的ページを一つ作れば、
後は管理画面のCMSを変更するだけで
自動的にページを作成することが出来ます。
導入
![男子D](https://sazano123.com/wp-content/uploads/2021/10/名称未設定のデザイン-99.png)
TLにあった探索者まとめを
管理しやすいサイトが作りたい。
ずっっっ…と作りたかったTRPG探索者まとめサイトを作った
シナリオ人数/性別で絞り込み可、各ページに飛べばシナリオ名とかディスプレイとか卓報告ツイートとかその他のフレーバー情報まで確認できる仕様です 自動で身長順に並ぶページ以外はスマホにも対応した 達成感すごい pic.twitter.com/7C2bL2VtOh
— 川崎 (@kwsk_zip) September 24, 2023
CMSと連携する
やり方ですかね…?
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 通常-2-254x300.png)
–
僕もWixやXエディタを触って
数週間なので、
至らないところがありますが、
やってみましょうか。
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 笑顔-1-261x300.png)
![男子D](https://sazano123.com/wp-content/uploads/2021/07/2.png)
コードは分からない…
Xエディタはコード不要なので、
一緒に見ながら
サイトを作る事が出来ますよ
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 嬉しい-2-267x300.png)
CMSとは
CMS(コンテンツ・マネジメント・システム)
ウェブサイトの運営・管理を効率化するツールであり、
専門的な技術を持たない人でもウェブページの編集や更新を簡単に行うことができます。
HTMLやCSSの知識がなくても、テキストや画像の更新、ページの追加や削除など、
ウェブサイトの内容を直感的に操作することができます。
![男子D](https://sazano123.com/wp-content/uploads/2021/10/名称未設定のデザイン-99.png)
そのCMSって言うのは?
ざっくり言うと、
ウェブページの編集を
プログラミング言語なしで
行うことが出来るツール、
と思って下さい。
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 通常-2-254x300.png)
![男子D](https://sazano123.com/wp-content/uploads/2021/10/名称未設定のデザイン-99.png)
便利だ
XエディタのCMSは
Notion、Excelを触ったことある人は
6割は理解できると思います。
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 笑顔-1-261x300.png)
![](https://sazano123.com/wp-content/uploads/2022/10/image-2022-10-02T161532.374-300x158.webp)
会員登録
サイト開く
まず、エディタXを
開いて下さい
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 嬉しい-2-267x300.png)
![](https://sazano123.com/wp-content/uploads/2023/10/image-2-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-3-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-6-1024x538.webp)
そうですね
![男子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-7-1024x646.webp)
此処のサイトは
メールアドレスが
サイトのアドレスと直結します
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 嬉しい-2-267x300.png)
tarouという名前のアドレスは、サイト名にtarouが付きます。
![男子D](https://sazano123.com/wp-content/uploads/2021/10/名称未設定のデザイン-99.png)
その場合は、
アドレス作ればいい?
![](https://sazano123.com/wp-content/uploads/2022/08/image-102-300x158.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-8-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-9-1024x538.webp)
そうですね、
今回は白紙で合っています。
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 通常-2-254x300.png)
![男子D](https://sazano123.com/wp-content/uploads/2021/07/2.png)
チュートリアルツアーに参加する?
と聞かれた。
![](https://sazano123.com/wp-content/uploads/2023/10/image-10-1024x538.webp)
かなり分かりやすかったですが、
今回は「閉じる」で
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 不安-2-257x300.png)
![男子D](https://sazano123.com/wp-content/uploads/2021/07/2.png)
本当に真っ白になったよ…?
![](https://sazano123.com/wp-content/uploads/2023/10/image-11-1024x538.webp)
今回は
データベースを作成するので
ここの部分は
真っ白なままで終わります
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 嬉しい-2-267x300.png)
![男子D](https://sazano123.com/wp-content/uploads/2021/07/2.png)
データベースって、
響きからして、格好良い…
では、やりましょうか
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 笑顔-1-261x300.png)
データベース(CMS)を作成
では、左上にある
表っぽいマークの付いた
CMSボタンを押してください
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 嬉しい-2-267x300.png)
![](https://sazano123.com/wp-content/uploads/2023/10/image-12-1024x538.webp)
![男子D](https://sazano123.com/wp-content/uploads/2021/10/名称未設定のデザイン-99.png)
押すよ
–
![男子D](https://sazano123.com/wp-content/uploads/2021/10/名称未設定のデザイン-99.png)
CMSを追加、と出てきた。
![](https://sazano123.com/wp-content/uploads/2023/10/image-13-1024x538.webp)
これは
「追加する」でOKです。
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 通常-2-254x300.png)
![男子D](https://sazano123.com/wp-content/uploads/2021/10/名称未設定のデザイン-99.png)
CMSという画面だけ出た
![](https://sazano123.com/wp-content/uploads/2023/10/image-14-1024x538.webp)
では、
コレクションを
クリックして下さい。
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 通常-2-254x300.png)
![](https://sazano123.com/wp-content/uploads/2023/10/image-15-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-16-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-17-1024x538.webp)
コレクションの名前は
何でも良いですが、
便宜上、「探索者一覧」と
記入して下さい
![男子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/04/image-75-2-300x158.webp)
出来なくもないですが、
今回はオーヴァードの事を
知らない人もいるので、
探索者にしましょうか
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 不安-2-257x300.png)
![男子D](https://sazano123.com/wp-content/uploads/2021/10/名称未設定のデザイン-99.png)
分かった。
探索者一覧、と入れる
![](https://sazano123.com/wp-content/uploads/2023/10/image-18-1024x538.webp)
![男子D](https://sazano123.com/wp-content/uploads/2021/10/名称未設定のデザイン-99.png)
作成
–
–
![男子D](https://sazano123.com/wp-content/uploads/2021/10/名称未設定のデザイン-99.png)
Excel表みたいなのが
出てきたね
![](https://sazano123.com/wp-content/uploads/2023/10/image-19-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 笑顔-1-261x300.png)
これだけ抑えれば分かる人は分かる!
![男子D](https://sazano123.com/wp-content/uploads/2021/10/名称未設定のデザイン-99.png)
フィールドを追加して、
要素を増やしていくだけだね?
![](https://sazano123.com/wp-content/uploads/2023/10/image-23-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-254x300.png)
フィールドタイプ:画像
フィールドタイプ:画像で、
アイコン、全身、背景、バストアップのフィールドを作る
まず、画像ですね、
ページを作る為に
必要な要素は4つ
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 嬉しい-2-267x300.png)
![](https://sazano123.com/wp-content/uploads/2023/10/image-20-1024x538.webp)
–
立ち絵がない場合は、フリー立ち絵などをお借りして試してください↓
![](https://sazano123.com/wp-content/uploads/2022/02/ソロモン悪魔-72柱-2022-02-27T175243.135-300x158.jpg)
–
背景イラストがない場合は、フリー立ち絵などをお借りして試してください↓
![](https://sazano123.com/wp-content/uploads/2022/04/構図サンプル-右一番端(白瀬さん)→令-右から2番目(三峰)→和-12-300x158.jpg)
どちらもサイトによって規約が違うので、確認の上行って下さいませ
丸形アイコンで
トップ画面を作るので、
その時にアイコンは使います
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 嬉しい-2-267x300.png)
![](https://sazano123.com/wp-content/uploads/2023/10/image-21-1024x538.webp)
他は動的ページで使います。
![](https://sazano123.com/wp-content/uploads/2023/10/image-22-1024x538.webp)
![男子D](https://sazano123.com/wp-content/uploads/2021/10/名称未設定のデザイン-99.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)
–
細かい装飾は
Cとかに聞いてください
僕は完成すれば良い派ですから
![男子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)
![](https://sazano123.com/wp-content/uploads/2023/10/image-23-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-24-1024x538.webp)
はい、
画像で合っています。
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 嬉しい-2-267x300.png)
![](https://sazano123.com/wp-content/uploads/2023/10/image-25-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-26-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)
–
アイコンタイトルの下を
クリックして下さい
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 通常-2-254x300.png)
![](https://sazano123.com/wp-content/uploads/2023/10/image-27-1024x538.webp)
![男子D](https://sazano123.com/wp-content/uploads/2021/10/名称未設定のデザイン-99.png)
青くなって画像を追加、
と書かれているね
![](https://sazano123.com/wp-content/uploads/2023/10/image-28-1024x538.webp)
その「画像を追加」を
クリックして下さい
![男子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-29-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-30-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)
出来たよ
![](https://sazano123.com/wp-content/uploads/2023/10/image-32-1024x538.webp)
……では、
アイテムを追加を
押してください
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 嬉しい-2-267x300.png)
![](https://sazano123.com/wp-content/uploads/2023/10/image-31-1024x538.webp)
![男子D](https://sazano123.com/wp-content/uploads/2021/10/名称未設定のデザイン-99.png)
アイコンが
アップロードできた
![](https://sazano123.com/wp-content/uploads/2023/10/image-33-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 笑顔-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の操作や使い方などのまとめ
–
–
–