WordPressコード編集初心者もできる
トップバナーに
テキストをかぶせる方法

今回は2つのタイプのバナーにテキストをかぶせる方法を試してみました。

1. カスタムhtmlを使用してバナーにテキストをかぶせる
2. カスタムテンプレートを使い、カスタムフィールドで設置したトップバナーにテキストをかぶせる

設置したバナーの位置に合わせてテキスト位置をCSSを調整するというだけの話です。

といっても、初心者の私にはなかなか大変でした。

2.カスタムテンプレートの設定方法は、詳細は以下にまとめています。

１．カスタムhtmlを使用してバナーにテキストをかぶせる方法

カスタムhtml内で画像とテキストを入れたコンテナに対して、CSSで文字を載せる位置を調整するという方法です。バナーもコンテンツ領域に収めたい場合に適しています。

.bord-container { position: relative; display: inline-block; } .bord-container img { display: block; width: 100%; } .bord-container .cover-text { 　　width:100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; font-size:32px; } @media screen and (max-width: 786px) { .bord-container .cover-text { font-size:16px; } }

htmlでは<div>の中に、imgとpを含め、CSSで画像の中央にテキストが来るようにしました。

文字が多い場合にはSPでのフォントサイズを変えたり、改行をつけて見栄えを調整します。

上寄せ、右寄せなどはtopやrightなどの%やpxでカスタマイズ。

button#copyButton { margin-top: 5px; /* ボタンとテキストエリアの間の余白を調整する値 */ display: block; /* ボタンをブロックレベル要素に設定して、上下の余白を追加 */ background-color: #02AB9B; border:none; border-radius: 5px; box-shadow: 4px 4px 8px -2px lightgrey; color: #fff; padding: 0 5px; } textarea#code { padding: 0; width:100%; } <div class="bord-container"> <img alt decoding="async" src="画像のURL"> <p class="cover-text">かぶせたいテキスト</p> </div> .bord-container { position: relative; display: inline-block; } .bord-container img { display: block; width: 100%; } .bord-container .cover-text { width:100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; 　　font-size:32px; } @media screen and (max-width: 786px) { .bord-container .cover-text { font-size:16px; } } コピー function copyToClipboard() { var codeTextArea = document.getElementById(“code”); codeTextArea.select(); document.execCommand(“copy”); alert(“コードがクリップボードにコピーされました！”); }

２．カスタムフィールドで設置したトップバナーにテキストをかぶせる方法

この例は本記事のトップにコンテンツ幅（全幅）で設置しているバナーです。

ブランドページやビジュアルを強調したいページでの使用に向いています。

まず、PCとSPで異なる画像を設置するようにしたカスタムテンプレートを使い、以下を設定します。

カスタムフィールド名	設定内容
top_banner_image_sp	バナーのURL
top_banner_image_pc	バナーのURL
top_banner_text	テキスト （htmlでタグや改行指定可）

次に、１．の方法と同様にCSSで位置を調整します。（テキストとバナーはカスタムフィールドで設定するので、htmlの記載はしません。）
※class名は変えていますが、どちらも上下、左右方向に対して中央揃えにしています。

以下が参考コードです。

button#copyButton { margin-top: 5px; /* ボタンとテキストエリアの間の余白を調整する値 */ display: block; /* ボタンをブロックレベル要素に設定して、上下の余白を追加 */ background-color: #02AB9B; border:none; border-radius: 5px; box-shadow: 4px 4px 8px -2px lightgrey; color: #fff; padding: 0 5px; } textarea#code { padding: 0; width:100%; } .top-banner { position: relative; width: 100%; } .image-container { position: relative; width: 100%; max-width: 100%; overflow: hidden; } .banner-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff;/*必要に応じて文字色を調整*/ text-align: center; font-size: 24px;/*必要に応じて文字サイズを調整*/ line-height: 1.5;/*必要に応じて行間を調整*/ width: 100%; padding: 10px; text-shadow: 2px 2px #000;/*必要に応じて影を調整*/ } @media screen and (max-width: 768px) { /* スマートフォン用の調整 */ h1 { font-size: 16px; } } コピー function copyToClipboard() { var codeTextArea = document.getElementById(“code”); codeTextArea.select(); document.execCommand(“copy”); alert(“コードがクリップボードにコピーされました！”); }

まとめ

バナーにテキストをかぶせるには、2つの方法があります。カスタムHTMLにHTMLとCSSを記述する方法と、カスタムテンプレートとカスタムフィールドを使ってトップバナーを全幅に設定し、そこにテキストを載せる方法です。

ブランドページ等で視覚的なビジュアルを全幅で表示しつつ、そのほかの部分ではマージンやパディングの効いたコンテンツ領域を保持したい場合には、カスタムテンプレートを使用した方法が適しています。