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;
}

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

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