背景画像の上に文字を重ねて表示する方法

こんにちは。
背景画像の上に文字を重ねるという初歩的なことができなかったので、忘れないように記載しておきます。
relativeとかabsoluteとかなんとなくわかるけど、きちんとした理解ができてないんですよね。
HTMLもCSSももっとちゃんと理解できたらおもしろいんだろーなと思いつつも、いつもGoogleさんに聞きながら場当たり的に解決している状態です。

fukidashi
こんな感じで背景画像の上に文字を重ねて表示しますよ~(^<^)

背景画像を用意します。

fukidashi
サンプル画像(ふきだし)

今回はWindowsのペイントでさくっと準備したものを使ってみます。
こんな感じのざっくりしたふきだしをつくってみました。
サイズは300px×300pxです。

この画像を「fukidashi」という名前でアップロードしてブログに挿入します。

CSSに変更を加えます。

WordPressの
外観 > テーマの編集 > style.css
の一番下に以下を挿入します。

/* 背景画像に文字を重ねる */
.box1 {
    position: relative;
  width: 300px;
}
.moji1 {
    position: absolute;
    padding: 3px 5px;
    width: 220px;
    top: 50px;
    left: 50px;
    font-size: 80%;
}

「box1」は背景画像に設定するプロパティ、
「moji1」は重ねる文字に設定するプロパティになります。

box1の設定について

box1の方のpositionを「relative」に設定します。
relative:相対位置を意味します。
詳しくはgoogleで「relative absolute」と検索すればいろいろ出てきますので、解説はそちらをご覧ください。

widthは300pxとしていますが、これは今回の画像「fukidashi」のサイズを指定しています。

moji1の設定について

moji1の方のpositionを「absolute」に設定します。
absolute:絶対位置を意味します。
widthは220pxとしていますが、これは指定の画像のどの範囲に文字をおさめたいかに合わせて、調整します。

位置はtopとleftのプロパティで指定しています。
これも実際にアップしながら位置を微調整していきましょう。

投稿記事の設定

以下のように記載します。


<figure class="box1">
<img src="ここにfukidashiを指定してください">

<figcaption class="moji1">
このように背景画像の上に文字が表示されます。位置は指定して微調整しましょう。 
</figcaption>

</figure>

タグは、図表であることを示すタグで、
は、図表のキャプションを示すタグになります。
先ほど指定した、box1を画像に、moji1を文章に適用させるために指定を行います。

完成!!

fukidashi
このように背景画像の上に文字が表示されます。位置は指定して微調整しましょう。

これで完成♪
簡単ですね。

おまけ

おまけ画像
おまけ画像手書き風
こんな感じの手書き風のふきだしの中に文字をいれてもかわいいですよね。つかってみまーす(^O^)/

 

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

IROKAN

投稿者: IROKAN

IROIROKANSATSU創業者のIROKANです。面白いネタ、役立つネタを提供できればと思います。もっとーは「シンプルであること」。常にシンプルでわかりやすい記事を更新していきます。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です