世界シェア率No.1 WordPressテーマ【DIVI】Step By Step Tutorial 〜 Step4: メンバープロフィールの作り方 – 初心者のためのWordpress完全マニュアル

誰でも作れる低予算のウェブサイト作り

TUTORIAL BLOG


このブログでは、初心者でも分かりやすいよう、WORDPRESSを使ったWEBサイトの作り方を、サーバーのセットアップから、テーマのカスタマイズ方法、オススメのプラグインの紹介や使い方、SEO対策やアフィリエイトの運営方法まで、STEP BY STEPで紹介しています。

世界シェア率No.1 WordPressテーマ【DIVI】Step By Step Tutorial 〜 Step4: メンバープロフィールの作り方

August 29, 2017

Divi基本操作チュートリアル

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

 

divisample member profile

 

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

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

 

 前回までのおさらい

 

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

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

 

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

 



 

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

 

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

 

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

 

Diviビジュアルビルダー

 

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

 

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

 

セクションの追加 スクリーンショット

 

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

 

 

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

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

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

 

コラムの追加 スクリーンショット

 

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

 

人モジュール

 

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

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

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

 

メンバープロフィールコンテンツ1

 

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

 

 

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

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

 

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

アイコン

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

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

 

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

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

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

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

 

 

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

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

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

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

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

padding: 5px 15px;

 

 

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

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

 

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

 

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

 

 

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

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

 

モジュールの複製

 

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

 

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

 

コラム幅の設定

 

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

 

 

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

 

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

 

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

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

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

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

 

ここで裏技!

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

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

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

 

グラデーションの設定

 

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

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

 

 

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

 

 

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

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

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

 

ではまた次回Step5で会いましょう!See you later<3

 

この記事をシェアする!

コメントを残す

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

Powered by Shutterstock