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

この記事は約5分で読めます。

メッセージカードなどを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>

できあがったカードはこちら!

ということでできあがったカードを公開してみました。

よろしければ 2015クリスマスカード をご覧ください(^^)/

[amazon_searchlink search=”css”]

兎本美佳

ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

ゆうそうとITブログの更新通知が受け取れます!
スポンサー広告

WordPress 全般 インターネット 無料素材
スポンサーリンク
ゆうそうとITブログの更新通知が受け取れます!
ゆうそうとITブログ

コメント

トップへ戻る

ゆうそうとについての説明

ゆうそうと とは東京都八王子市を中心として、WordPressによるWEBサイトの作成や、スポットでのIT相談を行ったり、年間契約でのIT顧問をなりわいとして活動しています。

特徴としては30年以上IT業界でプログラムを中心として仕事をしてきたものと、美大出身のデザイナーがワンストップで対応するため、幅広い対応が可能であることです。

IT相談は直接お会いしてのご相談の他、ZOOMによるオンライン相談も可能です。