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

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

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

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

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

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

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

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

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

このままだと

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

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

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

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

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

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

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

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

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


 

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

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

表示してみると

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

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

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


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

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

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

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

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

[Amazon sponsored link] css 関連本
兎本美佳

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

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
スポンサー広告
ブログをメールで購読

メールアドレスを記入して購読すれば、更新をメールで受信できます。

261人の購読者に加わりましょう

トップへ戻る