この記事を書いた人
今回は2つのタイプのバナーにテキストをかぶせる方法を試してみました。
- カスタムhtmlを使用してバナーにテキストをかぶせる
- カスタムテンプレートを使い、カスタムフィールドで設置したトップバナーにテキストをかぶせる
設置したバナーの位置に合わせてテキスト位置をCSSを調整するというだけの話です。
といっても、初心者の私にはなかなか大変でした。
2.カスタムテンプレートの設定方法は、詳細は以下にまとめています。
１．カスタムhtmlを使用してバナーにテキストをかぶせる方法
カスタムhtml内で画像とテキストを入れたコンテナに対して、CSSで文字を載せる位置を調整するという方法です。バナーもコンテンツ領域に収めたい場合に適しています。
かぶせたいテキスト
htmlでは<div>の中に、imgとpを含め、CSSで画像の中央にテキストが来るようにしました。
文字が多い場合にはSPでのフォントサイズを変えたり、改行をつけて見栄えを調整します。
上寄せ、右寄せなどはtopやrightなどの%やpxでカスタマイズ。
２．カスタムフィールドで設置したトップバナーにテキストをかぶせる方法
この例は本記事のトップにコンテンツ幅（全幅）で設置しているバナーです。
ブランドページやビジュアルを強調したいページでの使用に向いています。
まず、PCとSPで異なる画像を設置するようにしたカスタムテンプレートを使い、以下を設定します。
| カスタムフィールド名 | 設定内容 |
| top_banner_image_sp | バナーのURL |
| top_banner_image_pc | バナーのURL |
| top_banner_text | テキスト （htmlでタグや改行指定可） |
次に、１．の方法と同様にCSSで位置を調整します。（テキストとバナーはカスタムフィールドで設定するので、htmlの記載はしません。）
※class名は変えていますが、どちらも上下、左右方向に対して中央揃えにしています。
以下が参考コードです。
まとめ
バナーにテキストをかぶせるには、2つの方法があります。カスタムHTMLにHTMLとCSSを記述する方法と、カスタムテンプレートとカスタムフィールドを使ってトップバナーを全幅に設定し、そこにテキストを載せる方法です。
ブランドページ等で視覚的なビジュアルを全幅で表示しつつ、そのほかの部分ではマージンやパディングの効いたコンテンツ領域を保持したい場合には、カスタムテンプレートを使用した方法が適しています。
また、記事作成中に” ”が入ってしまう場合には以下が参考になります。
※外部サイトに移ります