そのDiviの質問
Diviを使ってる人にしてみませんか?

こんにちは、ナオミです。
私が運営する『TOFUラボ』ではDiviを使ってる人が集まっています。

こんにちはナオミです!

*再生中だと動画はそのままスクロールしてもついてきますので、動画を止めずにスクロールしてみてください。

Diviの重なったモジュールを選択出来るレイヤーズビュー(Layers View)【効率UP】

Diviビジュアルビルダーでページをデザインしていると、モジュール同士が重なってどのモジュールをクリックしているのか分からなかったり、もう一方をクリックしたくてもできなくてヤキモキしたことないですか?

Diviのモジュールが重なってしまう。
モジュールが重なって下のモジュールが選択しづらい

そんな時に、非常に便利な機能がDiviにあるんです!

Diviのレイヤーズビュー(Layers view)を起動

皆さん、このDiviの見慣れない機能なんだか分かりますか?
これはDiviのページ編集で非常に便利な機能『レイヤーズビュー』です。

これがあれば、最初に記載した悩みやビジュアルビルダーでの編集がさらに便利になります!
今回はこの機能レイヤーズビューについて詳しく解説していきます。

レイヤーズビューの解説と使用用途

Diviのレイヤーズビュー(Layers View)ナビゲーション

レイヤーズビューの中にそれぞれ『セクション』が記載されています。
ワイヤーフレームだとわかりやすいのですが、それぞれのセクションのタイトルとリンクしています。
それぞれセクションタイトルをクリックすることで、そのセクションまで自動で行くことができるんです!

Diviのレイヤーズビュー(Layers View)でモジュールを選択

そして、そのセクションを細分化した『行』・『列』・『テキスト』モジュールなどを表示することも可能なんです。
細分化したモジュールにカーソルを合わせるとそのモジュール部分がハイライトされます。
さらに、それぞれの設定ボタンをクリックするとテキストなどを編集することもできるんです。

では、このレイヤーズビューは一体どういったときに使用するのか分かりますか?

そういった時は、通常だとワイヤーフレームモードに移動してモジュールを選択するのが一般的だと思います。
ただ、ワイヤーフレームモードの場合編集しても編集後のページデザインがすぐに分からないので不便でした。
さらに、ワイヤーフレームの欠点として作成するページが長くなりモジュールが増えれば触れるほど、フレームでしか認識できないのでどこに何があるかが分かりづらいことがありました。

そういったときにこのレイヤーズビューを使用すれば、ビジュアルエディター画面のままで任意のセクションの選択がしやすくなります。
さらに、その場で編集することができるんです!
もう、これがあればどんなデザインにしてもモジュールを選択できない!?何てことはなくなります。

さらに、このレイヤーズビューの便利なところはそのセクションごとの移動も可能なところ。
例えば『お問い合わせ』セクションがページ最下部にあったとしても、レイヤーズビュー内で移動させれば、あっという間に上まで簡単に移動できます。

「レイヤーズビュー」使用方法

Diviのレイヤーズビュー(Layers View)のアイコン

レイヤーズビューの表示の仕方は、ビジュアルビルダー編集画面の右下にある3つのアイコンの内真ん中のアイコンをクリック。

モジュールからレイヤーズビューを表示

さらに、上記画像の様に各モジュールを右クリックしたときに出てくる『Go to Layers』からも表示させれます。

そして、画像の様に各モジュールから右クリックでレイヤーズビューを表示させた場合、レイヤーズビュー画面にそのモジュールが選択された状態からスタートできます。

まとめ

Diviでページを作成しているときに、ちょっと不便だなと感じていた細かい部分をレイヤーズビューはしっかり補てくれてます。
任意のセクションに自動で移動出来たり、重なってクリックしづらいモジュールをその場で選択できるようになると、制作が本当に便利になりますよね!
直感的にページ作成ができるDiviならなおさらです。

こういった細かい改善ができるのも『世界で一番使われてるWordPressテーマ』であるDiviらしいところですね。

Diviのことをもっと深く知りたい方は、Diviの使い方完全ガイドをご覧ください。


目次

そのDiviやWordPressの質問、
実際に使ってる人にてみませんか?

TOFUラボはDiviを使う人が集まるサロンです。
メンバーは120人を超えます!