いつも【初心者のためのWordpress完全マニュアルブログ】をご覧いただきありがとうございます。
Webサイトは誰でも作れる！このブログでは、Web開発知識や経験のない初心者の方でも、ドラッグ&ドロップなどの簡単操作を中心としたWebサイト作りをStep By Stepでご紹介しています。

このStep By Stepチュートリアルの通りに作っていくだけで、サンプルの様なスタイリッシュなウェブサイトが作れちゃいます！

 前回までのおさらい

Diviテーマ Step By Stepチュートリアル サンプルデザイン:  https://yukifel-divitutorial.com/

Diviテーマの購入はこちら:  https://www.elegantthemes.com

前回までのチュートリアル

• Step1: テーマのセットアップ
• Step2: ランディングページ・ナビゲーションメニューの作成
• Step3: コラム・広告モジュールの使い方
• Step4: メンバープロフィールの作り方
• Step5: カウンターの設置方法
• Step6: 価格表モジュールの使い方
• Step7: コンタクトフォームの作り方

ストック画像オススメ

Pexels:　無料だけどやたらと解像度の良い、クオリティの高いストック画像が著作権フリーでダウンロードできます。ちなみにこのチュートリアルで使っている画像は、著作権を考慮して、大体このサイトから取得しています。

Shutterstock: 有料には有料の良さがある！種類の豊富さとクオリティの高さはお墨付き。ネットサーフィンをしていて、この画像いいなと思った画像はだいたいShutterstockと言っても過言ではないほど、世界で一番有名なストック画像の有料サイトです。

今回でDiviの基本操作チュートリアルシリーズも最後となりました。前回のチュートリアルではDIviのコンタクトモジュールを使ったコンタクトフォームの作り方をご紹介しましたが、今回はいよいよトップページのデザインカスタマイズとしては最後になります、フッターの作り方についてご紹介します。

またおまけとして、Google Mapの挿入の仕方についてもご紹介していきたいと思います。

Footerの作り方

ウィジェットでフッターを作成する

ダッシュボードの外観>>ウィジェットの順にクリックすると、フッターエリアにウィジェットを追加することができます。

このウィジェットを使って、リンク一覧を作成してみます。

まずはフッターエリア#1にヘッダーナビゲーションに使用しているMenuを表示させてみます。

フッター用のメインメニューを作成氏したい場合は、外観>>メニューからトップメニューを作成した時と同じ要領で、フッター用のメニューを作成してください（作り方を忘れたという方は、こちらをクリックすると、詳しい作り方を紹介しています。）。

カスタムメニューというウィジェットをフッターエリア#1にドラッグ&ドロップして、表示させたいメニューを選択します。

タイトルは任意です。

同じ要領で今度は外部リンクメニューを作成して、フッターエリア#2に挿入します。

外観>>メニューから、新しいメニューを作成して(名前は任意ですが、footer_linksという名前をつけました)、カスタムリンクを挿入します。

同じようにカスタムメニューウィジェトをフッターエリア#2にドラッグ&ドロップしたら、今度は先ほど作成したメニューを選択します。

この他のやり方として、広告ウィジェットを使ってリンクを挿入するという方法もあります。

広告ウィジェットを使うと、テキストリンクだけではなくバナーリンクも追加することができます。

フッターのデザインを変更する

では次にフッターのデザインの設定を変更します。

ダッシュボードのDivi>>テーマカスタマイザー>>フッターをクリックすると、フッターのデザインや設定を変更することができます。

レイアウト：　今回のデモでは、フッターエリアを２つしか使っていないので、２コラムのレイアウトを選択しましたが、こちらも任意です。３つ使用している方は、３コラムを選択します。（フッターエリアは最大４つまで使用できます。）

フッター要素：　ソーシャルアイコンを表示にチェックを入れると、フッターにソーシャルアイコンが表示されます。

フッターメニュー：　フッターのテキストカラーなどをデザインを変更することができます。

下部ナビ：　ここでは先ほど表示させてソーシャルアイコンなどの大きさや色を変更することができます。

特筆すべきは、フッタークレジット無効化にチェックを入れると、デフォルトで入っていたElegant Themeのクレジットが表示されなくなるということです。

もちろん自分のクレジットに変更することもできます。その場合は、フッタークレジットを編集という項目を編集します。

次にウィジェットのタイトルのデザインを変更します。

Divi>>テーマカスタマイザー>>追加CSSをクリックして、以下のコードをコピーアンドペーストします、

文字を大きくしたい場合は、pxの数字を変更し、文字色を変更したい場合は、#以下のコードを変更します。

#footer-widgets h4 {
font-size: 28px;　/*文字の大きさ*/
padding-bottom: 30px;
color: #ffffff!important; /* 文字色は#以下のコードを変更する */
}

ウィジェットでフッターを作成すると、簡単な反面、カスタマイズに限りがあります。

フッター作成の方法の一つに、ウィジェットを使わずに、ビジュアルビルダーを作ってフッターを作成するという方法があります。

この方法を使うと、フッター内に地図を挿入したり、コンタクトフォームを挿入したりすることができます。

興味のある方は、こちらをご覧ください。

フッターのソーシャルアイコンの設定

先ほど表示させたフッターのソーシャルアイコンは、Divi>>テーマのオプションのGeneralタブから設定変更することができます。

各ソーシャルアイコンの設定を無効にすると、無効になっているソーシャルアイコンは表示されなくなります。

またその下にある、各ソーシャルアイコンにURLを入れると、リンクの設定をすることができます。

以上で基本的なフッターの作成・設定は終了です。

おまけ: Google Mapの挿入方法

Google API Keyを入手する

まずは最初のステップとして、Google API KeyをGoogleから入手することから始めます。

ここをクリックして、Google Maps APIに飛びます。ページをスクロールダウンしていくと、下記の画像のようにキーを取得するというボタンがあるので、クリックします。

ボタンをクリックすると、規約の同意を求められるので、Yesにチェックを入れて、CREATE AND ENABLE APIをクリックします。

規約に同意すると、取得したAPI KEYが表示されるのでコピーします。

WordPressのダッシュボードに戻って、Divi>>テーマのオプションの順にクリックしたら、Google APIキーの項目に先ほどコピーしたAPIキーを貼り付けます。

トップページにGoogle Mapを追加する

次にトップページに戻って、ビジュアルビルダーを立ち上げます。

ビジュアルビルダーを立ち上げたら、地図を挿入したい場所に新しいセクションを追加します。

通常でもフルワイドでもどちらでも構いませんが、このデモではフルワイドを選択しています。

新規セクションを追加したら、フルワイド地図モジュールを挿入します（通常セクションを選択した方は、地図モジュールを挿入してください）。

モジュールの設定画面のコンテンツタブへ行くと、先ほど設定したAPIキーが表示されています。

またその下の地図の中心の場所には、表示させたい自分のロケーション（オフィスなど）を入力します。

これで設定は全て完了です。うまく表示されていると下記の画像のようにGoogle Mapがトップページに表示されています。

 まとめ

このチュートリアルシリーズを最後までご覧いただきありがとうございました^^

基本操作のチュートリアルは今回で最後となりましたが、サブチュートリアルとして今後も最新アップデート情報やその他Diviに関するチュートリアルを随時アップしていく予定なので、今後ともよろしくお願いします。

今回のチュートリアルでわからなかったことや質問等ございましたら、コメント欄やSNS、またはメッセージにてお気軽にお問い合わせください。

またWordpressに関するテーマやプラグインのチュートリアルのリクエストも大歓迎です^^

それでは次回のチュートリアルでまたお会いしましょう！ See you later<3