いつもブログをご覧いただきありがとうございます。
今回で、第4回目となるDiviテーマのStep By Stepチュートリアルですが、今回のStep4を人モジュールを使って、メンバープロフィールを作る方法についてご紹介します。
サンプルデザインで言うところの、この部分ですね。
どうやら私のチームはみんなモデル並みの美男美女しかいないようです笑
またおまけとして、画像のように今流行りの斜めアングルになっている背景を、CSSなしで簡単に作れる方法をご紹介します^^
Diviテーマ Step By Stepチュートリアル サンプルデザイン: https://yukifel-divitutorial.com/
Diviテーマの購入はこちら: https://www.elegantthemes.com
いつものようにTopページから、ビジュアルビルダーを有効にするをクリックして、Diviのビジュアルビルダーを立ち上げます。
いつものように水色の+アイコンをクリックして、新たなセクションを追加します。
通常セクションを挿入します。もうだいたい使い勝手がわかってきたかもしれませんが、コラムを挿入する時は、絶対に通常セクションです。
今回は4コラムを挿入しますが、みなさんの好きなように選んでいただいて構いません。
4人も従業員なんかいねーよ!!ヽ(゚Д゚#)ノと言う方は、3コラムでも2コラムでも好きなようにカスタマイズしてください笑
安心してください。私なんか今の所ひとりぼっちです。なので、今回は選りすぐりの美男美女達に架空のメンバーになっていただきました。。
今回は、メンバープロフィールを作ると言うことで、人モジュールを挿入します。
人モジュールを選択すると、画像のようにメンバーのプロフィールを編集することができます。
位置には、会社のポジションとか役割、職業などを入れるといいと思います。
またSNSのURLを入れると、勝手にSNSのアイコンが出てきます。
その他、メンバーの紹介や、画像の挿入、また背景の色や画像を変更することもできます。
今回サンプル画像はいらないかもしれませんが、もしかしたらいつかどこかで使う機会があるかもしれないので、一応リンク先を載せておきます。
左から順にブライアンくんはこちら、ブリトニーはこちら、アレックスはこちら、もう一人のブライアンくんはこちらをクリックして、それぞれ画像をゲットしてください。
次にデザインをカスタマイズして行きます。ざっくりとアイコンについての説明と、わかりやすいように実際にブライアン君に使われているサンプルの設定を横にのせておきます。
アイコン
アイコンの色: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
© 初心者のためのWordpress完全マニュアル All Rights Reserved