CSSで画像の上にテキストをのせる方法
概要
WordPressでTwenty Nineteenというデフォルトテーマを使っていたのですが、なんか重たい気がして、Sparklingというテーマに変更してみました。
そして、[外観] – [ カスタマイズ] – [ヘッダー画像]より画像を追加してみたら、なんとブログタイトルが消えてしまいました(これはそういう仕様のようです)。
ちょうど、TechAcademyの「はじめてのレスポンシブWebデザイン入門講座」を学習中だったのでCSSで次のように解決してみました。
方法
Step 1: デベロッパーツールでヘッダー画像のdiv要素のIDがlogoであることを確認しました。

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;
}
このブログテーマの仕様に素直に従うなら、ヘッダー画像使うなら、タイトルが消えるので、タイトル付きの画像を用意するというのが本来なのでしょう。
このあたり、これ以上追求しないことにします。
ディスカッション
コメント一覧
まだ、コメントがありません