WordPressテーマ【SWELL】にはうれしい機能がはじめから実装されています。
今回は画像とテキストを左右に並べてそれを少し重ねて表示させる方法をご紹介します。。
![画像とテキストを重ねて表示させている例の画像](https://aroma-ecru.com/wp-content/uploads/2021/11/2021-11-27-19.22.00-1024x466.jpg)
![](https://aroma-ecru.com/wp-content/uploads/2022/01/uresiicercle-1-150x150.png)
画像と文字を重ねて表示させるデザインをやってみたかったです
![](https://aroma-ecru.com/wp-content/uploads/2021/11/setsukosan03_nocamera-150x150.png)
![](https://aroma-ecru.com/wp-content/uploads/2021/11/setsukosan03_nocamera-150x150.png)
![](https://aroma-ecru.com/wp-content/uploads/2021/11/setsukosan03_nocamera-150x150.png)
最近こういう画像とテキストが重なったデザインって人気ですよね。
SWELLでは最初からこの機能が入ってるので誰でも簡単に実装できます。
画像とテキストを重ねて表示させる方法
- 新規ページを表示する
- メディアとテキストを選ぶ
- 文字の大きさを調整
- ブロークングリッドを実装
- テキストの背景色の設定
もしくは既存のページに画像とテキストを重ねて入れたい部分を表示させる
①フルワイド画面の中の①「+」ボタンを押してショートカットキーを表示させて「すべてのメニュー」をクリック
②左側メニューから②「メディアとテキスト」をクリック
![「メディアとテキスト」](https://aroma-ecru.com/wp-content/uploads/2021/11/2021-11-27-20.26.14-1024x515.jpg)
![「メディアとテキスト」](https://aroma-ecru.com/wp-content/uploads/2021/11/2021-11-27-20.26.14-1024x515.jpg)
③「アップロード」または「Select Media」を選ぶ
![「アップロード」または「Select Media」を選ぶ](https://aroma-ecru.com/wp-content/uploads/2021/11/2021-11-27-20.29.28-1024x539.jpg)
![「アップロード」または「Select Media」を選ぶ](https://aroma-ecru.com/wp-content/uploads/2021/11/2021-11-27-20.29.28-1024x539.jpg)
④左側に画像を入れ、右側にテキストを入れる
![左側に画像を入れ、右側にテキストを入れる](https://aroma-ecru.com/wp-content/uploads/2021/11/2021-11-27-20.34.16-1024x512.png)
![左側に画像を入れ、右側にテキストを入れる](https://aroma-ecru.com/wp-content/uploads/2021/11/2021-11-27-20.34.16-1024x512.png)
右側のメニューから「フォントサイズ」の下のドロップダウンメニューから好きな大きさを選ぶ
(ここでは「中」を選びました)
![右側のメニューから「フォントサイズ」の下のドロップダウンメニューから好きな大きさを選ぶ](https://aroma-ecru.com/wp-content/uploads/2021/11/2021-11-27-20.37.56-1024x430.jpg)
![右側のメニューから「フォントサイズ」の下のドロップダウンメニューから好きな大きさを選ぶ](https://aroma-ecru.com/wp-content/uploads/2021/11/2021-11-27-20.37.56-1024x430.jpg)
「メディアとテキスト」セクションを選択し右側メニューから「ブロークングリッド」を選ぶ
![「メディアとテキスト」セクションを選択し右側メニューから「ブロークングリッド」を選ぶ](https://aroma-ecru.com/wp-content/uploads/2021/11/2021-11-27-20.41.47-1024x429.jpg)
![「メディアとテキスト」セクションを選択し右側メニューから「ブロークングリッド」を選ぶ](https://aroma-ecru.com/wp-content/uploads/2021/11/2021-11-27-20.41.47-1024x429.jpg)
文字と画像が重なった
![文字と画像が重なった](https://aroma-ecru.com/wp-content/uploads/2021/11/2021-11-27-20.43.54-1024x514.jpg)
![文字と画像が重なった](https://aroma-ecru.com/wp-content/uploads/2021/11/2021-11-27-20.43.54-1024x514.jpg)
テキスト部分をクリックして選びます。
右側メニューから①「色」の右矢印のドロップダウンをクリックし②背景色から好みの色を選ぶ
(ここでは白を選んでいます)
![](https://aroma-ecru.com/wp-content/uploads/2021/11/2021-11-27-21.09.43-1024x448.jpg)
![](https://aroma-ecru.com/wp-content/uploads/2021/11/2021-11-27-21.09.43-1024x448.jpg)
パソコンで確認すると思った通り表示された
![](https://aroma-ecru.com/wp-content/uploads/2021/11/2021-11-27-21.16.53-1024x479.png)
![](https://aroma-ecru.com/wp-content/uploads/2021/11/2021-11-27-21.16.53-1024x479.png)
スマホでの表示はこんな感じ
![](https://aroma-ecru.com/wp-content/uploads/2021/11/2021-11-27-21.19.30.png)
![](https://aroma-ecru.com/wp-content/uploads/2021/11/2021-11-27-21.19.30.png)
テキストの背景色を透明にする
ここからはやりたいひとだけやってください。
背景色を少し透過させることもできます。
![](https://aroma-ecru.com/wp-content/uploads/2021/11/2021-11-27-21.36.48-1024x467.jpg)
![](https://aroma-ecru.com/wp-content/uploads/2021/11/2021-11-27-21.36.48-1024x467.jpg)
![](https://aroma-ecru.com/wp-content/uploads/2021/11/2021-11-27-21.41.24-1024x481.jpg)
![](https://aroma-ecru.com/wp-content/uploads/2021/11/2021-11-27-21.41.24-1024x481.jpg)
![](https://aroma-ecru.com/wp-content/uploads/2021/11/setsukosan03_nocamera-150x150.png)
![](https://aroma-ecru.com/wp-content/uploads/2021/11/setsukosan03_nocamera-150x150.png)
![](https://aroma-ecru.com/wp-content/uploads/2021/11/setsukosan03_nocamera-150x150.png)
背景を透明にするのが好みの方はチャレンジしてね。
上の黒いバーから「カスタマイズ」を押す
![](https://aroma-ecru.com/wp-content/uploads/2021/11/2021-11-27-21.49.25-1024x577.jpg)
![](https://aroma-ecru.com/wp-content/uploads/2021/11/2021-11-27-21.49.25-1024x577.jpg)
![](https://aroma-ecru.com/wp-content/uploads/2021/11/2021-11-27-21.51.52-1024x524.jpg)
![](https://aroma-ecru.com/wp-content/uploads/2021/11/2021-11-27-21.51.52-1024x524.jpg)
![](https://aroma-ecru.com/wp-content/uploads/2021/11/2021-11-27-22.10.32-1024x505.jpg)
![](https://aroma-ecru.com/wp-content/uploads/2021/11/2021-11-27-22.10.32-1024x505.jpg)
下記のコードを記述する
/* 重なったテキストの背景を半透明に */
.has-white-background-color {
background-color: #fff9!important;
}
![](https://aroma-ecru.com/wp-content/uploads/2021/11/code-1.png)
![](https://aroma-ecru.com/wp-content/uploads/2021/11/code-1.png)
透明にした場合、編集画面上は透き通った表示にはなりません。
必ずプレビューを見て透き通ったかどうか確認してください。
![](https://aroma-ecru.com/wp-content/uploads/2022/01/OKcercle-1-150x150.png)
![](https://aroma-ecru.com/wp-content/uploads/2022/01/OKcercle-1-150x150.png)
![](https://aroma-ecru.com/wp-content/uploads/2022/01/OKcercle-1-150x150.png)
わーい、プロっぽいデザインになった〜
コメントを投稿するにはログインしてください。