前回のチュートリアルでは、ランディングページとナビゲーションメニューを作成しました。今回は、実際にコンテンツを作成しながら、コラムの使い方や、広告モジュールの使い方についていつものようにStep By Stepでご紹介していきたいと思います。

今回作成するコンテンツは、サンプルデザインのこの部分です(｀・ω・´)

３コラムに、広告モジュールを挿入してみよう

①　新しいセクションの作成

ちょっと見辛いですが、水色の+ボタンにカーソルを当てると新たなセクションを追加というメッセージが出ます。そのままクリックして、新たなセクションを追加します。

今回は、コラムを使いたいので、通常をクリックします。

②　３コラムの作成

通常をクリックすると、次に行を挿入というウィンドウにジャンプします。

目的に合わせて、お好きなデザインを選んでいただいて構いませんが、ここでは、３コラムを選択してみます。

③　広告モジュールの挿入する。

モジュールを挿入するというウィンドウの中の広告をクリックして、広告モジュールを作成します。

④　コンテンツのカスタマイズ。

まずは、コンテンツを作成していきます。

今回、コンテンツは右揃えにしてみました。

広告モジュールにリンクをつけたい人は、リンクのセクションにURLを挿入します。

URLを開くの設定で、新しいタブでを選択すると、リンクをクリックした時に新しいタブで開いてくれます。個人的には新しいタブでリンクを開くのが好みですw

次にイメージとアイコンの設定を行います。

イメージをアップロードすることもできますが、今回はデフォルトのアイコンを使ってみます。

アイコンを使用をはいにすると、小さいアイコンがたくさん出てくるので、好きなアイコンを選択してください。

次に背景を設定します。今回は、ソリッドカラーを背景に設定してみます。

Step2で紹介したように、背景の画像を設定したり、背景の画像の上から半透明のグラデーションを重ねることもできます。お好みでカスタマイズしてください。

どうやってやったから忘れっちゃったっ (・ω<)って方は、ここをクリックして復習をw

④　デザインのカスタマイズ。

イメージとアイコンのデザイン変更。

サークルアイコン：はいにすると、丸の中にアイコンが表示されます。今回は、いいえにしていますが、こちらもお好みでどうぞ。

画像/アイコンの配置：トップにすると、アイコンの下にテキストが表示されるようになり、左にすると、アイコンの右にテキストが表示されるようになります。

アイコンフォントサイズを使う：はいにすると、アイコンのサイズを下記のように変更することができるようになります。

テキストの色：これは違うデザイン設定で、ヘッダーテキスト、ボディテキスト個別にもっと詳しく色を設定することができるので、明るいでも暗いでもどちらでもいいです。

テキスト方向：ヘッダーテキストを中央寄せにしたいので中央に設定していますが、ここを中央にすると、全てのコンテンツが中央よせになってしまいます。先ほど、コンテンツの作成の時に、コンテンツを左寄せにわざわざ設定したのはこのためです。

ヘッダーテキストとボディテキストについては、 Step2で解説したので飛ばします。

ちなみにフォントの設定についてですが、残念なことにDiviは元々英語コンテンツを想定して作られているので、日本語オリジナルフォントが搭載されていません。。

特にこだわりがない人は、デフォルトフォントか、英語フォントでも変更すると多少は変わります、

もしすごくこだわりたい人でしたら、こちらのチュートリアルでGoogle日本語フォントの導入の仕方について紹介していますので、興味のある方はのぞいてみてください。

境界セクションでは、ボーダーを使うをはいにすることによって、広告モジュールの周りを線で囲むことができます。線の太さや色もお好みで変更できますが、個人的にあまりに好きではないので、今回はいいえにしていますw

次は大事なポイント、余白です！

ここでモジュールの余白を設定することができますが、画像をみてみるとわかる通り、パディングとマージンという２つのセクションがあります。

パディングとは、モジュールの内側の余白のことで、マージンとはモジュールの外側の余白のことをさします。

今回は、各セクションを最終的にくっつける予定なので、マージンの上下は0（右左は空白にしてください。デザインが崩れます）、モジュール内の余白を30pxに設定してみました。こちらもお好みでどうぞ。

デザインのカスタマイズが終了したら、緑のチェックマークをクリックします。

上の私が使った設定をそのまま使った人は、下の画像のようなデザインになっていたら正しくカスタマイズできています^^

あくまでサンプルなので、みなさんの目的やデザインに合わせて自由にカスタマイズしてください。

⑤　モジュールを複製してみます。

ぶっちゃけ、後２つも一から設定して作るのはめんどくさいですよね。そもそもフォントのサイズがどうだったかとか細かい設定なんて覚えてないし、、という方に朗報です。Diviではモジュールやコラムを複製することができます（｀・ω・´)

やり方はとっても簡単。下の画像のピンクで囲ってあるグレイのアイコンをクリックするだけ。

ちなみにグリーンの同じアイコンをクリックすると、コラムを複製することができます。

複製すると、下にコピーができますが、ドラッグアンドドロップで簡単に移動させることができますので、ご安心を。

２つコピーして移動して、下記の画像のように並べてみましょう。

あとは、いつものように設定アイコンをクリックして、アイコンやタイトル、コンテンツを編集するだけ！デザインをカスタマイズする必要はありません。

⑥　コラムのカスタマイズ。

次にコラムをカスタマイズしてみます。今回はサンプルのように、幅をフルワイドに、モジュール同士の余白をなくしてくっつけてみます。

今度はグリーンの設定アイコンをクリックして、コラムをカスタマイズします。

デザインタブから、サイズ変更をします。

この行を全幅にする：コラムがフルワイドになります。（画面横幅いっぱいに表示されるということ）

カスタム幅を使う：幅を自分で設定することができます。

使用カスタム溝幅：はいにすることによって、各コラムの間の余白を設定することができます。１にすると、コラム間の幅が無くなります。

列の高さを均等割付：はいにすることによって、各コラムのコンテンツのボリュームが異なることによって、各コラム毎に全体の長さがバラバラになってしまったとしても、全体のバランスが崩れるのを防ぐことができます。

最後に余白ですが、今回はサンプルのように各セクション通しがくっついたデザインにしたいので、パディング・マージンともに余白を0にしています。

変更を保存すると、コラムが下の画像のように変更されます。

あれ、余白を全部0にしたのに、まだ余白が！！！！

安心してください。

余白は消えます。セクション内の余白を設定していないだけです。

今度はブルーの設定アイコンをクリックして、パディングのトップとボトムを0にします。

するとあら不思議、完全に余白が消えて、前回作成したランディングページにコラムが綺麗にくっつきました。

１コラムのセクションを作成してみる。

３コラムのセクションを作成した皆さんにとって、１コラムのセクションなんて簡単すぎるかもしれませんが、新しいめちゃめちゃ役立つテクニックもご紹介しますので、辛抱強く最後までお付き合いくださいm(_ _)m

ではいつものように水色の+ボタンをクリックして、セクションを挿入します。今回も通常を選択します。

次に行を挿入します。今回は１コラムを選択します。

次はテキストモジュールを選択します。

次にコンテンツを加えます。

前回のチュートリアルで皆さんもう使い方はお分かりだと思いますので、詳しい説明は省きますが、下記のようにピンクの枠で囲っているところを、デフォルトのParagraphからHeading1にすることによって、デザインタブで、ヘッダーテキストとして個別にデザインを設定することができるようになります。

細かい設定が終了したら、変更を保存してテキスト設定を閉じます。

次にボタンモジュールを挿入します。

が、ちょっと待ってください。

前回のチュートリアルでボタンをアイコンを作ったことをお忘れじゃないですか？？

一からまたボタンを作るのめんどくせ、、( -д-) という面倒くさがりなあなたに朗報です。

DiviにはDiviライブラリという、そんな面倒くさがりやさんのための素晴らしい機能があるのです。

Diviライブラリの使い方

①　モジュールをライブラリに保存する。

前回作成したボタンモジュールに戻って、下記画像のピンクの枠線で囲ってある、モジュールをライブラリに保存するというアイコンをクリックします。

テンプレート名をつけて、ライブラリに保存するをクリック。

グローバルとして保存すると、勝手に全ボタンがこのデザインになります。私はあまりグローバルアイテムを使いたくない、全アイテム細かく設定したーいというこだわりやさんなので、チェックは外してます。

②　ライブラリに保存したモジュールを使う。

先ほどのセクションに戻り、新たなモジュールを追加します。

今回は新規モジュールではなく、ライブラリから追加タブをクリックします。

すると先ほど作ったbuttonモジュールが出てきます。これをクリックするだけ！

すると前回作ったデザインと全く同じボタンが追加されました^^

もちろんここからデザインを変更することも可能です。

今回はテキストが左寄せになっているので、ボタンも左寄せにしてみます。

デザインタブの属性セクションから、ボタンの配置を左を変更。

最後に、セクションに背景を付け加えます。

今回サンプルで使用している画像を使用したい方は、こちらをクリックして画像を保存してください。

いつものようにブルーの設定アイコンをクリックして、背景や余白などを変更してください。

余白は上下ともに大きめに100pxにしてみました。

前回ご紹介した通り、モバイルアイコンをクリックするとタブレットとスマートフォン別に、デザインを変更することが可能です。

最後に紫の真ん中の…ボタンをクリックして、右端の保存をクリックするのを忘れないでね^^

今までの苦労が全部水の泡になっちゃうぞっ(*ゝω・*)

ちなみにこのビジュアルビルダーですが、とっても簡単で使いやすいんですが、たまにバグったりします。一応自動回復機能もついていますが、念のため、こまめに保存することをオススメします。

こちらが完成形です！！

これはあくまでサンプルデザインですので、色や画像、フォントなど、みなさんの自由にカスタマイズしてくださいね^^

もちろんこの通りに作っていただいて、文字の内容だけ変えていただいても構いません。このデザインに関する著作権は放棄していますのでご心配なくw

わかりにくいところがあったり、ご質問等ございましたら、コメント欄にてお答えします^^

それは次回また！See you later<3