メインビジュアルにスライドショーを利用するため、テーマ＞カスタマイズ＞トップページ＞メインビジュアル を利用しています。
ただ、直接文字を入れると背景との組み合わせで視認性が悪く（読みにくい）なることが多いです。
タイトルと本文の背景に添付画像の理想のような背景の帯を入れる方法をお知らせください。
@mail_info さま
ご質問いただきましてありがとうございます。
返信が遅くなり申し訳ありません。
メインビジュアルの文字の視認性を上げる方法として
以下の3つをご紹介させていただきます。
1.カスタマイザー「追加CSS」にCSSを追加する方法
2.カスタマイザーの入力欄にインラインCSSを追加する方法
3.カスタマイザーメインビジュアルのフィルター機能を利用する方法
1が今回ご所望の形に近い形となりますが、CSSの調整が少し複雑になります。
2はインラインの少量の記述で視認性が良くなる方法です。
3はCSSを全く書かずにXWRITEの設定のみで調整できる方法です。
それぞれ続きの投稿でご案内させていただきます。
1.カスタマイザー「追加CSS」にCSSを追加する方法
下記CSSコードを「追加CSS」に追加していただくことで調整することができます。
ソースコード
.item__info.container{
transition: inherit !important;
}
.item__info.container::after{
position: absolute;
content: "";
width: 100vw !important;
height: 160px !important; /* お好みに応じてPC表示時の高さを変更してください（張り付ける際はこちらのコメントコードをはずしてください） */
background-color: green !important; /* お好みに応じて背景色を変更してください（張り付ける際はこちらのコメントコードをはずしてください） */
z-index: -1;
@media( width < 768px ){
height: 100px !important; /* お好みに応じてモバイル表示時の高さを変更してください （張り付ける際はこちらのコメントコードをはずしてください）*/
}
}
2.カスタマイザーの入力欄にインラインCSSを追加する方法
カスタマイザーの「タイトル」・「本文」入力欄にspanタグを用いてインラインCSSを記述する方法です。
下記を入力いただくと、文字の周りに背景色が適用されて視認性が良くなります。
「タイトル」
<span style="background: #000;padding: 8px;">メインビジュアルテキスト1</span>
「本文」
<span style="background: #000;padding: 8px;">ここにメインビジュアル1の本文が入ります。</span>
3.カスタマイザーメインビジュアルのフィルター機能を利用する方法
添付画像を参照の上
1.「フィルターの種類」を「網目」・「点」・「斜線」からお好みのものを選択
2.フィルターの不透明度をお好みの数値で設定
3.オーバーレイカラーをお好みの色を選択
4.オーバーレイの不透明度をお好みの数値で設定
以上で、背景画像を表示させつつ、フィルター機能により
文字の視認性を上げることができます。
各方法についてお試しいただけますと幸いです。
3パターンの提案ありがとうございます（＾＾）
１つ目で実装しようと思います！