ワードプレスの画像に文字を回り込みさせる方法！。画像の外(周り)に文字を回り込みさせる方法ってどうやるの？今回は、ワードプレスの画像に文字を回り込みさせる方法！について書いていきます。
画像と文字、通常であれば縦に並ぶものですが、画像に文字を回り込ませることもできます。画像を左に配置することも、右に配置することもできるので、変化を付けてリズミカルに演出していきましょう。
| 結論を先に話ししておきます |
| ブロックエディターの「画像」と言うブロックを使用すれば、画像に文字を回り込ませることができます。現在、クラシックエディターを使用されている場合でも、画像に文字を回り込ませることは可能です。
但し、やり方は双方違うので、どちらかと言うと、ブロックエディターからやった方が簡単かも知れません。この記事では「ブロックエディター」と「クラシックエディター」に於いて、それぞれ図解を用いて解説していきます。
例えばですが、以前「画像の上に文字」「画像の右側に文字」「画像の左側に文字」「画像の下に文字」に関する投稿もしているので良ければ覗いて見て下さい。ブロックエディターはいろいろ使えて便利です。
以前投稿した下記の記事にも目を通して貰えると嬉しいです。 |
【ブロックエディターとは(動画付き)】
ブロックエディターは、ブロックシステムを採用し、コンテンツ同士を組み合わせ、整形しながら組んでいきます。ブロックエディターは、別の名を「Gutenberg/グーテンベルグ」と言います。
ブロックエディターは、Webサイトやブログなどにリッチでフレキシブルなレイアウトを作成できるようデザインされているのが特徴と言えるでしょう。コンテンツは、ブロックユニットとして作成します。
| ブロックエディターのブロックは「段落」「見出し」「メディア」「埋め込みオブジェクト」など、全てをコンポーネントとして扱い、双方に於いて、コンテンツを作成し、ワードプレスのデータベース内に保存します。 |
ではここで動画を視聴してみて下さい。題して「【2021年版】WordPressブロックエディターの使い方 基本編」です。
ブロックエディターの設定
この章では、図解を用いながら解説していきます。ブロックの「画像」を用いて作成していきますが、その前に、ブロックエディターとして設定されていない方は、下記の図解を参考にしてみて下さい。
では初めに、現在に於いて、クラシックエディターで記事を書いている場合、ブロックエディターに切り替える必要があります。まずは、ブロックエディターに設定する為のやり方を解説していきます。
- 「黄色枠」で囲まれている「設定」にマウスを移動するとプルダウンが表示されます。次に「桃色枠」で囲まれている「投稿設定」を開きましょう。
- 次の画面で「オレンジ色枠」で囲まれている「ブロックエディター」を選択し、左下にある変更を保存を押します。
- ブロックエディターを選択後「投稿」もしくは「固定ページ」の新規追加を開くと、下記のような画面が表示されます。
| ブロックエディターの新規画面を見ると、クラシックエディターの新規画面とは違って見えると思います。 |
【画像に文字を回り込ませよう】
この章では、ブロックエディターの「画像」と言うブロックを使って、画像に文字を回り込ませるやり方について図解を用いながら解説していきます。やり方はとても簡単なので誰でも直ぐに覚えられると思います。
- まず初めに「投稿」「固定ページ」のどちらでも構わないので新規追加を開きます。次に「赤色枠」で囲まれている「+」を押してみて下さい。
- +を押すと、ブロックの一覧が表示されます。その中の「オレンジ色枠」で囲まれている「画像」を押してみて下さい。
- 次の画面では「桃色枠」で囲まれている中に「アップロード」「画像を選択」「URLから挿入」の3つが横並びしています。コチラでは「赤色枠」で囲まれている「画像を選択」を選択します。
- すると「緑色枠」で囲まれているようにプルダウンが表示され、その中の「紫色枠」で囲まれている「メディアライブラリ」を開きましょう。
- 次の画面では、多数の画像が表示されているかと思います。コチラでは「水色枠」で囲まれている画像を選択してみました。選択後は「赤色枠」で囲まれている「選択」を押しましょう。
- すると選択した画像が「黄色枠」で囲まれているように表示されました。「オレンジ色枠」で囲まれている「キャプションを追加」は触らないようにして下さい。
- それでは「キャプションを追加」の下に「黄色枠」で囲まれている「ブロックを選択するには「/」を入力」を表示させて下さい。
- 表示させたブロックを選択するには「/」を入力の箇所に「赤色枠」で囲まれているように文字を入力しましょう。
- 次は「オレンジ色枠」で囲まれている「画像」を選択すると、右下に表示されている「緑色枠」で囲まれているように画像サイズが「100%」と表示されています。
- 次に、100%の画像を75%にする為「緑色枠」で囲まれているように「75%」としてみました。すると「紫色枠」で囲まれている画像が小さくなりました。
- 次は「水色枠」で囲まれているように「画像」を選択している状態で「赤色枠」で囲まれている「アイコン」を押してみて下さい。すると「桃色枠」で囲まれているようにプルダウンが表示されます。
そのプルダウンの中の「黄色枠」で囲まれている「左寄せ」を押してみましょう。
- すると「桃色枠」で囲まれている「画像」が左側に寄り「水色枠」で囲まれている「文字」が右側へ寄ったことが分かります。ではこの状態でプレビューを開くとどのような状態で見れるのか見てみましょう。
まずは「オレンジ色枠」で囲まれている「プレビュー」を押すと「緑色枠」で囲まれているようにプルダウンが表示されます。その中の「紫色枠」で囲まれている「新しいタブでプレビュー」を押してみましょう。
- トップページから見た感じです。「黄色枠」で囲まれているように、画像に文字を回り込みさせていることが分かります。
- 今度は、画像を右寄せにした状態で見た感じです。上記と同じく「桃色枠」で囲まれているように、画像に文字を回り込みさせていることが分かります。
| 間違って欲しくないこと |
| 「画像の横に文字を入力する」と「画像に文字を回り込みさせる」とは意味が違います。ここのところをしっかり理解しておきましょう。 |
【クラシックエディターでの設定】
ここからは、ワードプレスに標準装備として使うことができる機能で「画像に文字を回り込み」させていくやり方を解説していきます。念の為、ブロックエディターには、標準装備されていない機能です。
- では「黄色枠」で囲まれている「投稿」にマウスを移動するとプルダウンが表示され、その中の「オレンジ色枠」で囲まれている「新規追加」を押しましょう。
- するとクラシックエディターの新規投稿を追加画面が開きます。
- では先に「緑色枠」で囲まれている中に、貼り付ける画像の内容に沿った「文字」を入力していきましょう。
- 文字を入力後「赤色の縦棒」が表示されている箇所に「カーソル」を合わせ「オレンジ色枠」もしくは「水色枠」で囲まれている「挿入」を開くと「紫色枠」で囲まれているようにプルダウンが表示されます。
その中の「桃色枠」で囲まれている「メディアを追加」を開いてみましょう。つまり「オレンジ色枠」から開くのか「桃色枠」から開くのかのどちらかと言うことです。
- 開いた画像一覧の中から、予め準備しておいた画像を選択します。コチラでは「オレンジ色枠」で囲まれている「画像」を選択してみました。次に「水色枠」で囲まれている配置で「左」を選択しましょう。
最後に「緑色枠」で囲まれている「投稿に挿入」を押します。
- すると「紫色枠」で囲まれている文字の先頭に画像を表示させることができました。では「赤色枠」で囲まれている「プレビュー」を押してみましょう。
- トップページから見た感じです。「黄色枠」で囲まれている箇所を見ると、画像に文字を回り込みさせているのが分かります。
- 今度は、画像を右側に移動させてみましょう。先に「オレンジ色枠」で囲まれている画像を選択し、その中の「緑色枠」で囲まれている左から3番目のアイコンを選択してみましょう。
- 左側に表示されていた画像が「水色枠」で囲まれているように右側に移動しました。では「オレンジ色枠」で囲まれている「プレビュー」を押してみましょう。
- トップページから見た感じです。「緑色枠」で囲まれている箇所を見ると、画像に文字を回り込みさせているのが分かります。
| 間違って欲しくないこと |
| 「画像の横に文字を入力する」と「画像に文字を回り込みさせる」とは意味が違います。ここのところをしっかり理解しておきましょう。 |
今回は以上となります。ワードプレスの画像に文字を回り込みさせる方法！については、ブロックエディター側とクラシックエディター側では、そのやり方が違うことに気づかれたのではないでしょうか。
以前投稿した下記の記事にも目を通して貰えると嬉しいです。
