サイト内検索

Diviのアイコンモジュールの使い方 – アプリ風フッターを作る(レイアウト無料ダウンロード可)

2021年11月のDiviのアップデートでDiviユーザー待望の『アイコンモジュール』が追加されました。
今までのDiviではアイコンを使おうとした時に、『広告モジュール』を使うもしくはコードを書いて他サイトから読み込むなど、ひと工夫が必要でした。

今回のアップデートで『アイコンモジュール』が追加されたことで、モジュールを置くだけでアイコンを簡単に表示できるようになりましたので、よりDiviの利便性が上がりましたね。

今回は新しく追加された『アイコンモジュール』を使った、下の画像のようなアプリ風フッターの作り方を解説します。

アイコンモジュールで作成したアプリ風フッター
アプリ風フッター

モバイルでサイトを見た時に、画面下にこのようなメニューがあれば使いやすいですし、ネイティブアプリのような見た目で少しおしゃれじゃないですか?

それではそんなアプリ風フッターの作り方を解説していきます。

Diviのアイコンモジュールの使い方 – アプリ風フッターを作る方法を動画でご覧になりたい方はこちらからどうぞ!

グローバルフッターを設定

まずはWordPressのダッシュボードから『Divi』>『テーマビルダー』を選択して、テーマビルダーを開きます。
すると『グローバルフッターを作成』と出ますので、こちらを選択してグローバルフッターを作成します。

Diviのテーマビルダーでグローバルフッターを作成

『テーマビルダー』とはサイトのパーツをDiviで作れるツールです。

ヘッダーもフッターもサイドバーの位置も全部Diviで作れてしまうため、テーマビルダーがあれば、もうWordPressのヘッダーなどの設定は2度と開く必要が無くなります。

テーマビルダーの使い方はこちらの記事で解説していますので、ぜひ合わせて読んでみてください。

Diviのテーマビルダーの使い方

行を挿入

新しくグローバルフッターを作成すると、何もない真っ白な編集画面が出てきます。

まずは行を挿入していきます。

今回のレイアウトはアイコンが5つ横に並んでいますので、5列の行を挿入したらいいんじゃないかと思うかもしれませんが、5列ではなく1列の行を追加してください。

一列の行を選択

アイコンモジュールを追加(グローバルプリセットで管理)

行を挿入できたらモジュール一覧から『アイコンモジュール』を選択します。

アイコンモジュールを選択

アイコンモジュールの使い方はとても簡単です。

コンテンツタブからにはたくさんのアイコンが最初から入っていますので好きなものを選びます。

デザインを変えたい場合はデザインタブです。
色・大きさ・上下左右の余白・ボーダー・シャドウなどはデザインタブから変更できます。

デザインタブの設定できる項目はテキストモジュールなど他のモジュールと同じですので、Diviを使える方ならそこまで難しい設定はありません。

まずは1つアイコンを追加します。

今回はさらにアイコンを4つ追加して合計で5つのアイコンを使いますので、Diviのグローバルプリセットを使って5つのアイコンを一気に編集していきます。

グローバルプリセットの使い方に関してはこちらで紹介していますので、ぜひこちらの記事も参考にしてください。

DiviのGlobal Presets(グローバルプリセット)の使い方【便利すぎ】

プリセットを新規作成

グローバルプリセットを使えばアイコンのデザインを一つ一つではなく、複数のものをまとめて編集することができます。とても便利ですね。

まずはプリセットを新規作成します。

アイコンモジュールの設定画面から『Preset 初期設定』>『CREATE NEW PRESET FROM CURRENT STYLES』を選択します。

プリセットを新規作成

するとプリセットの名前の入力を求められるので、分かりやすい名前を決めてください。
今回は「アイコンプリセット2」としました。

緑のボタンで決定すると新規プリセットが作成されます。

プリセットの名前を決める

モジュールの設定画面がグレーになればプリセットの作成成功です。
続いてプリセットを編集してアイコンのデザインを決めていきます。

『デザイン』>『アイコン』>『Icon size』を42px

『デザイン』>『アイコン』>『アイコンの色』を#0C71C3

にそれぞれ設定します。

プリセット編集画面

プリセットを設定し終えたら、保存してください。

保存したら、作成したアイコンを5つになるまでコピーしていきます。

コピーした後はそれぞれのアイコンを違うものに変更していきます。
アイコンモジュールでは検索もできますので、好きなアイコンを選んでください。

最初のアイコンをコピーして5つのアイコンを作成

CSSを追加

5つのアイコンを作成できたら、次はCSSを入力します。

CSSの量はそこまで多くないのですが、同じように作ってみてどうしても上手くいかない場合もあると思います。
安心してください!今回解説したレイアウトをダウンロードできるようにしていますので、ぜひ使ってください。

レイアウトのダウンロードはこちら

また、DiviでのCSSの追加の仕方はこちらの記事で解説していますので、よかったら参考にしてください。

DiviでカスタムCSSを追加する4つの方法

それではどのようにCSSを追加していくのか解説していきます。

『行の設定』>『列の設定』>『詳細』>『カスタムCSS』を選択します。

そして『カスタムCSS』のメイン要素に以下のコードを入力してください。

display: flex;
justify-content: space-evenly;
カスタムCSSを追加

これでCSSの入力は完了です。

スタイルを調整

まずは画面をスクロールしても常にフッターが画面下に表示されるように、スティッキーオプションを設定します。

『セクション設定』>『詳細』>『Scroll Efects』>『Sticky Position』を選択して

『Sticky Position』をStick to Bottomに設定してください。

次は余白を調整します。

『セクションの設定』>『デザイン』>『余白』でマージンのTopとBottomを0pxにします。
また、ビジュアルビルダーで余白をドラックしても、同じようなことができます。

『セクションの設定』>『デザイン』>『余白』でパディングのTopとBottomを15pxにします。

最後に『行の設定』>『デザイン』>『余白』のパディングとマージンを0pxにします。

ここまですると何故か行のパディング・マージンを0pxにしたのに、下に余白が残っていると思います。
そんな時は、『行の設定』>『デザイン』>『サイズ変更』>『使用カスタム溝幅』を”はい”にしてください。
そして『列間隔』を1に設定します。

これで余計な余白は消えたと思います。

最後に、フッターが分かりやすいようにセクションの背景に色をつけたいと思います。
『セクションの設定』>『背景』から背景の色を変えられます。今回は#f2f2f2と設定しました。

フッターのスタイルを調整

モバイルのスタイルを調整

次はモバイルのスタイルを調整します。

ビジュアルビルダーでモバイル表示にしてみると

モバイルで表示するとアイコンが真ん中に寄っている

なんだかアイコンが真ん中に寄っていますよね?

これは行の幅がデフォルトでは80%に設定されているからです。

『行の設定』>『デザイン』>『サイズ変更』で最大幅2つを100%に設定します。

これでいいバランスでアイコンがモバイルでも表示されるようになります。

最後にアイコンプリセットの編集でアイコンの色を青にしたら完成です!

アイコンの色や大きさは好みで変えてみてください。

各アイコンにリンクを設定することで、フッターメニューとして使うことができますので、皆さんぜひ試してみてくださいね。

まとめ

いかがでしたか?

今回新しく追加されたアイコンモジュールは他にもいろんな使い道があるので、皆さんぜひ活用してください。

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

最後まで読んでいただきありがとうございました。

それではまた!

Naomiです

このサイトを運営してるナオミです。エンジニア歴13年、海外在住歴18年です。
WordPressの情報やハッキングを防ぐ脆弱性の情報と自分の海外での生活の一部を無料のメルマガで配信しています。

目次

コメントする

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

WordPressの最新情報が
毎週届く無料メールマガジン

DiviやElementorの情報だけでなく、脆弱性が見つかったプラグインやテーマのリストも毎週届きます。セキュリティの強化につながります。

管理人のナオミが書くメルマガ
海外でエンジニア歴10年以上
DiviとElementorに精通