Webサイト構築

【Studio】グループ化でつまずくポイントと対処法

当サイトはアフェリエイト広告を利用しています
カッパ子
カッパ子

グループ解除したらデザインまで消えた…

ユウ
ユウ

親ボックスのデザインは解除すると消えちゃうよ!

グループはまとめるだけの機能といえばそうなんですが、扱う際の注意点やテクニックは意外と多いです。

何気なく操作して失敗してしまったという経験もあるのではないでしょうか。

本記事では、Studioのグループ化でつまずきやすいポイントやテクニックについて解説します。

グループ解除

まずはグループ解除について。

やり方は簡単で、親ボックスを選択して右クリックメニューの「グループ解除」かショートカットキーのCommand(Ctrl)+ Shift + Gを押すだけです。

注意しておかなくてはいけないのが、グループ解除すると親ボックスは完全に消滅すること。

中身の子ボックスたちは残りますが、親ボックスに設定していた背景色や余白、並び方、そしてリンクなども一緒に消えてしまいます。

グループ解除する時は、元に戻す時のことを考えて慎重に行うようにすると安全です。

画像のリンク設定

画像がimgモードになっているとリンクを設定することはできません。

しかし、画像の幅に合わせて勝手に高さを調整してくれるので、バナー画像はできればimgモードで設定しておきたいところですよね。

そんな時は画像をグループ化すれば解決します。

親ボックスが新しく生成されるので、そちらにリンクを設定します。

グループ化は単体のパーツに対しても出来るので、見た目は変わらないままクリックできる状態になります。

目的の要素を選択できない

グループを重ねていくと、レイヤーの階層はどんどん深くなります。

マトリョーシカのように箱の中に箱が入っていく構造なので、内側の要素ほど何度も何度もクリックして選ばなくてはなりません。

その場合はCommand(Ctrl)キーを押しながらクリックすると直接選択できます。

レイヤーパネルから選択する方法も確実なので、状況に応じて使い分けるとよいでしょう。

また、レイヤーパネルならグループの全体像も把握できます。

不要なグループは編集の邪魔でしかないので、見つけ次第解除しておきましょう。

思った通りに並ばない

グループ化したのに、要素が思ったように並ばない。

並び方を決めるのは、並べたい要素をまとめている親ボックスの設定です。

子ボックスを選んでいたり、階層が一つ上のグループを選んでいたり、そもそも設定する場所が違っていたら、どうやっても要素の並び方は変わりません。

特にグループを重ねていると、どこを設定していいか分かりにくくなってしまうので、レイヤーパネルで要素が入っているグループはどこか、自分が選択しているグループは正しいかよく見ておきましょう。

まとめ

グループ化に関するつまずきやすいポイントについて解説しました。

ちょっとしたことですが、知ってるだけで解決することも多いので、参考になれば嬉しいです。

ただまとめるだけと侮るなかれ。

  • グループ解除は設定も一緒に消えるので注意
  • imgモードの画像はグループ化すればリンクを設定可能
  • 深い階層はCommand(Ctrl)クリックかレイヤーパネル
  • 並び方と配置は正確な親ボックスで設定しないと意味がない