CSSで画像の上にテキストをのせる方法

2019-04-03

概要

WordPressTwenty Nineteenというデフォルトテーマを使っていたのですが、なんか重たい気がして、Sparklingというテーマに変更してみました。

そして、[外観] – [ カスタマイズ] – [ヘッダー画像]より画像を追加してみたら、なんとブログタイトルが消えてしまいました(これはそういう仕様のようです)。

ちょうど、TechAcademyの「はじめてのレスポンシブWebデザイン入門講座」を学習中だったのでCSSで次のように解決してみました。

方法

Step 1: デベロッパーツールでヘッダー画像のdiv要素のIDがlogoであることを確認しました。

ヘッダー画像を含む要素のIDの確認

Step 2: [外観] – [ カスタマイズ] – [追加CSS]より以下のようにしました。

#logo::after {
/* 全画面サイズで共通部分 */
content: "定年後にプログラマーになる";
position: absolute;
font-family: Quicksand, sans-serif;
color: pink;
text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000;
right: 5%;
/* 小さい画面用設定 */
top: 30%;
font-size: 24px;
}

@media screen and (min-width: 700px) {
/* 大きい画面用設定 */
#logo::after {
top: 20%;
font-size: 50px;
}
}

これで、パソコンで見た場合とスマートフォンで見た場合でフォントの大きさと位置を少し調整し、スマートフォンの場合は次のように表示できました。

スマートフォンでの表示結果
スマートフォンでの表示結果

ただし、メニューをクリックした場合は次のようにタイトルがずれます。

スマートフォンでの表示結果(メニュークリック時)
スマートフォンでの表示結果(メニュークリック時)

最初は、次のようにCSSも追加していて、これだとそれなりにタイトルがずれずに表示できるたのですが、一方でメニューが反応しなくなるという致命的現象がありました。

 #logo {
position: relative;
}

このブログテーマの仕様に素直に従うなら、ヘッダー画像使うなら、タイトルが消えるので、タイトル付きの画像を用意するというのが本来なのでしょう。

このあたり、これ以上追求しないことにします。