WordPressで画像の横に文字を配置する方法

WordPressブログを使っていておすすめ記事として別の記事を紹介したいときに、
画像の横に文字を配置して見栄え良く読者の方に紹介したい場合ってありませんか？

簡単にできますよ！一緒にやってみましょう

WordPressで画像の横に文字を表示させる

ご説明の前に注意事項です。
●ブロックエディター編集
●affinger6を使っています。

　WordPressの編集画面。改行すると、右端に青色でが出てきませんか？
の「ブロックを追加」をクリック。

　「メディアとテキスト」を選択します。
最初のブロックで見つからないときは「すべて表示」をクリックします。
メディアという項目の中に「メディアとテキスト」があります。

　メディアとテキストを選択したら、下記の画面が表示されます。
メディアを選択をクリックします。

　メディアライブラリをクリックします。

　メディアの選択またはアップロードが出てきます。
ここはあなたがパソコンに保存している画像の一覧です。
記事に載せたい画像をクリックしましょう。

　画像を選択したら、右下の「選択」をクリックしてください。

　画像が編集画面に表示されましたか？画像の右側面に丸印がありますよね？
そこにカーソルを合わせてください。

そのままドラッグすると画像を大きくしたり小さくすることができます。
あなたのお好みの大きさに画像を変更しましょう。

次に、画像の右にコンテンツとありますよね？
そこをクリックして文章を入力しましょう。

　画像をクリックするとメディアとテキスト設定ボックスが現れます。

赤線のマークをクリックすると、
画像の上部、中央、下部に文章の配置設定をすることができます。
今回は上部にしてみます。

私は上揃え設定にしたので、文章は画像からみて上部に表示されています。
中央揃えにすれば画像の真ん中に、下揃えは画像の下の方に文章が表示されます。

　文章を作成し終わりましたか？ここまでは大丈夫でしょうか

次に、文章の背面に色を付けるとより見栄えも良くなり、
分かりやすくなりますのでやってみましょう。

WordPress編集画面の右側にブロック項目があります。
下の方に「色」がありますよね？
背景をクリックします。

１０　好きな色を選択してください。
グラデーションで色を選ぶと文章の背面色がグラデーションになって表示されます。

文章の背面に選択した色が表示されているはずです。
これで、完成

意外に簡単でしたよね！
htmlタグで設定すると難しそうですけど、
メディアとテキスト設定であれば簡単に画像と文章を横に並べられます。

下記は私が参考に、メディアとテキストで作ったものです
ちなみに、メディアとテキストボックスで画像と文字にリンクもできます！

おすすめ記事

WordPressを使っていて動きが遅くてイライラする、不具合も多い・・・。
他のレンタルサーバーに引っ越そうとお悩みですか？

それなら、XSERVERはおすすめです！

●設定が簡単！
●サクサク動くからストレスなし！
●サイトの動きが快適ならサイトに訪れた方を逃しにくいという利点

まとめ

画像と文章を横に並べる方法についてご紹介しました。
ブログを継続していたら記事数も当然増えていきますよね。

そうすると、別の記事も参考になるから紹介したいという機会が自然と多くなるはず。
そんなときにこの方法は大いに役立ちます

あなたの疑問が解決できたら嬉しいです。