Diviの抽象的な場所で画像のスタイルを設定して配置する方法
公開: 2019-03-30画像はウェブデザインの重要な側面です。 そして現代のウェブデザインはあなたのウェブサイトに画像を表示するための新しく抽象的な方法を必要としているようです。 Diviの変換オプションを使用すると、ページ上の画像のスタイルを設定したり、好きな場所に簡単に配置したりできます。 これはあなたのウェブサイトを次のレベルに引き上げるユニークなレイアウトを作成するための扉を開きます。
このチュートリアルでは、Webサイトの抽象的な場所に画像のスタイルを設定して配置する方法をいくつか紹介します。 これにより、PhotoshopやSketchなどのフォトエディタでのみ可能だと考えていた画像の無数のデザインバリエーションを作成できます。
始めましょう！
スニークピーク
これは、このチュートリアルで作成するデザインの概要です。
このチュートリアルからデザイン例を無料でダウンロード
これらのサンプルデザインを手に入れるには、まず下のボタンを使用してダウンロードする必要があります。 ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。 新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！ すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。 「再購読」したり、追加のメールを受信したりすることはありません。
無料でダウンロード
Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。 従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。
正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。
レイアウトをページにインポートするには、zipファイルを抽出し、jsonファイルをDiviBuilderにドラッグするだけです。
それでは、チュートリアルに取り掛かりましょう。
はじめに
開始するには、Diviテーマがインストールされてアクティブになっていることを確認してください。 次に、新しいページを作成し、フロントエンドにDiviBuilderをデプロイします。 「最初から構築」オプションを選択します。
これで、設計の準備が整いました。
ビューポートの外側（右または左）に画像を部分的に配置する
この最初の例では、ビューポートの外側に画像を部分的に配置する方法を示します。 これは、コンテンツのカスタム背景画像のように機能する、画像の抽象的な表示を追加するための優れた方法です。 次に、画像のスタイルを設定して、さらにユニークなデザインにすることができます。
これがその方法です。
テキストモジュールの作成とスタイル設定
まず、セクションのメインコンテンツとして機能するテキストモジュールを作成します。
まだ作成していない場合は、1列の行を持つ通常のセクションを作成します。 次に、テキストモジュールを行に追加します。
以下を含むようにコンテンツを更新します。
<h2>About Us</h2> <p>Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.</p>
次に、次のように設計設定を更新します。
テキストフォント：Raleway
見出し2フォント：Raleway
見出し2フォントの太さ：太字
見出し2テキストサイズ：44px（デスクトップ）、24px（電話）
幅：680px（デスクトップ）、60％（タブレット）、80％（電話）
カスタムパディング：上10％、下10％、左10％、右5％
画像＃1を追加
これで、最初の画像を追加する準備が整いました。 先に進み、テキストモジュールのすぐ上に画像モジュールを追加します。
次に、画像を画像モジュールにアップロードします。 変換プロパティを使用して画像を拡大するときに品質が低下しないように、画像が十分に大きいことを確認してください。 400 x580ピクセルの画像を使用しています。
次に、イメージモジュールの幅を下げて、次のように左に揃えます。
幅：5％
モジュールの配置：左
このように画像モジュールを縮小すると、最初はレイアウトのネガティブスペースを削減できます。 このように、負のマージンを使用して間隔を調整する必要はありません。
これで、次のように変換オプションを使用して画像を拡大できます。
変換スケールのX軸：416％
変換スケールのY軸：416％
次に、次のように変換変換を使用して画像を配置できます。
変換変換X軸：-36％
変換変換Y軸：41％
最後に、transformrotateを使用して画像を回転させることができます。
変換回転Z軸：11度
これで、2番目の画像を追加する準備が整いました。 先に進み、テキストモジュールのすぐ下に画像モジュールを追加します。
次に、新しい画像を画像モジュールにアップロードします。
次に、イメージモジュールの幅を下げて、次のように左に揃えます。
幅：10％
モジュールの配置：左
幅は正確に10％である必要はありません。 モジュールを十分に縮小して、レイアウトの垂直方向のスペースを取りすぎないようにするだけです。
次に、変換オプションを次のように更新します。
変換スケールのX軸：464％
変換スケールY軸：464％
変換変換X軸：7％
変換変換Y軸：-80％
変換回転Z軸：-10度
次に、追加のデザイン要素のボックスシャドウを追加します。
ボックスシャドウ：スクリーンショットを参照
ボックスシャドウの水平位置：-20px
ボックスシャドウの垂直位置：-7px
テキストモジュールがトップに留まっていることを確認する
モバイルで画像が重なり始めたときはいつでも、テキストモジュールが画像の上に表示されるようにする必要があります。 これにより、画像が引き続きデザインの背景画像として機能するようになります。
これを行うには、テキストモジュールを開き、次のカスタムCSSをメイン要素に追加します。
主な要素のCSS：
position: relative;
次に、Zインデックスを1に設定します。
セクションオーバーフローを非表示にする
ページのセクションの外側に広がる画像があるため、余分なスペースに対応するためにブラウザのビューポートの幅が広くなります。 これにより、ブラウザの下部にある水平スクロールバーが表示されます。 これを無効にするには、CSSのスニペットをセクションに追加する必要があります。
セクション設定を開き、次のカスタムCSSをメイン要素に追加します。
overflow: hidden;
次に、最終結果を確認します。
ヘッダーの抽象的な画像コラージュの背景を作成する
この次のデザインでは、ヘッダーの背景として機能する画像の抽象的なコラージュを作成する方法を紹介します。 これを行うには、display flexプロパティを使用して、クリエイティブな方法で拡大縮小および移動できる画像の行を作成します。
これがその方法です。
ヘッダーテキストモジュールの設計
まず、1列の行を持つ新しい通常のセクションを作成します。 次に、テキストモジュールを行に追加し、次のコンテンツを更新します。
<h1>Interior Design</h1> <p>This is some content</p>
次に、次のようにデザインを更新します。
背景色：rgba（0,0,0,0.07）
テキストテキストの色：#ffffff
テキストの向き：中央
見出しフォント：Raleway
見出しフォントの太さ：太字
見出しテキストの配置：右
見出しのテキストの色：#ffffff
見出しのテキストサイズ：44px（デスクトップ）、34px（タブレット）、24px（電話）
幅：500px（デスクトップ）、60％（タブレット）、80％（電話）
モジュールの配置：中央
カスタムパディング：上5vw、下5vw、右1vw
セクション設定
画像を追加してコラージュの背景を作成する前に、セクションをカスタマイズしましょう。 これにより、残りのデザインを完成させるためのキャンバスが提供されます。
セクション設定を開き、以下を更新します。
背景色：＃4c606d
カスタムパディング（デスクトップ）：0px上、0px下
カスタムパディング（タブレット）：20px底
カスタムパディング（電話）：40px下
次に、セクションの下部に、ページの次のセクションの背景と一致する色（この場合は白）で内側のボックスの影を追加します。 これにより、ヘッダーの下部に重なる画像の効果を次のセクションに作成できます（後で意味がわかります）。
ボックスシャドウ：スクリーンショットを参照
ボックスシャドウの水平位置：0px
ボックスシャドウの垂直位置：-80px
影の色：#ffffff
また、コラージュの断面ビューポートの外側に画像を移動するため、次のCSSをメイン要素に追加する必要があります。
overflow: hidden;
行1の設定
次に、テキストモジュールを含む行にパディングを追加する必要があります。 また、セクションに追加する画像の上にセクションを保持するために、z-indexを追加する必要があります。 デフォルトでは、すべてのセクションのz-index値は9です。したがって、必要なのは、一番上に残したい行に10のz-indexを追加することだけです。
行設定を開き、以下を更新します。
カスタムパディング：10vwトップ
Zインデックス：10
抽象画像コラージュの作成
この時点で、セクションは画像の追加を開始する準備ができています。
抽象画像のコラージュを作成するには、1列の行に5つの画像を追加し、「display：flex」を使用して、これらのすべての画像をページ上で水平に配置します。 これは、すべてのブラウザサイズで画像を（水平方向に）所定の位置に保持するために必要です。 従来の5列のレイアウトを使用する場合、さまざまなデバイスでさまざまな列のレイアウトに分割され、デザインが壊れる画像が表示されます。
その後、変換オプションを使用して、画像を1つずつスタイル設定および配置できるようになります。
画像の行を追加する
先に進み、テキストモジュールを含む行のすぐ下に新しい1列の行を作成します。
次に、行の設定を開き、以下を更新します。
カスタム幅：50％
側溝幅：1
また、この行のすべてのモジュールを水平方向に揃えるには、次のCSSを列のメイン要素に追加します。
display: flex;
これで、画像モジュールを行に追加すると、水平方向に整列します。
display：flex addを列に追加して、行の画像モジュールを複製するとどうなるかを見てください。
先に進み、5つの画像を行に追加して、コラージュの画像を拡大縮小するときにサイズの増加に対応できるサイズになっていることを確認します。 Home Improvement Layout Packに含まれている、幅が約800ピクセル、高さが異なる画像を使用しています。 寸法の異なる画像は、より見栄えの良い抽象的なコラージュを作成する傾向があります。
変換変換を使用した画像の配置
コラージュを作成するために画像の配置を開始する時が来ました。
画像＃1
最初の画像モジュール（左端）の設定を開き、次のように変換オプションを更新します。
変換スケールのX軸：266％
変換スケールのY軸：266％
変換変換：X軸：-68％
変換変換：Y軸：-54％
画像＃2
2番目の画像モジュールの設定を開き、次のように変換オプションを更新します。
変換スケールのX軸：184％
変換スケールのY軸：184％
変換変換：X軸：-36％
変換変換：Y軸：-66％
画像＃3
3番目の画像モジュールの設定を開き、次のように変換オプションを更新します。
変換スケールのX軸：206％
変換スケールY軸：206％
変換変換：X軸：-51％
変換変換：Y軸：-27％
画像＃4
4番目の画像モジュールの設定を開き、次のように変換オプションを更新します。
変換スケールのX軸：180％
変換スケールY軸：180％
変換変換：X軸：20％
変換変換：Y軸：42％
画像＃5
5番目の画像モジュールの設定を開き、次のように変換オプションを更新します。
変換スケールのX軸：290％
変換スケールのY軸：290％
変換変換：X軸：-50％
変換変換：Y軸：72％
画像にボックスシャドウを追加する
追加のデザイン要素を作成するために、画像にボックスシャドウを追加できます。 これを行うには、グリッドモードをアクティブにし、複数選択機能を使用してすべての画像モジュールを選択します。 次に、イメージモジュールの1つの設定を開いて、要素設定モーダルを展開します。
次に、以下を更新します。
ボックスシャドウ：スクリーンショットを参照
ボックスシャドウの水平位置：-40px
ボックスシャドウの垂直位置：40px
影の色：rgba（255,255,255,0.13）
最終結果
これが設計の最終結果です。
デスクトップ
タブレット
電話
最終的な考え
これらのサンプルデザインは、写真編集ソフトウェア以外では考えられなかった方法で、Webサイト上の画像のスタイルを設定して配置する方法についてのインスピレーションを提供するはずです。 レイアウトを適切にカスタマイズする方法を学ぶと、Diviの変換オプションで画像をユニークで抽象的な場所に配置できます。 うまくいけば、これはあなたの次のプロジェクトに役立つでしょう。
コメントでお返事をお待ちしております。
乾杯！