ワードプレスの各種設定

【超簡単!】WordPressで画像の横にテキストを配置する方法

こんにちは。山ばりゅです。

今回は、WordPressで画像の横にテキストを配置する方法をご紹介したいと思います。やり方も超簡単で、知っておくと通常とは少し違うアクセントを持ったブログやサイト構成で読者の方を引き込むこともできるようになりますので、是非ぜひ今回も最後までお付き合いいただけましたらと思います。

超簡単!WordPressで画像の真横にテキストをサクサクサクサクっと配置する方法

少し前までは、WordPressで画像の真横にテキストを配置しようとすると、ちょっとしたプログラム入力が必要でしたが、WPがアップグレードされ、こういった作業もコード入力の知識が必要なく出来るようになりました。

アイコンをクリックして、パパっと指示通りに入力していくだけで、スタイリッシュな画面構成にすることができますので、非常に便利で有難い機能といえますよね。

では、早速画像の真横にテキストを配置する手順をご紹介していきましょう。

WordPressで画像の真横にテキストを配置する手順

まず、記事管理画面の左上辺りにある、「+」のアイコン、ブロックの追加をクリックして、表示される各候補の中から、「メディア」の部分にある「メディアと文章」をクリックします。

するとこんな感じにメディアと文章を貼り付けるブロックが表示されますので、順番に貼り付けていきましょう。では、最初にメディア(画像)を貼り付けていきたいと思います。画像はアップロード、メディアライブラリから選択することが可能。

アップロードを選択すると新たに画像を取り込むことができますし、メディアライブラリを選択すると、現在ご自身のWordPressに格納されている画像から選択することができます。

ちなみにここのタブをクリックすると、画像とテキストの配置位置を入れ替えることもできます。

はい。画像がこのように配置できました。では、テキストエリアにテキストを入力していきましょう。

テキストも入力できましたね。・・・が、ちょっとこれでは画像とテキストのバランスがおかしい、って言うかテキストがデカすぎますよね。そんな時は右のサイドバーでテキストの大きさを変更することができます。

まずサイズチェンジしたいテキストをドラックして範囲選択し、プリセットサイズから「特大」、「大」、「標準」、「小」・・・とあるので、ちょうどいいと思うものをクリックしていただいてもいいし、カスタムから任意の文字の大きさを入力することもできます。

ちなみに20ptでプリセットの「中」の大きさです。

・・・もうちょっと小さい方がいいかな。

というわけで、こちらではカスタム18ptに設定してみました。うん。なかなかいい感じになりましたね。

段落を追加したい場合は入力したテキストの下あたりに「+」のアイコンがあるので、そちらをクリックし、表示される候補の中から「段落」をクリックします。すると新たに段落のブロックが形成され、テキストが入力できるようになりますので、入力していきましょう。

入力が終われば、先ほどのようにテキストの大きさをご自身の好みの大きさに調整します。

ほぼほぼ出来上がりましたね。あとは、太字などの文字体裁をお好みで加えれば完成。ちなみに太字にしたい場合は、太字にしたい文字をドラックして範囲選択し、テキストエリアのタブにある「B」のアイコンをクリックすればオッケー。

はい。完成しました。いかがでしょう。画像について何か説明したい時や今回のように画像対象物のスペックなどを読者の方に説明する時などは、このように画像の右横にテキストがあったほうがより伝わりやすい感じがしますよね。

後は、こんな感じに何か手順を紹介している時にちょっと注意してもらいたいところやワンポイントアドバイス的に使うのも伝わりやすい配置といえそうです。

これで、画像の横にテキストを配置する手順は完了です。お疲れさまでした。

最後に

いかがだったでしょう。今回はWordPressで画像の横にテキストを配置する方法についてご紹介させていただきました。プログラム入力となるとちょっとややこしいなと感じてしまいますが、こうやってポン・ポン・サクサクってな感じでクオリティの高い配置を行えるのは本当にうれしいところですよね。

良ければぜひゼヒ使ってみて下さい。こちらの記事があなたのブログ、サイトアクセスの更なるアップのお役に立てれば幸いです。ではでは、今回はこの辺りで。今回も最後までお付き合いいただき、ありがとうございます。

記事が役に立ったらクリックプリーズ(^^♪

おススメの記事

-ワードプレスの各種設定
-,

Copyright© 山ばりゅのウェブコンビニ , 2020 All Rights Reserved.