DIVI FEATURES

【神機能】Webサイト制作を10倍楽にするDiviの使い方5選。

INTRODUCTION

WordPressテーマDiviはコードを書かずに直感的な操作でWebページが作れるのが特徴です。

高機能でカスタマイズ性が高く、アップデートで常に新しい機能が追加されています。

今回は色々ある機能の中からWebページ制作の作業効率が格段に上がる使い方ができるおすすめの機能を紹介していきます。

当ブログもDiviテーマを利用して作成しています。

CONTENTS

>> Diviの神機能5選

>> まとめ

>> デザイン関連記事

*目次をタップで各コンテンツに飛べます

DIVI 5 FEATURES

Diviの神機能5選

今回紹介するのは以下の5つの機能です。

ここ2年以内に追加された新しい機能がほとんどで、大きく進化してかなり使い勝手がよくなっています。

Webページ制作の効率化に大きく関わる機能は前の3つです。

後ろの2つについてはページクオリティの底上げにつながる機能で、すべて外部プラグインなしで使えます。

Theme Builder (テーマビルダー)

テーマビルダーはカテゴリやタグ別にページを指定してそれぞれヘッダーやフッターを管理できる機能です。

テーマビルダーについて

同じサイト内にジャンルが違う複数カテゴリのコンテンツがある場合などに便利な強力な機能です。

メインはデザイン系のWebページだけどブログ用のページも欲しい。なんていうときに別のスタイルを作って運用できます。 

404ページも好きなスタイルにカスタマイズできるようになりました。

Library (ライブラリ)

セクションなどの要素の内容をコピー・保存していつでも同じ内容を呼び出せるテンプレートを作成する機能です。

グローバルライブラリ機能について

グローバルに指定するとどこに貼っても同じものを複製でき、内容を変えればすべてのページでライブラリの変更が反映されます。

WordPressの機能でいうウィジェットを使いやすくした感じです。

Googleアドセンスのコードや共通で使う事の多いヘッダー・フッターのスタイル管理に便利です。

ライブラリはテーマビルダーとよく組み合わせて使われる機能です。

Global Preset (グローバルプリセット)

フォントの設定やボタンデザインなどをスタイルとして保存して、ワンクリックで他の要素にもスタイルが適用できるようにする機能です。

テーマのカスタマイズで文字サイズなどを一括で変更できますが、この機能で更に細かく各要素のスタイルを設定できるようになりました

例をあげると左がDiviのデフォルトのボタンスタイルですが、プリセットを使うとワンクリックで右のスタイルに変更できます。

文字やリンクは保ったままフォントのサイズやパディング、ボタンの色などのスタイルすべてが反映されます

今までは他のところからコピーしたりライブラリから呼び出したりしていましたが、その必要がなくなりました。

上記のボタンスタイルを実際に変更する手順

グローバル機能なので、変えたスタイルと同じスタイルのものは全ページで変更が適応されます

大幅なデザイン変更したいなと思ったらプリセットのスタイルを修正するだけで全ページの同じスタイルを変えられます。

この機能が登場して作業に必要な時間が大幅に短縮されました。

 

Hover Effects (ホバーエフェクト)

マウスカーソルが指定の要素上に乗ったときのアクションを指定できる機能です。

スマホの場合でも指が上に乗った時に変化するのでインタラクティブなページを作ることができます。

例えば当ブログでは、関連記事に少しだけ拡大するホバーエフェクトを使っています。

<拡大するホバーエフェクトの例>

【超簡単】5分でできるDIVIのインストールとセットアップの仕方

Diviの購入からWordpressでのセットアップの仕方までを画像付きでわかりやすく説明しています。

ホバーした時に背景をちょっと暗くするなんていう使い方もできます。

<影をつけるホバーエフェクトの例>

【2020年版】定番ストックフォトおすすめ6選を比較検証

使い方は色々です。(他の記事も気になったら読んでみてください)

動きを与えることでクリック(タップできる)対象であることがわかるので、結構重要な要素だったりします。

Sticky Options (スティッキーオプション)

任意の要素をスクロール追従させられる機能です。

ついにスクロール追従が外部プラグインなしでも使えるようになりました。

カスタマイズ性が高く使いやすいです。機能の特徴をまとめました。

特徴

・同じ範囲でも複数個設定可能

・追従位置指定できる (画面上部/下部/両方)

・追従範囲指定できる (<body>/列/セクションなど)

文字でも画像でも好きな要素を好きな数だけ、追従範囲を指定して設定できます。

買切りプランは20%OFFに

複数個設定している場合に、追従の位置が被っても被らずにスタックされるのが最高です。

【超簡単】5分でできるDIVIのインストールとセットアップの仕方

Diviの購入からWordpressでのセットアップの仕方までを画像付きでわかりやすく説明しています。

MATOME

まとめ

Diviのおすすめ機能を紹介しました。

ページ全体を簡単に管理できる機能が充実したので、スタイル管理が重要なWebサイトにも、ページやカテゴリ管理が多くなるブログにも使いやすいテーマになりました。

日本語でも使えてかなり便利なのでWebページ・ブログ作成の際は利用してみてください。

More of DESIGN

デザイン関連記事

デザイン関連の記事をピックアップして紹介します。

併せて読んでみてください。

【2020年版】定番ストックフォト6選を比較検証。おすすめはどれ?

定番のストックフォトを項目別に比較しています。

【初心者も簡単】YouTubeの再生回数を上げるサムネイルの作り方。

サムネイルの作成方法を解説しています。

【動画編集】Premiere ProとAfter Effectsの違い。初心者が知っておきたい6つの特徴について解説。

動画編集で使うPremiere ProとAfter Effectsの違いについて説明しています。

【動画編集】Premiere「Rush」と「Pro」8つの違いと使い方を解説。

Adobeの動画編集アプリPremiere RushとProの違いについて説明しています。

IllustratorとPhotoshopの違いを12の実例で比較。安く使えるセットプランも紹介。

IllustratorとPhotoshopの違いについて説明しています。

【超便利】Adobe Stockとは? 初月無料&利用する5つのメリットを解説。

Adobe Stockを利用するメリットについて書いています。

【2020年版】Adobeのおすすめプランは?7の職業・デザイン別にコンプリートプランユーザーが解説。

Adobeを始める人にどのソフトとプランを使うべきかを書いています。

【無料・有料8選】おすすめフリー素材・画像イラストストックサイト【商用利用可】

無料から有料までオススメの画像サイトをまとめました。

【特典】2ヶ月間無料でAdobe CC・Stockのプランを利用する方法。これから始める方も。

利用しているプランを2ヶ月間無料にする方法について書いています。

【特典】Adobeのプランを2ヶ月無料で利用する方法

既存ユーザーも新規ユーザーも2ヶ月無料でCC/Stockを利用する方法についてです。

【商用利用可】おすすめフリー素材・画像サイト

商用利用もできるフリー素材を入手できるおすすめサイトを紹介しています。

Adobe Photoshopでできる10のこと

Photoshopでできるデザインや機能について解説しています。

【UI/UX】Adobe XDでできる6のこと

Adobe XDでできるデザインや機能について解説しています。

【3D】Adobe Dimensionでできる9のこと

Dimensionでできるデザインや機能について解説しています。

Pin It on Pinterest

Share This