いつもブログをご覧いただきありがとうございます。
今回で、第４回目となるDiviテーマのStep By Stepチュートリアルですが、今回のStep４を人モジュールを使って、メンバープロフィールを作る方法についてご紹介します。
サンプルデザインで言うところの、この部分ですね。

どうやら私のチームはみんなモデル並みの美男美女しかいないようです笑

またおまけとして、画像のように今流行りの斜めアングルになっている背景を、CSSなしで簡単に作れる方法をご紹介します^^

 前回までのおさらい

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

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

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

• Step1: テーマのセットアップ
• Step2: ランディングページ・ナビゲーションメニューの作成
• Step3: コラム・広告モジュールの使い方

 人モジュールを使って、メンバープロフィールを作成してみよう。

①　ビジュアルビルダーを立ち上げる。

いつものようにTopページから、ビジュアルビルダーを有効にするをクリックして、Diviのビジュアルビルダーを立ち上げます。

②　セクションを追加して、人モジュールを挿入する。

いつものように水色の+アイコンをクリックして、新たなセクションを追加します。

通常セクションを挿入します。もうだいたい使い勝手がわかってきたかもしれませんが、コラムを挿入する時は、絶対に通常セクションです。

今回は４コラムを挿入しますが、みなさんの好きなように選んでいただいて構いません。

４人も従業員なんかいねーよ！！ヽ(ﾟДﾟ#)ノと言う方は、３コラムでも２コラムでも好きなようにカスタマイズしてください笑

安心してください。私なんか今の所ひとりぼっちです。なので、今回は選りすぐりの美男美女達に架空のメンバーになっていただきました。。

今回は、メンバープロフィールを作ると言うことで、人モジュールを挿入します。

人モジュールを選択すると、画像のようにメンバーのプロフィールを編集することができます。

位置には、会社のポジションとか役割、職業などを入れるといいと思います。

またSNSのURLを入れると、勝手にSNSのアイコンが出てきます。

その他、メンバーの紹介や、画像の挿入、また背景の色や画像を変更することもできます。

今回サンプル画像はいらないかもしれませんが、もしかしたらいつかどこかで使う機会があるかもしれないので、一応リンク先を載せておきます。

左から順にブライアンくんはこちら、ブリトニーはこちら、アレックスはこちら、もう一人のブライアンくんはこちらをクリックして、それぞれ画像をゲットしてください。

次にデザインをカスタマイズして行きます。ざっくりとアイコンについての説明と、わかりやすいように実際にブライアン君に使われているサンプルの設定を横にのせておきます。

アイコン

アイコンの色：SNSのアイコンの色が変更できます。　#4a5177

アイコンマウスオーバーカラー：アイコンにマウスを当てた時の色を変更できます。　#b2b2b2

ヘッダーテキスト、ボディーテキスト(既になんども紹介しているので、説明は省いて、設定だけ乗せてます。)

ヘッダーテキスト: 24px, PT serif, Bold, #45635D

ボディーテキスト：14px, black, 行の高さ: 1.7em

※　今回は、余白・ボーダは設定していませんが、設定を入れたい人は、ご自由にカスタマイズしてください。（余白を設定していない理由に関しては、今から説明します）

今回は、CSSでパディングを挿入します。

理由は、サンプルのように画像同士をくっつけたいのですが、メンバーの紹介文までくっついてしまったら文字が見にくいですよね？

余白をメンバー紹介文の周りに入れたいのですが、デザインの余白に直接入れてしまうと、画像まで離れちゃうんです。。

なので今回はCSSを使ってパディングを挿入します。安心してください。コピーアンドペーストするだけです。

/* ここから下をメンバー解説にコピーアンドペースト */

padding: 5px 15px;

すると画像のように、テキストコンテンツの周りに上下5px、左右15pxが出来上がります。

設定を保存して、一旦人設定を閉じます。

③　人モジュールを複製する。

前回ご紹介したように、赤の太線で囲まれているアイコンをクリックして、モジュールを複製します。

するとたくさんのブライアン君が現れました。

あとは、１つずつ画像を変えたり、名前を変えたりして、自由にカスタマイズしてください。

④　コラムの幅を設定する。

グリーンの設定アイコンをクリックして、コラムの幅を設定します。

以下のように設定すると、コラムが全幅になり、コラム同士の余白が無くなりました^^

Meet Our Teamという見出しについては、テキストモジュールを導入するだけなので、今回は省略します。

 おまけ：背景の斜めカットデザインの作り方

最後におまけとして、最近Web界では流行りの、この背景の斜めカットをCSSなしで簡単に作る方法をご紹介します。

まずはブルーの+アイコンをクリックして、セクションの設定画面を開きます。

実は、ここでグラデーションを背景に設定します。

左に好きな色、右に白を設定してください。（サンプルのカラーコードは#CCB69Fです）

ここで裏技！

ポジションの地点とポジションの終点のレバーをうごかして、画像のように２つの色の境界線がくっきりとなるポイントを見つけます。

高さは自由に変えてください。

適当に動かしていると、どこかでボヤーッとしたラインからくっきりとしたラインになるポイントが見つかります。

あとは、画像のようにグラデーション方向のバーを動かして、角度を調整するだけ！

とっても簡単だけど、結構役に立つ裏技です^^

組み合わせ次第でこんな感じの斜め長方形が作れたりなど、なかなか面白いので、色々遊んで見てください^^

今回のチュートリアルはいかがだったでしょうか？

何かわからないことや、質問などありましたら、コメント欄やSNSにてお気軽にご質問ください！

あ、この度Facebookの自分のページを作ったので、ぜひいいね！していただけると泣いて喜びます。。

ではまた次回Step５で会いましょう！See you later<3