メニューの固定などがとても簡単になりました！
おしゃれなサイトを見ると、画面をスクロールさせてもメニューやボタンや他の要素が残る時がありますよね（たまに広告も 笑 ）。今回のDiviのアップデートで、そんな素敵な機能を簡単に実現できるようになりました。
ご参考：「Diviとは？」 こちらの記事でご紹介しています
https://3shimaipapa.com/divi-introduction/
どんな機能？
Divi Sticky Optionsとは、ページを上下にスクロールするときにブラウザービューの上または下に、メニューやヘッダーやボタンなどの任意の要素を貼り付けることができる機能です。
言葉だけだと、少しイメージしにくいですよね。公式動画を載せますね。英語なのですが、画面イメージを見ると、どんな機能か分かると思います(^^)
サイトを訪問してくれた方が画面をスクロールしても、お知らせや購入ボタンや広告といった重要な情報を表示したままにするようなことが簡単に実現できます。
機能の例をご紹介
Diviの新しいオプションでできることはたくさんあります。デモをいくつかご覧ください。
上、下、または両方に固定
Divi Sticky Optionsの使用方法はとっても簡単です♫いくつかの選択肢から選ぶだけ。
【トップに固定】
これにより、下方向にスクロールしても、要素がブラウザビューポートの上部に固定されます。ヘッダーメニューに最適ですね。
（画像・動画：公式サイトより）
【下に固定】
これにより、上方向にスクロールしたときに、要素がブラウザビューポートの下部に固定されます。これは広告や購入ボタンなどに使えますね。
【スタイルの変更でもっとオシャレに】
このように、2つの異なるスタイルを持つことができます。
たとえば、このビデオでは、メニューの背景色オプションのスティックスタイル編集を有効にしています。次に、スティッキースタイルにオレンジ色の背景色を割り当て、標準スタイルに透明な背景色を割り当てました。下にスクロールしてメニューがスティッキーになると、背景色がオレンジ色に変わります。このオレンジ色の背景色により、さまざまな要素をスクロールしてもメニューリンクが読みやすくなります。
終わりに
今回の機能向上で、 WordPress テーマDiviがもっと使いやすくなりました。Webページ作成に興味がある方、ぜひ試してみてくださいね。 （このページをご覧になる際、常に広告が表示されていたと思いますが、Divi Sticky Options機能を使っています。画面をスクロールしてもこの広告が残ることが分かるかと思います。）
画像出典元：Divi公式サイト
■広告です
もしDiviに興味をもって下されば、下記リンクから会員登録（年間約1万円で各種機能/レイアウトが使いたい放題となります）をお願い致します。
私は「プログラミング教室等に通うことと比較すればとても安い♪」と感じ購入しました。公式サイトには、実際の使用を体感できるデモページもございますので、ぜひ試してみて下さい。この記事作成時点では、気に入らなければ30日以内ならお支払い金額を返金する制度もあります♬
下記リンクは私にも収入が入るリンクですので、記事作成の励みとなります。
応援よろしくお願い致します。
“Disclosure: Some of the links in this post are “affiliate links.” This means if you click on the link and purchase the item, I will receive an affiliate commission.”
同じカテゴリの記事はこちら
Divi の ビジュアルビルダー が高速になりました！
Webサイト作成はHTMLやCSS等が必要となり、少し手間がかかりますが、 Divi の ビジュアルビルダー ならば、まるでプレゼン資料を作っているかのように直感的に作成することができます。そのビジュアルビルダーがパフォーマンスの面で大幅に進化しました。少しご紹介させて下さい。
Webデザイン Diviの新機能：Responsive preview system
Webデザインで大事なレスポンシブデザイン（PCやスマートフォンなどに合わせた柔軟なデザイン）、「スマートフォン」や「タブレット」にたくさんの画面サイズがあることで、やはりデザインが少し崩れてしまうリスクがあリマス。今回の Divi の新機能はそのリスクをグッと軽減できますよ。
Divi Layers View : Diviにとても便利なレイヤーパネル機能が加わりました
WordPress の海外テーマ Divi 、実際のWebサイトイメージを見ながら直接編集できることができる、とても便利なテーマです。そして、レイヤータイプでの編集も可能。さらに今回「 レイヤーパネル 」という機能が加わり、実際のWebサイト画面を見ながらレイヤーでの編集ができるようになりました。
