ワードプレスで画像の横に文字を入力する方法。画像の横に文字を入力したいけど上手くいかないと嘆いている方は必見です。今回は、ワードプレスで画像の横に文字を入力する方法について書いていきます。
通常は、画像と文字が縦に並ぶものですが、画像の横に文字を配置することもできます。文字エリアの背景色を設定することもできるので、画像と相性の良い色を設定して、ブログをオシャレに仕上げましょう。
| 結論を先に話ししておきます |
| 今回の設定では、従来のクラシックエディターでは難しいことから、ブロックエディターを使っていきます。ワードプレスで画像の横に文字を入力する方法として、誰でも簡単にできる「メディアとテキスト」を使います。
画像の横に文字を入力していくと言うレイアウトは、難しそうに思うかも知れませんが、ブロックエディターの「メディアとテキスト」を使えば簡単にできます。CSSなどのコードを書く必要もなく、画像を選んで文字を入力していけば完成します。
ブロックエディターの「メディアとテキスト」は、画像と文字を横並びにレイアウトできるブロックです。この投稿記事では、図解を用いながら解説していくので、頭をひねる心配もないかと思います。やってみると意外と簡単です。
以前投稿した下記の記事にも目を通して貰えると嬉しいです。 |
目次はコチラ
【ブロックエディターとは(動画付き)】
「ブロックエディター」は「ブロックシステム」を採用し、コンテンツ同士を組み合わせ、整形しながら組んでいきます。「ブロックエディター」は、別の名を「Gutenberg/グーテンベルグ」と言います。
また「ブロックエディター」は、Webサイトやブログなどにリッチでフレキシブルなレイアウトを作成できるようデザインされているのが特徴と言えるでしょう。コンテンツは、ブロックユニットとして作成します。
| 「ブロックエディター」のブロックは「段落」「見出し」「メディア」「埋め込みオブジェクト」など、全てをコンポーネントとして扱い、双方に於いて、コンテンツを作成し、ワードプレスのデータベース内に保存します。 |
ではここで動画を視聴してみて下さい。題して「WordPressブロックエディターの使い方 基本編」です。
【ブロックエディターとして設定】
クラシックエディターには、ブロック機能と言うものがないので、予め、ブロックエディターとして変更する必要があります。この章では、図解を用いてブロックエディターの変更方法について解説していきます。
変更方法については簡単なのですが、念の為、分からない方もいるのではと思い図解を用意しました。それではブロックエディターのブロック機能を使う為の設定を一緒にやっていきましょう。
- 「黄色枠」で囲まれている「設定」にマウスを移動するとプルダウンが表示されます。次に「桃色枠」で囲まれている「投稿設定」を開きます。
- 次に「オレンジ色枠」で囲まれている「ブロックエディター」を選択し、最後に左下にある変更を保存を押しましょう。
- ブロックエディターを選択後、投稿もしくは固定ページの新規追加を開くと、下記のような画面が表示されます。
| 「ブロックエディター」の新規画面を見ると、クラシックエディターの新規画面とは違って見えるかと思います。 |
【ブロックの「メディアとテキスト」を使用する】
ブロックエディターでは、便利な「メディアとテキスト」と言うブロックがある為、画像の横に文字を入力することは簡単ですが、旧エディターであるクラシックエディターでは難しいと思います。
この章では、そのやり方を図解を用いて解説していくので難しいことはないかと思います。現在、クラシックエディターで記事を書いている場合、予め、ブロックエディターに変更しておきましょう。
- 「投稿」でも「固定ページ」でも構いませんが、ブロックエディターを開いたら「緑色枠」で囲まれている「+」を開いてみましょう。
- すると、ブロックが沢山表示されているエリアが開きます。その中の「オレンジ色枠」で囲まれている「メディアとテキスト」があるので開いてみて下さい。
- 次の画面では、左右に分かれた「紫色枠」で囲まれている「左側にメディアエリア」「右側にテキストエリア」が別々で表示されています。まずは「メディアエリア」の中の「赤色枠」に注目して下さい。
その「赤色枠」で囲まれている中には「アップロード」と「メディアを選択」があります。ここでは画像を選択したいので、選びやすい方を開きましょう。
- ここではメディアを選択側を開きました。すると「黄色枠」で囲まれているようにプルダウンが表示されました。その中の「赤色枠」で囲まれている「メディアライブラリ」を開いてみましょう。
- 開くと、事前に登録してある複数の画像が表示されるかと思います。こちらでは「紫色枠」で囲まれている画像を選択してみました。その後「赤色枠」で囲まれている「選択」を押しましょう。
- 次の画面では、上部で選択した画像が「桃色枠」で囲まれている「メディアエリア内」に表示されました。
文字入力、文字色、背景色などの設定
ここまでブロックの「メディアとテキスト」を使用して、左側のメディアエリア内に画像を挿入することができました。この章では「文字の入力」「文字色の変更」「背景色の変更」について解説していきます。
- 次は「黄色枠」で囲まれている中に文字を入力していきましょう。まず初めに「緑色枠」で囲まれているように「協調したい言葉」を入力します。次に「水色枠」で囲まれているように「本文を入力」します。
ここで「協調したい言葉」と「本文に入力した文字の大きさ」が違うことに気づかれたかと思います。
- 次に「オレンジ色枠」で囲まれている「プレビュー」を開いてみましょう。すると「紫色枠」で囲まれているプルダウンが開き「水色枠」で囲まれている「新しいタブでプレビュー」を開いてみましょう。
- 下記の画面は、トップページから見た感じです。「桃色枠」で囲まれているように画像の右側に文字が入力されていることが分かります。
- この状態では、あまりパッとしないので文字に色を付けてみましょう。まず初めに「紫色枠」で囲まれている協調したい言葉を選択した状態で「緑色枠」で囲まれている「テキスト」を開きます。
すると「黄色枠」で囲まれているようにプルダウンが開きます。次に、好きな色を選択します。ここでは「赤色枠」で囲まれている「赤」を選択してみました。
- ここでは「オレンジ色枠」で囲まれている「文章」も変更してみます。同じように選択した状態で「紫色枠」で囲まれている「テキスト」を開きます。すると「水色枠」で囲まれているようにプルダウンが開きます。
文章は「緑色枠」で囲まれている「緑」を選択してみました。
- 次に「オレンジ色枠」で囲まれている「プレビュー」を開いてみましょう。すると「桃色枠」で囲まれているプルダウンが開きます。その中の「黄色枠」で囲まれている「新しいタブでプレビュー」を開いてみましょう。
- 下記の画面は、トップページから見た感じです。「紫色枠」で囲まれているように画像の右側に色の付いた文字が入力されていることが分かります。
- 次は、カバー自体に背景色を付けてみたいと思います。まずはカバー全体を選択した後「赤色枠」で囲まれている「背景」を押します。すると「緑色枠」で囲まれているようにプルダウンが表示されます。
すると「黄色枠」で囲まれている「単色」と「グラデーション」があるので、どちらかを選択してみて下さい。こちらでは単色を選択し「青色枠」で囲まれている「青」を選択してみました。
- このままでは文字が読みずらいので色の変更をします。「赤色枠」で囲まれている文字全てを選択した後「緑色枠」で囲まれている「テキスト」を押すと「黄色枠」で囲まれているようにプルダウンが表示されます。
次に、こちらでは「紫色枠」で囲まれている「白」を選択してみたいと思います。
- では「桃色枠」で囲まれている「プレビュー」を押してみましょう。すると「黄色枠」で囲まれているようにプルダウンが表示されます。次に「水色枠」で囲まれている「新しいタブでプレビュー」を押してみましょう。
- 下記の画面は、トップページから見た感じです。「緑色枠」で囲まれているように文字が見やすくなりました。
| 文字色やカバー自体の背景色など、いろいろ触ってみると楽しいかも知れません。カバー自体の背景色には、単色の他、グラデーションもあります。 |
今回は以上となります。ワードプレスで画像の横に文字を入力する方法については理解して貰えたかと思います。やってみると意外と簡単なもので、とにかくいろいろ触ってみると良いかも知れません。
以前投稿した下記の記事にも目を通して貰えると嬉しいです。
