スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

画像の上に文字を重ねる

ブログに写真をアップロードした後に、「画像に文字を入れておけばよかったな」と思うことがあります。作り直すのも面倒だし…。こんな場合にpositionプロパティを使えば、簡単に画像上の任意な位置に文字を重ねることができます。画像上に文字を重ねるといえばテーブルなどの背景に画像を設定する方法もありますが、画像サイズに影響されますので、思い通りにならないこともありますね。
ブログの場合は、基準になる開始位置(絶対配置)を決めます。この中に画像を配置します。
FC2ブログの場合は幅600px位まででしょうか。
それが次のタグです。
<div style="position:relative;width:600px;height:450px;background-color:pink;"><img src="画像URL"
style="position:absolute; top:30px; left:50px;border:0 width:500px height:375px"></div>
上の場合、領域のサイズは幅600px、高さ450px、背景色はpinkに指定しています。画像は枠線なし、サイズは幅500px、高さ375pxです。
領域内の画像の位置(相対位置)は、relativeで決まった位置(基準になる位置)からabsoluto要素で、上から30px、左から50px(top:30px; left:50px;)の位置に来るように設定してあります。
これで画像に位置が決まりますから、同じように重ねる文字の位置を下のように設定します。
<div style="position:absolute;top300px;left:80px;left:300px;width:240px;font-size:22pt;color:RED">重ねる文字</div>
例の場合、文字位置は上から230px、左から300pxです。赤色のwidth:240px;は文章が入る幅(範囲)の指定です。必ず入れます。これを指定していないと文章が画像から右にはみ出してしまいます。ついでにフォントサイズや色も指定します。
完成したソースを下に掲げておきます。(領域の背景色や文字色はカラーコードを指定して好きなように変更できます)
使用した画像(500px×375px)
24年コスモス
重ねる文字
遠賀河畔、100万本のコスモスが満開でした
完成した画像
遠賀河畔、100万本のコスモスが満開でした




スポンサーサイト

コメントの投稿

非公開コメント

文字を入れる

画像に文字を入れられるタグは便利ですね。
いつか使わせていただきたいです。
いつもありがとうございます。

日ごろは画像の編集で文字を重ねたりして、仕事を増やしています。

一面のきれいなコスモス畑は壮観ですね。

あきこさん

お久しぶりです。いろいろと秋を楽しまれているようですね。
きょうから2日間、市民センターの文化祭ですが、生憎の雨で~、それでもかなりの方が足を運ばれていました。
写真の河畔でもコスモス祭が開かれているはずですが、雨で出足はどうでしょうね。

このタグは便利です、ちょっと位置の計算がいりますが…。備忘録として掲載しておきました。ブログに載せておくとすぐにコピーして使えますので…。
プロフィール

ja6ei

Author:ja6ei
FC2ブログへようこそ!

カレンダー
07 | 2017/08 | 09
- - 1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31 - -
最近の記事
最近のコメント
最近のトラックバック
月別アーカイブ
カテゴリー
ブロとも申請フォーム

この人とブロともになる

リンク
ブログ内検索
RSSフィード
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。