Diviで画像の周りにテキストをラップする方法（3つの方法）
公開: 2019-05-27画像の周りにテキストをラップすることは、雑誌や新聞などの印刷媒体で最も一般的に見られる一般的なデザイン手法です。 しかし、これがWeb、特にブログ投稿で使用されていることもわかります。 画像の周りにテキストをラップすることは、実際にはWYSIWYGエディターでの簡単な配置調整を含むWordPressのかなり標準的な部分です。 唯一の問題は、デフォルトのWordPressエディターを使用してページのスタイルをカスタマイズすることが難しいことです。 そこでDiviがお手伝いします！
このチュートリアルでは、Diviを使用して画像の周りにテキストを折り返す3つの方法を紹介します。 これにより、Diviの機能を使用してクラシックな印刷スタイルのレイアウトを作成し、デザインを支援することができます。 これが私たちがカバーしようとしていることです：
- WYSIWYGエディターを使用してテキストモジュール内の画像（およびブロック引用符）の周りにテキストをラップする方法
- Diviのテキストモジュールの横に画像モジュールを配置して、画像の周りにテキストをラップする方法
- 中央に配置された画像の周りにテキストをラップして、一意の2列レイアウトにする方法
このチュートリアルでは画像に焦点を当てますが、実際にはこれと同じプロセスを使用して、Diviの任意のモジュールにテキストをラップすることができます。
スニークピーク
これが、今日構築するメインデザインの概要です。
始めましょう！
私たちのYoutubeチャンネルを購読する
画像レイアウトの周りの折り返しテキストを無料でダウンロード
このチュートリアルのデザインを手に入れるには、まず下のボタンを使用してデザインをダウンロードする必要があります。 ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。 新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！ すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。 「再購読」したり、追加のメールを受信したりすることはありません。
無料でダウンロード
Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。 従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。
正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。
レイアウトをページにインポートするには、zipファイルを抽出し、jsonファイルをDiviBuilderにドラッグするだけです。
チュートリアルに行きましょう。
始めるために必要なもの
開始するには、必要なのはDiviといくつかの画像だけです。
- Divi –Diviテーマがインストールされてアクティブになっていることを確認します。 フロントエンドのDiviBuilder（ビジュアルビルダー）を使用して、ゼロからデザインを作成します。
- 画像–また、チュートリアルで使用する400x250ピクセルの画像が少なくとも1つあることを確認してください。
準備ができたら、WordPressダッシュボードに移動し、[ページ]> [新規追加]に移動します。 新しいページにタイトルを付け、フロントエンドにDiviBuilderをデプロイします。 「最初からビルド」オプションを選択します。 これで準備が整いました！
WYSIWYGエディターを使用してテキストモジュール内の画像とブロック引用符の周りにテキストをラップする方法
WordPressを使用すると、デフォルトのWordPress（WYSIWYG）エディターを使用して、画像の周りにテキストを簡単に折り返すことができます。 また、Diviのテキストモジュールには同じWordPress WYSIWYGエディターが組み込まれているため、WordPressユーザーが画像の周りにテキストを折り返すために常に使用していたのと同じ方法を使用できます。
これがその方法です。
1列の行を持つ通常のセクションを作成してから、その行にテキストモジュールを追加します。
テキストモジュールの内容をコピーで更新します。 今のところ、私はloremipsumのいくつかの段落を使用しています。
まだ行っていない場合は、コンテンツエディタのビジュアルタブを選択します。 次に、画像を追加するコンテンツ領域の上部をクリックして、[メディアの追加]ボタンをクリックしてください。
メディアライブラリのポップアップで、使用する画像を選択します。 また、添付ファイルの表示設定で、配置オプションとして左または右のいずれかを選択します。 この例では、画像を左に配置します。
WordPressは、画像を左にフロートさせるクラス（「alignleft」と呼ばれる）を画像に追加します。 追加されたfloatプロパティにより、テキストを画像に折り返すことができます。 WordPressはまた、マージンを使用して画像の周囲にバッファーを追加し、画像と周囲のテキストの間に小さな間隔を作成します。
そしてもちろん、画像を右揃えにすると、画像は右に浮き、テキストが画像の周りを折り返すことができます。
同様の手法を使用して、テキストモジュールのブロック引用符の周りにテキストを折り返すこともできます。 これを行うには、コンテンツエディタを使用してブロッククォートを作成します。
次に、ブロッククォートの組み込みテキストモジュール設定を使用してブロッククォートのスタイルを設定します。
次に、コンテンツエディタに戻り、[テキスト]タブに切り替えます。 次に、ブロッククォートタグにインラインスタイルを追加して、ブロッククォートの周囲に間隔を空け、左にフロートさせます。 blockquotehtmlは次のようになります。
<blockquote style="margin: 0 15px 15px 0; float:left;">This is a <br> blockquote</blockquote>
これで、テキストがブロック引用符の周りに折り返されます。
Diviのテキストモジュールの横に画像モジュールを配置して、画像の周りにテキストをラップする方法
画像モジュールの周りにテキストを折り返すために、画像モジュール全体をテキストモジュールの隣にフロートさせることができます。 これは、画像タグにインラインスタイルや外部CSSを追加する代わりに、Divi Builder設定を使用して画像のスタイルを完全に制御できるため、上記のWordPressエディターを使用するよりも好ましい方法です。
これがその方法です。
1列の行を持つ新しい通常のセクションを作成します。 次に、選択した画像を含む画像モジュールを行に追加します。 私が使用している画像はチャリティーレイアウトパックのもので、400px x250pxです。
次に、画像モジュールの下に、モックテキストコンテンツを含むテキストモジュールを追加します。
両方のモジュールを配置したら、テキストモジュールの左側に画像をフロートさせる必要があります。 これを行うには、画像モジュールの設定を開き、次のカスタムCSSをメイン要素に追加します。
float:left;
次に、画像のカスタムマージンを更新して、画像を折り返すテキストに必要なバッファを作成します。
カスタムマージン：上2％、下2％、右2％
結果は次のとおりです。
また、画像を右にフロートさせたい場合は、画像モジュールの設定を開き、cssを次のように置き換えます。
float:right;
そして、マージン間隔を次のように更新します。
カスタムマージン：上2％、下2 $、残り2％
結果は次のとおりです。
このデザインを複数の列で使用する
この設定を複数の列で使用して、サービスを紹介するためのテキストラッピングデザインを作成することもできます。 これを行うには、行の列レイアウトを2列に変更します。
次に、画像に最大幅のパーセンテージ値を指定して、さまざまなブラウザ幅に応答するようにします。
最大幅：33.33％（デスクトップ）、100％（電話）
画像とテキストモジュールを最初の列からコピーして、列2に貼り付けます。次に、必要に応じてコンテンツと画像を更新します。
それでおしまい。 結果は次のとおりです。
中央に配置された画像またはモジュールの周りにテキストをラップして、一意の2列レイアウトにする方法
この例では、中央に配置された画像モジュールの周りに2列のテキストを折り返す方法を示します。 これにより、独自の雑誌や新聞のスタイルのレイアウトを作成できます。 ただし、「float：center」cssプロパティがないため、このデザインを機能させるには、レイアウトを少し工夫する必要があります。
これがその方法です。
中央揃えの画像を使用して最上位行のコンテンツを作成する
まず、1列の行を持つ新しい通常のセクションを作成します。 次に、画像モジュールを行に追加します。 400px x250pxの画像をアップロードします。 サイズは、この設計に対して正確である必要があります。
次に、次のように設計設定を更新します。
最大幅：400px（デスクトップ）、100％（タブレット）
モジュールの配置：中央
カスタムパディング：上2％、下2％、左2％、右2％
次に、設定を保存して、行の設定を開きます。 行の下のパディングを取り出します。
カスタムパディング：0px下
2列のテキスト行を作成する
画像を含む行の下に、2列のレイアウトで新しい行を作成します。
1列目に、モックコンテンツを含むテキストモジュールを追加します。
次に、テキストモジュールをコピーして、テキストの2番目の列の列2に貼り付けます。
フローティングディバイダーで空のスペースを作成する
画像に必要なスペースを作成するために、仕切りモジュールを使用できます。 左側の列に、画像の半分のサイズの仕切りモジュールを作成し、それを右にフロートさせて、テキストモジュールが仕切りをラップするようにします。 次に、右側の列に、画像の半分のサイズの別の仕切りを作成し、左側にフロートさせます。
これを行うには、仕切りモジュールを作成し、列1のテキストモジュールの真上に配置します。
次に、ディバイダーモジュールの設定を次のように更新します。
仕切りを表示：いいえ
幅：200px
高さ：250px
高さが前に作成した画像の高さと同じであり、幅が画像の幅のちょうど半分であることを確認してください。
モバイルの場合、タブレットと電話の仕切りを無効にします。 これを行うには、可視性設定を更新して、タブレットと電話の表示を無効にします。
最初の仕切りが作成されたので、仕切りモジュールをコピーして、列2のテキストモジュールの上に貼り付けます。
次に、仕切りを浮かせる必要があります。 これを行うには、列1の仕切りの設定を開き、次のカスタムCSSをメイン要素に追加します。
float: right;
次に、列2の仕切りモジュールの設定を開き、次のカスタムCSSをメイン要素に追加します。
float: left;
カスタムマージンを使用して画像を所定の位置に移動する
これで、最初の行の画像を下に移動して、仕切りで作成したスペース内に収まるようにするだけです。
画像モジュールの設定を開き、次のカスタムマージンを追加します。
カスタムマージン：-250px下部（デスクトップ）、20px（タブレット）
これがこれまでの結果です。
セクションにタイトルを追加する
この最後の手順はオプションですが、セクションにタイトルを追加する場合は、テキストモジュールを作成し、画像の上に配置します。
次に、次のコンテンツをテキストモジュールに追加します。
<h2>Learn more about how to give</h2>
次に、テキスト設定を次のように更新します。
背景色：＃000000
見出し2フォント：プレイフェアディスプレイ
見出し2テキストの配置：中央
見出し2テキストの色：#ffffff
見出し2行の高さ：2em
よりクリーンなテキストラッピングデザインのためにテキストを正当化する
画像の周りにテキストを折り返すとき、特にテキストがこのように中央に配置されている場合は、周囲のテキストを両端揃えにすることを常にお勧めします。 この場合、必要なのは、折り返しテキストコンテンツを含む両方のテキストモジュールを正当化するようにテキストの向きを変更することだけです。
最終結果
これが最終結果です。
そして、ここではタブレットと電話のディスプレイにあります。
最終的な考え
画像の周りにテキストを効果的に折り返す方法を知っていると、コンテンツがプロフェッショナルで読みやすくなります。 コンセプトは非常に単純です。 画像を右または左にフロートさせてから、画像の周囲にカスタム間隔を使用してバッファリングするだけです。 そして、私が気に入っているのは、Diviのあらゆるタイプのコンテンツの周りにテキストをラップするために、（画像だけでなく）任意のモジュールをフロートできることです。 これがあなたの次のプロジェクトに少しインスピレーションを与えてくれることを願っています。
コメントでお返事をお待ちしております。
乾杯！