The Big Divi Icon Update!
何百もの新しいアイコンから選択して、お気に入りのアイコンを簡単に見つけることができます
2021/11/4に、Diviのアイコンオプションが進化しました。何百もの新しい アイコン を選択することができるようになりました。また、ビルダーのアイコンピッカーが改善されて、探しているアイコンを簡単に見つけられるようになりました。
ご参考:「Diviとは?」 こちらの記事でご紹介しています
https://3shimaipapa.com/divi-introduction/
目次
・はじめに
・何百もの新しいアイコンが加わりました:FontAwesomeと連携!
・アイコンピッカーがしっかり進化
・Diviモジュールで簡単デザイン
・SNSアイコンにもしっかり対応!
・おわりに
はじめに
英語ですが、公式サイトでの紹介ビデオはこちらです。画面イメージもあるので、サラッと眺めると今回の更新内容が分かりやすいと思います。
(動画・画像の出典元:Divi公式サイト)
何百もの新しいアイコンが加わりました:FontAwesomeと連携!
Diviのアイコンモジュールを選択すると、何百もの新しいアイコンがリストに追加されていることに気付くと思います。これは、FontAwesomeアイコンセットがDiviのネイティブアイコンと統合されたためです。DiviアイコンとFontAwesomeアイコンの間でフィルタリングもできてしまいます。
そこまで便利になると、少し気になることはサイトが重くなってしまうことですよね。でも、そのこともしっかりと対応してくれています。
FontAwesomeアイコンファイルは、FontAwesomeアイコンを使用した場合にのみ読み込まれるため、今回の更新によってWebサイトのパフォーマンスが低下することはありません。Diviの動的CSSシステムのおかげで、Diviは、使用するモジュール機能に基づいてWebサイトのスタイルを設定するために必要なCSSのみをロードするので、重くならないとの説明があります。助かりますね。
新しく改良された「アイコンピッカー」が便利です
このアップデートには、アイコンを閲覧するための改善されたインターフェースも含まれています。
・アイコン検索
アイコンピッカーに検索フィールドが追加されました。すべてのDiviアイコンとFontAwesomeアイコンには関連用語がタグ付けされているため、リストを検索して探しているアイコンの種類をすばやく見つけることができます。
・アイコンフィルター
アイコンピッカーは、さまざまなアイコンスタイルやフォントファミリーでフィルターすることもできます。検索とフィルタリングを組み合わせて、ターゲットアイコンに実際に焦点を合わせることができます。
・拡張アイコンピッカー
展開アイコンをクリックすると、アイコンピッカーが全画面表示になります。リストをスクロールすると、一度に多くのアイコンを表示できるようになりました。展開されたモーダルでは、アイコンも大きなサイズで表示されます。
新しいDiviアイコンモジュール:デザインも自由自在です。
Diviのモジュールセットに新しいアイコンモジュールが追加されました。これで、今までのようにBlurbモジュールを使用してアイコンをテキストとペアリングすることなく、ページにアイコンを簡単に追加できます。
新しいアイコンモジュールには、Diviユーザーが使い慣れているすべてのデザイン設定が使用できます。アイコンをカスタマイズできるので、サイトのイメージに合わせることも簡単ですね。
SNSアイコンもしっかり対応
今回のアイコン関連アップデートには、ソーシャルメディアアイコン(SNSアイコン)がしっかりと含まれています。SNSフォローモジュールも更新し、36の新しいソーシャルネットワークから選択できるようになりました。
(以前担当させて頂いたクライアント様からSNSフォローボタンのご要望があった時に、少し手作業で対応していたため、個人的に嬉しいアップデートでした (^^) )
おわりに
アイコンの進化、とても嬉しいですね。
今回も読んで下さり、ありがとうございました。
■広告です
もし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.”
同じカテゴリの記事はこちら
Webデザイン Diviの新機能:Responsive preview system
Webデザインで大事なレスポンシブデザイン(PCやスマートフォンなどに合わせた柔軟なデザイン)、「スマートフォン」や「タブレット」にたくさんの画面サイズがあることで、やはりデザインが少し崩れてしまうリスクがあリマス。今回の Divi の新機能はそのリスクをグッと軽減できますよ。
Divi 新機能☆ Sticky Options : メニューの固定などがとても簡単に♬
おしゃれなサイトを見ると、画面をスクロールさせてもメニューやボタンや他の要素が残る時がありますよね(たまに広告も 笑 )。今回の Divi のアップデートで、そんな素敵な機能を簡単に実現できるようになりました。機能の実例や使い方についてご紹介します。
Divi Layers View : Diviにとても便利なレイヤーパネル機能が加わりました
WordPress の海外テーマ Divi 、実際のWebサイトイメージを見ながら直接編集できることができる、とても便利なテーマです。そして、レイヤータイプでの編集も可能。さらに今回「 レイヤーパネル 」という機能が加わり、実際のWebサイト画面を見ながらレイヤーでの編集ができるようになりました。