帯部分
次は、この帯部分を
作っていく
![男子C](https://sazano123.com/wp-content/uploads/2021/04/1_144-300x300.png)
![](https://sazano123.com/wp-content/uploads/2023/10/image-21-3-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)
![](https://sazano123.com/wp-content/uploads/2023/10/image-22-3-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-23-3-1024x538.webp)
![男子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/1_144-300x300.png)
![](https://sazano123.com/wp-content/uploads/2023/10/image-24-3-1024x538.webp)
![男子D](https://sazano123.com/wp-content/uploads/2021/10/名称未設定のデザイン-99.png)
クリックしたら、
画面に出て来たね
![](https://sazano123.com/wp-content/uploads/2023/10/image-25-3-1024x538.webp)
長方形に関しては
紐づけをしないから
「×」を押して削除で
![男子C](https://sazano123.com/wp-content/uploads/2021/04/1_144-300x300.png)
※CMSデータで、テーマカラーの画像を登録している人は
紐づけの際に画像と紐づけてしまってもOK!
![男子D](https://sazano123.com/wp-content/uploads/2021/10/名称未設定のデザイン-99.png)
分かった
![](https://sazano123.com/wp-content/uploads/2023/10/image-26-3-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/2_144-1-300x300.png)
![](https://sazano123.com/wp-content/uploads/2023/10/image-27-2-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-28-3-1024x538.webp)
![男子D](https://sazano123.com/wp-content/uploads/2021/10/名称未設定のデザイン-99.png)
こうかな?
![](https://sazano123.com/wp-content/uploads/2023/10/image-29-3-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)
![](https://sazano123.com/wp-content/uploads/2023/10/image-30-3-1024x538.webp)
![男子D](https://sazano123.com/wp-content/uploads/2021/10/名称未設定のデザイン-99.png)
こうでいい?
![](https://sazano123.com/wp-content/uploads/2023/10/image-31-3-1024x538.webp)
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)
–
右上のボタンを押して
![男子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-32-3-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)
![](https://sazano123.com/wp-content/uploads/2023/10/image-33-3-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-34-3-1024x538.webp)
※CMSデータで、テーマカラーの画像を登録している人は
紐づけの際に画像と紐づけてしまってもOK!
![男子D](https://sazano123.com/wp-content/uploads/2021/10/名称未設定のデザイン-99.png)
グレーになったよ
![](https://sazano123.com/wp-content/uploads/2023/10/image-35-3-1024x538.webp)
帯の文字部分(重複部分は、省略気味に説明)
次は帯の文字部分だな
![男子C](https://sazano123.com/wp-content/uploads/2021/04/1_144-300x300.png)
![](https://sazano123.com/wp-content/uploads/2023/10/image-36-4-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)
何回かやったから
省略気味でも良い?
しょうがないな
![男子C](https://sazano123.com/wp-content/uploads/2021/04/6_144-3-300x300.png)
簡易的説明
![男子D](https://sazano123.com/wp-content/uploads/2021/10/名称未設定のデザイン-99.png)
文字を置くと、
紐づけメニューが出る。
![](https://sazano123.com/wp-content/uploads/2023/10/image-37-3-1024x538.webp)
![男子D](https://sazano123.com/wp-content/uploads/2021/10/名称未設定のデザイン-99.png)
台詞(テキスト)をクリック
![](https://sazano123.com/wp-content/uploads/2023/10/image-38-3-1024x538.webp)
![男子D](https://sazano123.com/wp-content/uploads/2021/10/名称未設定のデザイン-99.png)
こうなる。
![](https://sazano123.com/wp-content/uploads/2023/10/image-39-3-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-40-3-1024x538.webp)
ちょっと面倒かも知れないけど
フォントとサイズは付き合ってほしい。
![男子C](https://sazano123.com/wp-content/uploads/2021/04/6_144-3-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)
フォントをクリックして
![](https://sazano123.com/wp-content/uploads/2023/10/image-41-3-1024x538.webp)
![男子D](https://sazano123.com/wp-content/uploads/2021/10/名称未設定のデザイン-99.png)
明朝体を選択、だね
![](https://sazano123.com/wp-content/uploads/2023/10/image-42-3-1024x538.webp)
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)
おしゃれな雰囲気重視の時は
明朝で使い分けると良いと思う。
![男子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)
パソコンの画面によって
サイズが変わるようにしたい
![男子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/2_144-1-300x300.png)
–
まずサイズの左にある
A←→のマークを押す
![男子C](https://sazano123.com/wp-content/uploads/2021/04/1_144-300x300.png)
![](https://sazano123.com/wp-content/uploads/2023/10/image-43-3-1024x538.webp)
![男子D](https://sazano123.com/wp-content/uploads/2021/10/名称未設定のデザイン-99.png)
押したら、
青くなって枠が出て来たね
そうしたら
20~40に設定して
![男子C](https://sazano123.com/wp-content/uploads/2021/04/2_144-1-300x300.png)
![](https://sazano123.com/wp-content/uploads/2023/10/image-44-3-1024x538.webp)
![男子D](https://sazano123.com/wp-content/uploads/2021/10/名称未設定のデザイン-99.png)
設定できたよ。
![](https://sazano123.com/wp-content/uploads/2023/10/image-45-3-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-46-3-1024x538.webp)
![男子D](https://sazano123.com/wp-content/uploads/2021/10/名称未設定のデザイン-99.png)
広げた
![](https://sazano123.com/wp-content/uploads/2023/10/image-47-3-1024x538.webp)
テキストの部分(データベースとの紐づけ系統、何度も行った為ほぼ省略)
次は、
タイトル部分だな
![男子C](https://sazano123.com/wp-content/uploads/2021/04/1_144-300x300.png)
……テキスト、か
![男子C](https://sazano123.com/wp-content/uploads/2021/04/5_144-1-300x300.png)
![](https://sazano123.com/wp-content/uploads/2023/10/image-48-3-1024x538.webp)
![男子D](https://sazano123.com/wp-content/uploads/2021/10/名称未設定のデザイン-99.png)
これは……
ぱっと飛ばして良い?
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-49-3-1024x538.webp)
関連記事
-
エディタ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の操作や使い方などのまとめ
–
–