レスポンシブ対応 完成図
画面サイズを変更すると、
その画面サイズによって、より良いレイアウトに変更できる機能です。
元々レスポンシブ対応は記事作成予定がなかった為、
メイキングややり方についてはさっくりです。
導入
今作ったサイトだけど…
スマホから見ると、崩れる
![男子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)
……確かに。
そこでつかうのが
「レスポンシブ対応」機能だ
![男子C](https://sazano123.com/wp-content/uploads/2021/04/1_144-300x300.png)
–
…とはいえ、
俺もパソコン版で
満足しているから
簡単なさわりで終了する
![男子C](https://sazano123.com/wp-content/uploads/2021/04/6_144-3-300x300.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-25-5-1024x538.webp)
![男子D](https://sazano123.com/wp-content/uploads/2021/10/名称未設定のデザイン-99.png)
…ひどいことになっている
![](https://sazano123.com/wp-content/uploads/2023/10/image-26-5-1024x538.webp)
思った以上に
終わってるな…
![男子C](https://sazano123.com/wp-content/uploads/2021/04/5_144-1-300x300.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)
–
酷い部分を
手直ししておこう
![男子C](https://sazano123.com/wp-content/uploads/2021/04/1_144-300x300.png)
HO部分の編集
まず、HO部分をクリック
![男子C](https://sazano123.com/wp-content/uploads/2021/04/1_144-300x300.png)
![](https://sazano123.com/wp-content/uploads/2023/10/image-27-4-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-28-5-1024x538.webp)
![男子D](https://sazano123.com/wp-content/uploads/2021/10/名称未設定のデザイン-99.png)
値が入力できるようになった
10~30にしようか
![男子C](https://sazano123.com/wp-content/uploads/2021/04/2_144-1-300x300.png)
![](https://sazano123.com/wp-content/uploads/2023/10/image-29-5-1024x538.webp)
![男子D](https://sazano123.com/wp-content/uploads/2021/10/名称未設定のデザイン-99.png)
これで、
タイトル部分は
見れるようにはなったね
![](https://sazano123.com/wp-content/uploads/2023/10/image-30-5-1024x538.webp)
ステータス部分
次はステータス部分だな
![男子C](https://sazano123.com/wp-content/uploads/2021/04/2_144-1-300x300.png)
–
Shift押しながら、クリックすると
同時選択できるから
STR~16まで選択して
![男子C](https://sazano123.com/wp-content/uploads/2021/04/1_144-300x300.png)
![](https://sazano123.com/wp-content/uploads/2023/10/image-31-4-1024x538.webp)
![男子D](https://sazano123.com/wp-content/uploads/2021/10/名称未設定のデザイン-99.png)
選択できたよ
で、さっきみたいに
「A←→」のボタンを押して
![男子C](https://sazano123.com/wp-content/uploads/2021/04/1_144-300x300.png)
![男子D](https://sazano123.com/wp-content/uploads/2021/10/名称未設定のデザイン-99.png)
サイズは?
サイズは5~10で!
![男子C](https://sazano123.com/wp-content/uploads/2021/04/2_144-1-300x300.png)
![](https://sazano123.com/wp-content/uploads/2023/10/image-32-4-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)
こう?
![](https://sazano123.com/wp-content/uploads/2023/10/image-33-4-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-37-4.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-35-4-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-36-5-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)
![男子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)
誰だよ、
斜めの線とか入れた奴って
自分で思ってる
![男子C](https://sazano123.com/wp-content/uploads/2021/04/6_144-3-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の操作や使い方などのまとめ
–
–
–