レスポンシブ対応 完成図
画面サイズを変更すると、
その画面サイズによって、より良いレイアウトに変更できる機能です。
元々レスポンシブ対応は記事作成予定がなかった為、
メイキングややり方についてはさっくりです。
導入
今作ったサイトだけど…
スマホから見ると、崩れる
……確かに。
そこでつかうのが
「レスポンシブ対応」機能だ
–
…とはいえ、
俺もパソコン版で
満足しているから
簡単なさわりで終了する
スマートフォンモードに変更
まず、スマートフォンから
どう見えているか、は
このボタンで見る事が出来る
押してみよう

…ひどいことになっている

思った以上に
終わってるな…
このモードのまま、編集する→スマートフォンでの見栄えも良くなる
今の状態で編集すれば
スマートフォンからの
見栄えを良く出来る
パソコンの方の画面は
崩れない?
崩れない
–
酷い部分を
手直ししておこう
HO部分の編集
まず、HO部分をクリック

押したよ
フォントのボタンを押して

値が入力できるようになった
10~30にしようか

これで、
タイトル部分は
見れるようにはなったね

ステータス部分
次はステータス部分だな
–
Shift押しながら、クリックすると
同時選択できるから
STR~16まで選択して

選択できたよ
で、さっきみたいに
「A←→」のボタンを押して
サイズは?
サイズは5~10で!

それから、
コンテナを横に広げて
良い感じにして
こう?

だいたい、そんな感じ
色々行って最終結果
数十分ぐらいの
突貫工事でこんなか

記載していない部分で、主に変更した場所
・性格概要の装飾を縦長に広げる
・台詞欄を上に持ってきて、横向きにする
・全身立ち絵をスマートフォンサイズに縦長に
スマホでも、
崩れているようには
見えなくなったね
デスクトップ(パソコン)で崩れていないかの確認
崩れていない、とは言ったけど
本当に崩れていないかの確認を
念の為にする
デスクトップボタンを
クリックすればいい?

それでOK
良かった、
帯が斜めになっている時点で
デスクトップとスマホ版は
連動していないね

確認できたようで
何より
終わりに
今回はスマホだと崩れる
レイアウトをした場合、
スマホ版を作る方法を紹介した
レスポンシブ対応、
色々やることが多いね
だから、
基本的には四角型とかで
収めがちではあるんだよな…?
誰だよ、
斜めの線とか入れた奴って
自分で思ってる
関連記事
-
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制作ガイド
–
–
–

