株式会社火燵(こたつ)は、成果や売上にこだわる方のための動画マーケティング会社です。動画コンサルティング・動画制作・WEBマーケティング・動画制作内製化支援ならお任せください。

画像加工なし!簡単!WordPressで画像に文字を被せる方法【初心者向け/WordPressの使い方】

その他

みなさまこんにちは。弊社でもウェブサイト制作によく使用しているCMS、WordPressの使い方を何回かに分けてお伝えしております。

今回は、画像加工なしで簡単に、WordPress上のみで画像にテキストを被せる方法をお伝えいたします。

画像を複数並べたり、画像の横にテキストなどを並べたり、画像以外の複数ブロックを並べたりする方法は、こちらの記事をご覧ください。

カバーブロックアイコン

画像の中にテキストを被せる機能もあります。
それには、「カバー」というブロックを使用します。

カバーブロックでテキストを被せた例

画像に書かれているテキストは選択、コピーペーストできるようになっています。つまり、加工なしで画像の上にテキストを載せているのがわかります。これが、カバーブロックの機能です。

「カバー」ブロックの挿入

プラスボタンから「カバー」ブロック選択
エディタ画面の「ブロックを追加」から「カバー」ブロック選択
左上のプラスボタンからメニューを開いて「カバー」ブロックを選択
画面左上プラスボタンからメニューを開き「カバー」ブロック選択
カバーブロックの挿入

画像をアップロード、もしくはメディアライブラリから選択します。画像だけでなく、動画も可能です。
※YouTubeなどの外部埋め込みは除きます。

色を選択すると、背景色のみのシンプルなデザインにできます。

カバーで色を選択した場合
カバーブロックで色を選択する(アニメーション)
カバーブロックで色を選択

「カバー」ブロックの変換

画像ブロックの変換方法は、2通りあります。

  • ブロックツールバーの「A」とかかれたマーク「画像上にテキストを追加」をクリックする。
    画像ブロックツールから「画像上にテキストを追加」をクリック
  • ブロックツールバーの左端にある「画像:ブロックタイプまたはスタイルを変更」アイコンをクリックして「カバー」を選択する。
    「画像:ブロックタイプまたはスタイルを変更」から「カバー」ブロックに変換

さて、これでメディアの上にテキストを記述できるようになりました。

メディア上のテキスト編集

カバーブロックのメディアに被せている段落ブロック

メディアの上にあるテキストは、段落ブロックです。もちろんフォント変更や文字装飾なども可能です。

カバーブロックの編集

デフォルトで入っている段落ブロックは削除可能です。別のブロックも追加できます。

配置変更

カバーブロックの配置変更

「画像」ブロックと同様に、画像の配置も右寄せ・中央揃え・左寄せなどが選択できます。

カバーブロックの配置変更(アニメーション)

コンテンツ位置を変更

コンテンツ位置を変更

ブロックツールバーにある、9つの黒い四角い点マーク「コンテンツ位置を変更」でテキストの配置を調節できます。

大きな黒い点がコンテンツの位置です。

コンテンツ位置を右上に設定

デフォルトでは中央になっているのを右上にすると、テキストがメディアの右上に配置されます。

カバーブロックのコンテンツ位置を調整(アニメーション)

フルハイトを切り替え

フルハイトを切り替え

4つの隅にカギカッコがあるアイコン「フルハイトを切り替え」では、画像の高さがウィンドウと同じになります。

これは、どのデバイスやブラウザサイズも変わりません。

フルハイトのカバーブロックを様々なウィンドウ幅で確認(アニメーション)
フルハイトのカバーブロックを様々なウィンドウ幅で確認

メディアの置換

メディアの変更は、「置換」で可能です。

カバーブロックツールの「置換」メニュー

WordPressへアップ済みの画像に差し替えるなら「メディアライブラリを開く」を、新しい画像をアップロードするなら「アップロード」を選択します。

メディアライブラリから画像を選択する
メディアライブラリからの画像選択方法

右メニューバーを解説しましょう。

メディア設定

カバーブロックのメディア設定
固定配置
オンにすると、スクロールしても画像がその場から動かなくなります。
繰り返し背景
オンにすると、画像を複数配置した背景になります。

これらを活用すれば、このように画像を背景にしたデザインを作成できます。

カバーブロックを背景としたレイアウト例(アニメーション)

焦点ピッカー

焦点ピッカー

焦点ピッカー」の青い丸とその下にある「左」と「上」の入力エリアで、切り取りの中心点をどこをするか調整できます。

※固定配置がオンだと表示されません

メディアをクリア」で画像を削除します。

焦点ピッカーの操作方法(アニメーション)

サイズ

カバーブロックのサイズ設定

画像の最小の高さを変えられます。
入力ボックス右にある「px」をクリックすると、他の単位を選択できます。

単位をクリックで選択

「最小の高さ」であるため、設定したサイズよりも画像の中のブロックが長い場合は、反映されません。

「カバー画像の最小の高さ」を200pxに設定したカバーブロック
「カバー画像の最小の高さ」200px(中身なし)
「カバー画像の最小の高さ」で設定した200pxよりも長いブロックが入ったカバーブロック
「カバー画像の最小の高さ」200px(長いブロック入り)

オーバーレイ

オーバーレイの設定

メディアに被せる色を変えられます。
色のフィルターがいらない場合は、不透明度を「0」にしましょう。色が消えます。

オーバーレイで不透明度を0にしたカバーブロック
オーバーレイの設定変更(アニメーション)

以上、画像や動画にテキストなどを被せられる、「カバー」ブロックを解説しました。

画像を複数並べたり、画像の横にテキストなどを並べたり、画像以外の複数ブロックを並べたりする方法は、こちらの記事をご覧ください。

その他のブロックについての解説は、WordPressレクチャーからご覧ください。

WordPressレクチャーシリーズ一覧

「その他」の関連記事


新着記事