SWELLを使っていて、
- 記事タイトルの背景に、アイキャッチ画像が出てしまう
- スマホで見た時に、文字の被りが気になる・・・
そんな風にお困りではないでしょうか?(スマホ表示↓)
![アイキャッチと記事タイトルが被っている状態](https://ym-life.com/wp-content/uploads/2022/04/f1dbc2a2ec452a94fc339e7dbe541cba-1.jpg)
正直、このような状態はかなり見づらいです・・・。
特に、アイキャッチ画像に文字入れしている場合は尚更でしょう。
今回は、この被りを解消し、以下のような表示に切り替える方法をご紹介いたします。
![正しい表示](https://ym-life.com/wp-content/uploads/2022/04/5b80c0973552fe85da9f04f9744befc0.jpg)
![](https://ym-life.com/wp-content/uploads/2021/02/*バストアップ1(丸)-150x150.png)
こちらの方が断然見やすいですね!
目次
【SWELL】記事タイトル背景のアイキャッチ画像を消す方法
このような表示にするために必要なのは、
- タイトル
- アイキャッチ画像
それぞれの設定になります。
タイトルの設定
外観→カスタマイズ
![タイトルの設定1](https://ym-life.com/wp-content/uploads/2022/04/542ff35474f459a0d04a03ad2924bb98.jpg)
![タイトルの設定1](https://ym-life.com/wp-content/uploads/2022/04/542ff35474f459a0d04a03ad2924bb98.jpg)
「投稿固定ページ」をクリック。
![タイトルの設定2](https://ym-life.com/wp-content/uploads/2022/04/19a8670d0c080b19f27e23b99390676e.jpg)
![タイトルの設定2](https://ym-life.com/wp-content/uploads/2022/04/19a8670d0c080b19f27e23b99390676e.jpg)
「タイトル」をクリック。
![タイトルの設定3](https://ym-life.com/wp-content/uploads/2022/04/dedde00123ed357f0c01327bf6636c38.jpg)
![タイトルの設定3](https://ym-life.com/wp-content/uploads/2022/04/dedde00123ed357f0c01327bf6636c38.jpg)
タイトルの表示位置:「コンテンツ内」
にして、「公開」をクリックします。
![タイトルの設定5](https://ym-life.com/wp-content/uploads/2022/04/9a452d8ec821b08503308eba11b29569.jpg)
![タイトルの設定5](https://ym-life.com/wp-content/uploads/2022/04/9a452d8ec821b08503308eba11b29569.jpg)
アイキャッチ画像の設定
次に、アイキャッチ画像の設定です。
先ほどと同じ手順で、
外観→カスタマイズ→投稿固定ページへ。
「アイキャッチ画像」をクリック。
![アイキャッチ画像の設定1](https://ym-life.com/wp-content/uploads/2022/04/42cff97d67b12441c721b6313aaaea42.jpg)
![アイキャッチ画像の設定1](https://ym-life.com/wp-content/uploads/2022/04/42cff97d67b12441c721b6313aaaea42.jpg)
投稿ページ:本文の始めにアイキャッチ画像を表示
にして、「公開」をクリックします。
![アイキャッチ画像の設定2](https://ym-life.com/wp-content/uploads/2022/04/9a4157f1d619266b423192993eba3308.jpg)
![アイキャッチ画像の設定2](https://ym-life.com/wp-content/uploads/2022/04/9a4157f1d619266b423192993eba3308.jpg)
![](https://ym-life.com/wp-content/uploads/2021/04/バストアップ8(丸)-150x150.png)
![](https://ym-life.com/wp-content/uploads/2021/04/バストアップ8(丸)-150x150.png)
![](https://ym-life.com/wp-content/uploads/2021/04/バストアップ8(丸)-150x150.png)
これで設定は完了です!
最後に、表示が変更されているか確認しておきましょう。
あとがき
設定お疲れ様でした!
この設定だけで、全ての記事に自動反映されるところも便利ですね。
今回は、SWELLで記事タイトルの背景にアイキャッチ画像を表示されてしまっている場合の対処法についてでした。
コメント