目次
エレガントな方法で画像の周囲にテキストを配置する必要がありますか?コーディングやデザインの経験がなくても、それを簡単に行う方法を学びましょう。 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 コードを追加することです。
- 右側のサイドバーに段落ブロックの追加CSSクラスの設定があります
- そこにクラス名を書き込みます。正当化する「
- ページまたは記事を公開する
- プレビューする場合は、メイン上部バーの「カスタマイズ」をクリックします。
- 左側には設定を含む新しいサイドバーがあります
- 「追加CSS」をクリックします
- 次の CCS コードを挿入します。
p.justify { text-align: justify; }
終わり。これからは、メディアとテキスト ブロック内のテキストが両端揃えになります。
Gutenberg エディターのおかげで、WordPress はサードパーティのページビルダーなしでさらに使いやすくなりました。長期的な観点から、また Web サイトの作成または再デザインの際に、Web サイトにとって優れた価値があります。 Gutenberg ブロックは、さまざまなスタイルを提供します。 画像の周りにテキストを折り返すための WordPress コード.
メディアとテキスト ブロックについてどう思いますか?もう使用しましたか?使ってみていかがですか？以下のコメント欄でお知らせください。
基本的に私はブロックシステムが好きですが、何かが欠けている場合を除いて、これは後退です。私は現在、単純に画像を左右にフロートさせてテキストを折り返すことを検討しています。本当に簡単にできるはずですが、WordPress はそれが起こることを望んでいないようです。なぜだめですか？メディアと画像ブロックの使用は、テキストの長さが適切な場合にのみ機能します。たとえば、このようなページでは、テキストが画像のサイズに対して正確に適切な長さでない場合、段落間の間隔が奇妙になってやり直したくありません。
http://www.thorntonincraven.co.uk/our-village/welcome-to-the-village/
こんにちは、
フィードバックをありがとうございました。とても良いアイデアのように思えますので、4 つの簡単な質問に答えるために 1 分間お時間をいただきたいと思います: https://aitthemes.typeform.com/to/vc7arn これは、私たちのチームがより良い製品を作るのに役立ちます。ユニークな機能をより速く。
お時間をいただき、ご理解いただきありがとうございました。
よろしくお願いします！
ズラトコ
AITチーム
はい、テキストを折り返すことができません。このテキスト ブロックの組み合わせは役に立たないようです。
ブログに画像を挿入する唯一の方法としては、このアイデアは最悪です。テキストをうまく折り返すことができず、何をしても同じサイズになりません。特定の状況では良いアイデアですが、すべてに当てはまるわけではありません。場合によっては、画像について何かを言うのではなく、単に画像を段落で囲んだ画像が必要な場合もあります。
ラッパーを追加して全幅でコンテンツを使用する方法 yar 真剣に完全にカバーしてからその中にコンテナーを取り込む方法.. ビルダーは非常に混乱しており、コンテナーのラップを追加する方法は非常に悪いエディター yar
こんにちは、
お褒めの言葉をありがとうございます。私たちのブログページ https://www.ait-themes.club/blog/ をぜひチェックしてください。魅力的で役に立つ投稿を書くための役立つヒントがたくさん見つかります。
よろしくお願いします！
ズラトコ
AITチーム
こんにちは、アブドゥルさん
フィードバックをいただきまして誠にありがとうございます。私たちのチームにとっても大変感謝しております。
よろしくお願いします。
ズラトコ
AITチーム
私もこのスレッドの他の何人かの人と同じ問題を抱えています。以前は、写真やプロフィールが掲載されている「会社概要」ページのように、画像の周りにテキストを簡単に折り返すことができました。もしかしたら古いエディタを使っていたのかもしれません。覚えていない。しかし、私は今、新しい写真とプロフィールでサイトを更新しようとしているのですが、以前のプロフィールと写真の組み合わせのようにテキストを簡単に折り返す方法が見つかりませんでした。クラシック エディターに切り替えようとしましたが、サイトでは「新しいブロック エディター」セクションがあると警告され、新しい編集モードを使用し続ける必要がありました。新しい伝記や写真を以前の投稿のように見せる方法を教えていただけますか?ありがとう。
ちょっと、そこ、
Gutenberg を無効にしてクラシック WordPress エディターを使い続けたい場合は、「クラシック エディター プラグイン」でそれを可能にする WordPress コア チームによるプラグインを検討してください。
よろしくお願いします！
ズラトコ
AITチーム
画像を単純なテキストで囲みたい場合は、クラシック テキスト ブロック ([参照] をクリックしたときのブロックの最初の部分に基づいています) を挿入することでこれを行うことができます。単一のブロックでクラシック エディターを使用できるようになり、はい。これにより、画像を挿入してからラッピング オプションを選択できるようになります。問題は解決しました 🙂
ロンドンのSEOガイ、ありがとう!!!単純な解決策ですが、見落としていました。
そして…単純に「ブロックに変換」オプションを使用します。
これは機能するため、ブロック エディターにはその機能がありますが、適切に設定する方法が見つかりません。その間、このファッジは機能します。
ここでも同じ問題があります。この新しいバージョンはひどいもので、単に切り抜きたい場合を除いて、テキストを適切に折り返すことも、写真を小さくすることさえできません。
WordPress ブロックエディターで画像の周りにテキストを折り返すことができます。 「プレビュー」で見た通りに見えます。ただし、ブログを公開し、WordPress がそれをフォロワーにメールで送信すると、写真が上に、テキストが写真の下に表示されます。これは小型携帯電話だけでなく、デスクトップコンピュータでも起こります。積み重ねるのではなく、包んでほしい。
こんにちは、
ご連絡いただきありがとうございます。WordPress では、ブロックは期待どおりに画像の周りにテキストを回り込みません。役に立つかもしれないので、次の手順をご覧ください: https://motopress.com/blog/how-to-wrap-text-around-images-in-gutenberg/
よろしくお願いします！
ズラトコ
AITチーム
これらすべてを行うと、私のブログはプレビューで完全にラップされます。公開すると、ブログ ページで見栄えがよくなります。しかし、WordPress が私のフォロワーにメールを送信し、フォロワーがそのメールを開くと、ラップされたメールが表示されません。写真は本文の上に載せてあります。それは非常にプロフェッショナルではない外観です。古いクラシック エディターではそのような問題は一度もありませんでした。現在ブロック エディターを使用しているため、クリックできるクラシック オプションがあるにもかかわらず、クラシック エディターに戻ることができません。
こんにちは、
ご記入いただきありがとうございます。
ナレッジ ベースやビデオ チュートリアルを備えたドキュメントをご確認ください。
https://www.ait-themes.club/ait-themes-documentation/
または、専用のサポート チケット システムに技術的な質問を直接投稿してください。 https://system.ait-themes.club/support/add-question からアカウントにログインしてください。
カスタマー サポートは、営業日の中央ヨーロッパ時間の午前 8 時から午後 5 時まで提供されます。
さらに、以前のエディタを使用できるようにするプラグインもあります。 「クラシックエディタ」をインストールして有効化する必要があります。
心から！
ズラトコ
AITチーム
オプションがより制限されているため、これは従来の編集よりも優れているという意見には私は同意しません。このブロックは、さまざまなフォントが使用されており、テキスト ブロックよりも幅が広いため、視覚的に不快であることがわかりました。同じフォント、サイズ、余白の設定を維持しながら、画像の周りでテキストをスムーズに折り返すことができるため、雑誌のページにプロフェッショナリズムがもたらされます。これは、私がこのバージョンの WordPress にひどく失望している理由の一例にすぎません。
こんにちは、テレンス
ご意見ありがとうございます。 Citadela 体験版を試してみましたか?テキストや画像の調整に役立つユニークなブロックがいくつかあります。とにかく、フルバージョンのすべての機能を無料でテストできます。
良い１日を。