画像の上のちょうどよい位置に文字を載せる方法ーメッセージカードを作ろう

2015年12月3日2016年7月22日

この記事は最終更新日から7年経過しています。内容が古い可能性があります。

メッセージカードなどをWebで作るときに画像の上に文字をのせたいような場合があります。こういう場合はCSSを使うとできるのですが、実際にやるたびに忘れてしまうのでblogに書いておこうと思います(^^)/。
今回はクリスマスカードを作ってその方法について確認しました。その方法について書きます。

記事をざっと見る

フリー素材を探して表示したい大きさに調整する

メッセージカードに使えるフリー素材を探してみました。今回は、

かわいいフリー素材集いらすとやさん

から素材を見つけました。かわいい画像がたくさんあるのでお勧めです。

こちらの画像をダウンロードして

Webサイトにアップロードします。

*　今回はWordPressのサイト上で行っていますが、画像の上に文字を重ねるコードの部分はどこでも使うことができますので、他CMSやhtmlの場合でも参考にしていただけたらと思います。

このままだと

大きすぎるので大きさを変えます。テキストタブで見たときに、

<img src="https://usortblog.com//wp-content/uploads/2015/12/christmas_card01.jpg" alt="christmas_card01" width="1006" height="1488" class="alignnone size-full wp-image-13962" />

このように幅が1006(px)となっているのでこれを

<img src="https://usortblog.com//wp-content/uploads/2015/12/christmas_card01.jpg" alt="christmas_card01" width="500" class="alignnone size-full wp-image-13962" />

500(px)にします。heightは削除してしまえば幅に合わせたなりゆきの大きさになります。

このぐらいの大きさになりました。

メッセージを入れて画像の上に表示させる

この画像の上にメッセージを載せたいと思います。

とりあえず入れたい文章を入力して、

表示してみました。当然ながら(^_^;、画像の上には載ってくれません。

これをCSSで調整します。CSSは

<div id="message_card" style="position: relative;">
    <img src="イメージURL" その他 />
    <div id="message_box" style="position:absolute; top:100px; left:100px;">
        なにかメッセージ
    </div>
</div>

このような仕組みで文字を絵の上に載せることができます。赤で表示されているDIVが基準(親)となるDIVで、画像はここで表示します。青で表示されているDIVが子のDIVで基準からの上位置、左位置を指定して表示させることができます。ここに文章を入れます。

先ほどの画像とメッセージをこのCSSを使って書き換えてみます。

<div id="message_card" style="position: relative;">
    <img src="https://usortblog.com//wp-content/uploads/2015/12/christmas_card01.jpg" alt="christmas_card01" width="500" class="alignnone size-full wp-image-13962" />
    <div id="message_box" style="position:absolute; top:100px; left:100px;">
メリークリスマス！
素敵な年末年始休暇に
なりますように(^^)/
株式会社RYUS
    </div>
</div>

表示してみると

載っかりました(^^)/。あとは文字の大きさや位置を微妙に調整してみます。

このとき「開発者ツールを使おう！カスタマイズするphpファイルを探す-その1」でご紹介した開発者ツールを使って

文字の大きさを変えたり、

メッセージの位置を変えたりして、試してから書き換えるととても便利です。開発者ツールは使い慣れてない場合は、もちろん開発者ツールを使わなくても勘で数字を少しずつ変えて行ってもいいかと思います(^_^;。

最終的にこのようなコードになりました。

<div id="message_card" style="position: relative;">
    <img src="https://usortblog.com//wp-content/uploads/2015/12/christmas_card01.jpg" alt="christmas_card01" width="500" class="alignnone size-full wp-image-13962" />
    <div style="position:absolute; top:40px; left:140px;font-size:1.5rem;line-height:5rem;" id="message_box">
メリークリスマス！
素敵な年末年始休暇に
なりますように(^^)/
株式会社RYUS
    </div>
</div>