ワードプレスで画像の上にテキストを重ねる方法。ブロックエディターを使って、画像の上に「テキスト」を入力してみましょう。今回は、ワードプレスで画像の上にテキストを重ねる方法について書いていきます。
ブロックエディターでは、通常の画像の上に「テキスト」を重ねて書こうと思っても書けません。ではその場合、どうすれば良いのでしょうか。画像の上に「テキスト」を重ねたい場合、ブロックの「カバー」を使います。
| 結論を先に話ししておきます |
| ブロックエディターの画像に「テキスト」を重ねる手順としては、後の記事で細かく解説していきますが、概要としては「①カバーブロックを記事内に挿入」「②挿入したカバー内に画像を挿入」「③画像の上にテキストを入力」です。
画像の上に入力した「テキストの色を変更」することもできます。また画像そのものに色を重ねる「カラーオーバーレイ」や「画像の透過」を変更したりすることもできます。これを従来のクラシックエディターでやろうとしてもできません。
クラシックエディターの場合「HTML」や「CSS」と言ったような知識が必要となる訳です。しかしながら、ブロックエディターを使えば、そのような面倒なことは一切する必要がなく、誰でも簡単にできます。
以前投稿した下記の記事にも目を通して貰えると嬉しいです。 |
目次はコチラ
【ブロックエディターとは(動画付き)】
ブロックエディターは「ブロックシステム」を採用し、コンテンツ同士を組み合わせ、整形しながら組んでいきます。ブロックエディターは、別の名を「Gutenberg/グーテンベルグ」と言います。
またブロックエディターは、Webサイトやデジタル製品用にリッチでフレキシブルなレイアウトを作成できるようデザインされているのが特徴と言えるでしょう。コンテンツは、ブロックユニットとして作成します。
フリーフォームテキストに「メディア」「オブジェクト」「ショートコード」などを埋め込む方法とは異なります。また、念の為書いておくと「ショートコードブロック」と言うものがあります。
| ブロックエディターのブロックは「段落」「見出し」「メディア」「埋め込みオブジェクト」など、全てをコンポーネントとして扱い、双方に於いて、コンテンツを作成し、ワードプレスのデータベース内に保存します。 |
ではここで動画を視聴してみて下さい。題して「WordPressブロックエディターの使い方 基本編」です。
【ブロックエディターとして設定しよう】
クラシックエディターには、ブロック機能と言うものがないので、予め、ブロックエディターとして変更しておく必要があります。この章では、図解を用いてブロックエディターの変更方法について解説していきます。
変更方法については簡単なのですが、念の為、分からない方もいるのではと思い図解を用意しました。それではブロックエディターのブロック機能を使う為の設定を一緒にやっていきましょう。
- サイドメニューの「黄色枠」で囲まれている「設定」にマウスを移動すると、プルダウンメニューが表示されます。次に「桃色枠」で囲まれている「投稿設定」を開きましょう。
- 次に、すべてのユーザーのデフォルトエディターで「オレンジ色枠」で囲まれている「ブロックエディター」を選択し、最後に左下にある変更を保存を押しましょう。
- ブロックエディターを選択後、投稿もしくは固定ページの新規追加を開くと、下記のような画面が表示されます。
- 下記の図解は「クラシックエディター」を選択した場合の新規追加画面です。
| 「クラシックエディター」と「ブロックエディター」の新規追加画面は、上記の図解を見てもお分かりのように異なっていることが分かります。 |
【カバーのブロックを使用する】
ブロックエディターのカバーのことをカバーブロックと言うことはお分かり頂けたかと思います。この章から、図解を用いてブロックエディターを開き、ブロック一覧の中にあるカバーを選択していきます。
カバーを開いたら、お好きな画像を選択し「画像の中にテキストを入力」したり「入力したテキストの色を変更」したり「テキストの背景に色」をつけたり「画像自体を縦に小さく」したり、いろいろやっていきます。
- ブロックエディターに変更したら、投稿もしくは固定ページの新規追加を押しましょう。すると「赤色枠」で囲まれている「+」を押します。
- 左上部の+を押すと、メニューが開きます。「緑色枠」で囲まれている「カバー」を押してみましょう。
- カバーを開くと「黄色枠」で囲まれている「カバー」が開きます。この中に「オレンジ色枠」で囲まれている「アップロード」と「水色枠」で囲まれている「メディアを選択」があります。
ここでは「アップロードして画像を読み込むのか」「メディアを選択の中から、画像を選択するのか」を決めて下さい。
- 下記の図解では、メディアを選択の方を選択してみました。すると「紫色枠」で囲まれているプルダウンメニューが開くので「緑色枠」で囲まれている「メディアライブラリ」を開いてみましょう。
- ここでは「赤色枠」で囲まれている「画像」を選択してみます。画像を選択したら「緑色枠」で囲まれている「選択」を押してみましょう。
- すると「桃色枠」で囲まれているように「画像」を取り込むことができました。次に「緑色枠」で囲まれている箇所に「タイトルを入力」してみて下さい。
- ここでは「黄色枠」で囲まれているように「アフィリエイトマニュアル」と入力してみました。ただこの状態だと、テキストが見ずらいので、白に変更してみたいと思います。
- テキストの色を変更するには「オレンジ色枠」で囲まれている「アフィリエイトマニュアル」を選択した状態にして下さい。次に「紫色枠」で囲まれている「テキスト」を開いてみましょう。
- テキストを開くと「水色枠」で囲まれている「カラーパレット」が開きます。
- ここでは、テキストの色を白にしたいので「赤色枠」で囲まれている「白」を選択しました。その後、カラーパレットを閉じます。
- すると変更後は「オレンジ色枠」で囲まれているように「白」に変更されていることが分かります。
- では一度、プレビューで見てみましょう。まずは「桃色枠」で囲まれている「プレビュー」を押してみて下さい。すると「黄色枠」で囲まれているようにプルダウンメニューが表示されます。
次に「緑色枠」で囲まれている「新しいタブでプレビュー」を押してみましょう。
- プレビューを開くと、ブログのトップページが開きました。「オレンジ色枠」で囲まれているように画像は幅広で、テキストの色は「紫色枠」で囲まれているように「白」で表示されていることが分かります。
テキストに背景色をつける
画像上に「テキストを入力する方法」と「テキスト自体に色をつける方法」については、理解して頂けたかと思います。この章では「テキストの背景に色をつける方法」について書いていきます。
上記と同じように図解を用いて解説していきますので、難しいことはないかと思います。「テキストの背景に色をつける方法」についても、とても簡単なので直ぐにやり方を覚えられると思います。
- 「テキスト」の背景に色をつける場合「黄色枠」で表示させているように、テキストの前後どちらかに「カーソル」を合わせて下さい。次に「緑色枠」で囲まれている「背景」を押してみましょう。
すると左側に「桃色枠」で囲まれているようにプルダウンメニューが表示されます。
- ここでは「水色」「緑色」「オレンジ色」の3色を選んでみました。
- ではここで、オレンジ色の場合を例に「紫色枠」で囲まれている「プレビュー」を押してみましょう。すると「黄色枠」で囲まれているプルダウンメニューが表示されるかと思います。
その中の「桃色枠」で囲まれている「新しいタブでプレビュー」を押してみましょう。
- 下記の図解は、トップページを開いて確認してみた画像です。「赤色枠」で囲まれているように、テキストの背景にオレンジ色の背景色がつくようになりました。
画像自体の高さを調整する
ここまでの内容で「画像内にテキストを入力する」「テキストの色を変更する」「テキストの背景に色をつける」など、おこなってきましたが、この章では「画像自体の高さを調整するやり方」を見ていきましょう。
画像自体の高さを調整するやり方も簡単です。直ぐに覚えられます。それでは今までと同様に、図解を用いて解説していきます。テキストだけを並べて解説していくより、図解を用いた方が分かりやすいですね。
- では最初に「紫色枠」で囲まれている画像を選択します。すると「赤色の⇔」が示す箇所に丸いボッチがあるので、そこにマウスを当て、クリックしている状態で、上下に移動させてみて下さい。
- 上部の画像と見比べても狭くなっていることが分かるかと思います。ではプレビューで見てみましょう。まずは「オレンジ色枠」で囲まれている「プレビュー」を押してみて下さい。
すると「緑色枠」で囲まれているようにプルダウンメニューが表示されます。次に「水色枠」で囲まれている「新しいタブでプレビュー」を押してみましょう。
- 下記の図解は、トップページを開いて見た画面です。「桃色枠」で囲まれているように、画像自体が縦に小さくなっていることが伺えます。
今回は以上となります。ワードプレスで画像の上にテキストを重ねる方法については理解して頂けたかと思います。ブロックエディターは、使い慣れてくるととても使いやすく便利なアイテムと言えます。
以前投稿した下記の記事にも目を通して貰えると嬉しいです。
