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

2019-03-212019-04-03

概要

WordPressでTwenty 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;
    }
}