最終的に作れるもの
ホームのページ＆動的ページ
管理画面データベース（CMS）！今回は此処の作り方のみ、やります！
動的ページを一つ作れば、
後は管理画面のCMSを変更するだけで
自動的にページを作成することが出来ます。
導入
TLにあった探索者まとめを
管理しやすいサイトが作りたい。
ずっっっ…と作りたかったTRPG探索者まとめサイトを作った
シナリオ人数/性別で絞り込み可、各ページに飛べばシナリオ名とかディスプレイとか卓報告ツイートとかその他のフレーバー情報まで確認できる仕様です 自動で身長順に並ぶページ以外はスマホにも対応した 達成感すごい pic.twitter.com/7C2bL2VtOh
— 川崎 (@kwsk_zip) September 24, 2023
CMSと連携する
やり方ですかね…？
–
僕もWixやXエディタを触って
数週間なので、
至らないところがありますが、
やってみましょうか。
コードは分からない…
Xエディタはコード不要なので、
一緒に見ながら
サイトを作る事が出来ますよ
CMSとは
CMS（コンテンツ・マネジメント・システム）
ウェブサイトの運営・管理を効率化するツールであり、
専門的な技術を持たない人でもウェブページの編集や更新を簡単に行うことができます。
HTMLやCSSの知識がなくても、テキストや画像の更新、ページの追加や削除など、
ウェブサイトの内容を直感的に操作することができます。
そのCMSって言うのは？
ざっくり言うと、
ウェブページの編集を
プログラミング言語なしで
行うことが出来るツール、
と思って下さい。
便利だ
XエディタのCMSは
Notion、Excelを触ったことある人は
6割は理解できると思います。
会員登録
サイト開く
まず、エディタXを
開いて下さい
開いた
今すぐ作成を押す
今すぐ作成を押して良い？
大丈夫ですよ
ログインのページは
「新規登録」で良い？
そうですね
登録画面になった
此処のサイトは
メールアドレスが
サイトのアドレスと直結します
tarouという名前のアドレスは、サイト名にtarouが付きます。
その場合は、
アドレス作ればいい？
そうですね、
それが無難だと思います
アンケートっぽいのが
出てきた。
とりあえず、
「その他」「自身」で
次に進んでください
テンプレートの選択は
白紙で良い？
そうですね、
今回は白紙で合っています。
チュートリアルツアーに参加する？
と聞かれた。
かなり分かりやすかったですが、
今回は「閉じる」で
本当に真っ白になったよ…？
今回は
データベースを作成するので
ここの部分は
真っ白なままで終わります
データベースって、
響きからして、格好良い…
では、やりましょうか
データベース（CMS）を作成
では、左上にある
表っぽいマークの付いた
CMSボタンを押してください
押すよ
–
CMSを追加、と出てきた。
これは
「追加する」でOKです。
CMSという画面だけ出た
では、
コレクションを
クリックして下さい。
分かった、
コレクションを押すよ
–
このまま
「コレクションの作成」を
押せば良い？
はい、それでいいです。
コレクションを作成する、の
メニューに飛んだよ
コレクションの名前は
何でも良いですが、
便宜上、「探索者一覧」と
記入して下さい
オーヴァード一覧とかが良い
出来なくもないですが、
今回はオーヴァードの事を
知らない人もいるので、
探索者にしましょうか
分かった。
探索者一覧、と入れる
作成
–
–
Excel表みたいなのが
出てきたね
ここに「フィールドを追加」して
表の要素を増やしていきます
データベースのフィールド追加
フィールド＝タイトル、みたいなもの
※名前、画像、動画まで管理が可能※
今回、追加したいフィールドについて
画像、数字、テキスト、リッチテキスト、タグ
フィールドは
色々な種類があるので
種類ごとに追加していきますね
これだけ抑えれば分かる人は分かる！
フィールドを追加して、
要素を増やしていくだけだね？
完全に理解していますね、
そうです。
とはいえ、
たまにどうすればいいか
分からなくなることもあるので、
順番にやっていきますよ
フィールドタイプ：画像
フィールドタイプ：画像で、
アイコン、全身、背景、バストアップのフィールドを作る
まず、画像ですね、
ページを作る為に
必要な要素は4つ
–
立ち絵がない場合は、フリー立ち絵などをお借りして試してください↓
–
背景イラストがない場合は、フリー立ち絵などをお借りして試してください↓
どちらもサイトによって規約が違うので、確認の上行って下さいませ
丸形アイコンで
トップ画面を作るので、
その時にアイコンは使います
他は動的ページで使います。
分かりやすいけど、
図解の文字が――
ちょっと主張強い
分かればいいんですよ、
分かれば。
–
細かい装飾は
Cとかに聞いてください
僕は完成すれば良い派ですから
①フィールドを追加する
まず、
フィールドを追加します。
②フィールドタイプを選択
フィールドタイプを
選択、と出てきた。
–
画像で良い？
はい、
画像で合っています。
なら、選択をクリックするよ
③フィールド名を入れる
フィールド名は
タイトルなので
アイコンとかの名前を入れます
アイコンのフィールドが出た。
④アイコンを入れてみる
では、
アイコン画像を
入れましょうか
–
アイコンタイトルの下を
クリックして下さい
青くなって画像を追加、
と書かれているね
その「画像を追加」を
クリックして下さい
画像選択画面になったから
「アップロード」で良い？
はい、アップロードを
クリックして下さい
またアップロードが
出たから押すよ
ファイルを選択して、
アップロードする
そうですね
出来たよ
……では、
アイテムを追加を
押してください
アイコンが
アップロードできた
良かった。
なら、あとは同じように
他の画像も
アップロードすれば完了です。
関連記事
-
Wix Studioで探索者まとめサイトを作る方法①｜CMS・データベース編
-
Wix Studioで探索者まとめサイトを作る方法②｜CMS入力・タグ・バックアップ編
-
Wix Studioで探索者まとめサイトを作る方法③｜トップページ作成前編
-
Wix Studioで探索者まとめサイトを作る方法④｜CMS連携・トップページ後編
-
Wix Studioで探索者まとめサイトを作る方法⑤｜トップページ装飾前編
-
Wix Studioで探索者まとめサイトを作る方法⑥｜トップページ装飾後編
-
Wix Studioで探索者まとめサイトを作る方法⑦｜動的ページ作成前編
-
Wix Studioで探索者まとめサイトを作る方法⑧｜動的ページのコンテナ配置編
-
Wix Studioで探索者まとめサイトを作る方法⑨｜動的ページの画像連携編
-
Wix Studioで探索者まとめサイトを作る方法⑩｜動的ページの帯装飾編
-
Wix Studioで探索者まとめサイトを作る方法⑪｜動的ページのステータス作成編
-
Wix Studioで探索者まとめサイトを作る方法⑫｜動的ページの性格概要編
-
Wix Studioで探索者まとめサイトを作る方法⑬｜前へ・次へボタン編集編
-
Wix Studioで探索者まとめサイトを作る方法⑭｜ホバーアニメーション編
-
Wix Studioで探索者まとめサイトを作る方法⑮｜レスポンシブ対応編
-
Wix Studioのアイコン早見表｜Editor Xで迷った時の操作ガイド
-
探索者まとめサイトを作りたい人へ｜Wix Studio制作ガイド
–
–
–