WordPress で画像の周りにテキストを折り返す 4 つの方法

エレガントな方法で画像の周囲にテキストを配置する必要がありますか?コーディングやデザインの経験がなくても、それを簡単に行う方法を学びましょう。 Gutenberg エディターには、WordPress でテキストを回り込むためのオプションがさらに追加されました。

見栄えの良い Web サイトと簡単なコンテンツ編集ルーチンを同時に実現できます。 WordPress Web サイトに Gutenberg エディターを選択すると、長期的な観点から最適なツールが得られます。画像の周囲にテキストを別の方法で折り返すオプションがさらに増えます。 Gutenberg は、Web サイトのより明確なソース コード、速度、セキュリティ、使いやすさなど、多くの利点をもたらします。

WordPress で画像の周囲にテキストを折り返すにはどうすればよいですか?

Gutenberg エディターとブロックにより、Web サイトのコンテンツが軽量かつモダンになり、簡単に読みやすくなります。 WordPress ページ、投稿、カスタム投稿タイプでも画像の周囲にテキストを折り返す方法をさらに紹介します。さまざまなブロックがあり、ラップの追加オプションを提供するパーツと機能のセットとして組み合わせて使用することもできます。

サブページとそのコンテンツ タイプに応じて、画像の周囲に折り返されるテキストのブロックを選択できます。プレゼンテーション ページ用に 1 つのスタイルを選択し、ブログ投稿用に別のスタイルを選択することができます。また、画像を表すコンテンツの種類も考慮してください。それは説明画像ですか、それともより代表的な画像、または販売メディアですか?

画像の周囲にテキストを回り込む – ブロック選択

画像の周りにテキストのブロックを囲むために使用できるブロックが 4 つあります。それらすべてについて説明します。

• 画像ブロックと段落ブロックの詳細は以下をご覧ください
• メディアとテキスト ブロックの詳細は以下をご覧ください
• 列ブロック 個別の投稿で
• クラスターブロック 個別の投稿（ Citadela Proプラグイン)

テキストと画像を折り返して読みやすさを向上

このブロックを使用する理由はいくつかあります。ブログ記事を書いている場合に最も感謝されるでしょう。画像はストーリーに不可欠な部分です。旅行ブログでもITニュースの雑誌でも構いません。したがって、コンテンツ内に写真を追加するときは、画像の配置について考慮してください。読者はあなたが書いていることをよりよく理解できるようになります。

多くの場合、画像とテキストを並べて挿入する必要があります。何が重要ですか?

• それは意味があるはずです。画像は正しいテキストの隣にある必要があります。
• うまく調整する必要があります。
• ウェブサイト全体のレイアウトに適合する必要があります。

画像ブロックと段落ブロック

中にいる間 クラシックエディタ 画像の横にテキストを配置することもできますが、適切な配置については説明できません。特に画像が小さく、その横にさらに多くのテキストを配置する場合はそうです。テキストが画像を覆ってしまい、見た目が良くありませんでした。

グーテンベルクエディター とその Image ブロックは、画像のサイズ変更という優れた機能をもたらします。画像の周りの点をドラッグすると、サイズとテキストの配置が自動的に変更されます。

メディアとテキスト ブロック – WordPress でテキストを画像の横に配置します

• メディアとテキスト ブロックでテキストと画像を囲む
• エディターにメディアとテキスト ブロックを追加する方法
• このブロックの仕組み
• メディアとテキストブロックの設定
• 「」とはどういう意味ですか?モバイルでスタック」 平均
• ボーナス: WordPress でテキストを両端揃えにする方法

画像の隣にテキストを配置するにはどうすればよいですか?

メディアとテキスト ブロックは素晴らしい機能です。 Media & Text ブロックはこの問題を解決し、構成やレイアウトを損なうことなくテキストを画像に完全に配置します。それが、このブロックを使用する必要がある理由です。

モバイルデバイス上のウェブサイトのデザインも改善されます。このラッピング ブロックは、WordPress テーマがさまざまなモバイル レイアウトをカバーするのに役立ちます。スマートフォンでは、Web サイトのすべての部分が明確に表示され、読みやすくなければなりません。メディアとテキスト ブロックは携帯電話でどのように表示され、テーブルは以下で説明する「モバイルでスタック」機能を処理します。

すぐに、Citadela という新しい WordPress テーマでメディアとテキスト ブロックを使用できるようになります。 Citadela テーマの詳細については、別の記事をご覧ください。

ブロックエディターでメディアとテキストブロックを追加するにはどうすればよいですか?

Media & Text ブロックの追加は、他のブロックを追加するのと同じくらい簡単です。これはコア ブロックなので、何もダウンロードしたりインストールしたりする必要はありません。

トップパネルまたはエディタ内の任意の場所で「+」アイコンを使用し、メディアとテキストブロックを選択します。

最後のオプションは、「/」を入力し、その後に「メディア」と書き込むことです。 WordPress は、検索した内容に一致する選択されたブロックを自動的に表示します。

メディアとテキスト ブロックはどのように機能しますか?

メディア & テキスト ブロックは、基本的に 2 つの異なるタイプのコンテンツを 1 つにグループ化します。最初のものは媒体です。たとえば、次の方法で追加できる画像やビデオです。

• アップロード
• メディアライブラリ
• ドラッグドロップ

2 つ目はテキスト コンテンツ用のスペースです。そこにテキストの段落、箇条書きリスト、またはタイトルを書くことができます。そこに追加することもできます ボタンブロック 先ほど話していたことです。

メディアとテキスト ブロックは、テキストの量に関係なく、常に画像とテキストを並べて配置します。どのように機能するのでしょうか?画像は、テキスト列のコンテンツの高さに基づいて自動的に調整されます。

メディアとテキストブロックの設定

一般的なブロック設定

1. 上部のツールバー

ブロックの上のツールバーにはいくつかのオプションがあります。アクティブなテーマがそれをサポートしている場合は、メディアとテキスト ブロックを幅または全幅に設定できます。次をクリックして、画像またはビデオを配置する場所を選択することもできます。

• 左側にメディアを表示
• 右側にメディアを表示

上部のツールバーには、代替テキスト、タイトル、キャプション、または説明を設定できるメディアを編集するためのアイコンもあります。画像の編集について詳しくは、こちらの記事をご覧ください WordPress 画像ブロックの操作.

2. 右サイドバー

右側のサイドバーには、メディアとテキスト ブロックの追加設定が表示されます。ここに代替テキストを追加したり、背景色を設定したり、追加の CSS クラスを追加したりすることができます。 「モバイルにスタック」機能を有効にすることもできます。

モバイルのスタックとは何ですか?

この機能のおかげで、モバイルデバイス上で画像とテキストがきれいに表示されます。 「モバイルでスタック」を無効にすると、画像とテキストが並んだままとなり、レスポンシブバージョンではほとんど読みにくくなります。

この機能を有効にすると、携帯電話では左側のコンテンツが右側のコンテンツの上に表示されます。

テキストの配置

Media & Text ブロックの一部は、画像やビデオ、テキスト コンテンツとともに含まれます。次のコンテンツ タイプのいずれかになります。

1. 段落

上部のツールバーでは、テキストの配置を設定したり、テキストを太字、斜体にしたり、URL リンクを追加したりできます。

右側のサイドバーで、フォント サイズ、フォントの色、段落の色を選択できます。興味深い機能は、テキストの最初の文字を強調表示する「ドロップ キャップ」です。これは、テキストをより興味深いものにするブロック投稿の優れた機能です。

2. 見出し

見出しは段落とよく似ています。外観を設定したり、太字または斜体にしたり、URL リンクを挿入したりすることもできます。違いは、見出しタイプ (H2、H3、H4) を選択できることです。

他の見出しサイズと配置設定は、右側のサイドバーで利用できます。

3. リスト

コンテンツにリスト ブロックを追加すると、箇条書き、番号付きリスト、または複数レベルのリストにすることができます。テキストを太字、斜体にして、URL リンクを追加することもできます。

4. ボタンブロック

コンテンツにボタンを追加するこのブロックは、Web サイトのデザインに合わせて調整できます。ボタンの色とスタイル、または背景色は右側のサイドバーで設定できます。

に関する記事も忘れずに読んでください ボタンブロック. 

ブロックタイプの切り替え

Media & Text ブロックでは、あるコンテンツ ブロック タイプを別のコンテンツ ブロック タイプに変換できます。また、メディア＆テキストブロックを画像ブロックに変更すると、テキスト部分が削除されます。

テキスト コンテンツでは、段落ブロックを見出しブロックまたはリスト ブロックに変更できます。

ボーナス: WordPress でテキストを両端揃えにする方法

両端揃えテキストの使用には良い面と悪い面があります。両端揃えのテキストは通常、本や新聞で見られますが、Web サイトではもう使用されていません。なぜ？

数年前、Justify 機能が WordPress Classic エディター内に統合されました。両端揃えテキストは、さまざまなブラウザーやモバイル デバイスで視認性の問題を引き起こすために使用されていました。これは、両端揃えのテキストの読みやすさにも関係します。したがって、この関数は非推奨となり、削除されました。

この特定の機能は、新しいブロック (Gutenberg) エディターにも存在しません。

では、どうしてもテキストを両端揃えしたい場合は、どうすればよいでしょうか?

解決策は、いくつかの手順で単純な CSS コードを追加することです。

1. 右側のサイドバーに段落ブロックの追加CSSクラスの設定があります
2. そこにクラス名を書き込みます。正当化する「
3. ページまたは記事を公開する
4. プレビューする場合は、メイン上部バーの「カスタマイズ」をクリックします。
5. 左側には設定を含む新しいサイドバーがあります
6. 「追加CSS」をクリックします
7. 次の CCS コードを挿入します。

p.justify { text-align: justify; }

終わり。これからは、メディアとテキスト ブロック内のテキストが両端揃えになります。

Gutenberg エディターのおかげで、WordPress はサードパーティのページビルダーなしでさらに使いやすくなりました。長期的な観点から、また Web サイトの作成または再デザインの際に、Web サイトにとって優れた価値があります。 Gutenberg ブロックは、さまざまなスタイルを提供します。 画像の周りにテキストを折り返すための WordPress コード.

メディアとテキスト ブロックについてどう思いますか?もう使用しましたか?使ってみていかがですか？以下のコメント欄でお知らせください。