STUDIOの便利な機能5選

最近はSTUDIOでサイトを作っており、作成時に便利だった機能を5つまとめました。

① PCとモバイルで表示を変える

② カルーセルを設定する

③ hover時に表示を変化させる

④ 何度も使う要素はSymbolで共通化

⑤ レスポンシブのブレイクポイントを変更する

① PCとモバイルで表示を変える

上の画像を選択し、左上の目のアイコンでタブレットとモバイルのチェックボックスを外します。

次に下の画像を選択し、「基準」のチェックボックスを外します。

② カルーセルを設定する

ダッシュボード>CMS からモデルを追加します。

「記事タイプ」を選択して新規モデルを作成します。

作成したモデル内に記事を作成し、カルーセルに表示させたいカバー画像を設定します。

左のメニューから、CMSを選び、上から2つ目を選択します。

要素の左上のチップをクリックすると、どのモデルと表示数を設定できます。

画像のみの表示にしたい場合は、この部分↓を消したらOKです。

③ hover時に表示を変化させる

好きなようにボタンを作成し、選択した状態にします。

hoverにチェックをつけます

チェックを付けた状態でデザインを変更します

画像を2つ重ねることで、hoverで画像が切り替わるようにすることもできます。

④ 何度も使う要素はSymbolで共通化

ヘッダー、フッダーなど複数のページで共通して利用するパーツはシンボル化すると、全ページを修正する必要がなくなり楽です。
シンボル化したいパーツを選択・右クリックし、シンボル化を選択します。

⑤ レスポンシブのブレイクポイントを変更する

STUDIOではデフォルトで3種の画面幅設定ができ、タブレットとモバイルで2箇所のブレイクポイントがあります。

ブレイクポイントは「ブレイクポイントの編集」から確認、編集できます

編集をクリックすると、それぞれのブレイクポイントを変えられたり、タブレットとPCの中間の「スモール」、モバイルよりも小さい「ミニ」のブレイクポイントを追加することもできます。

ブレイクポイントの編集は全ページに反映されるので、注意が必要です。

おわり