スポンサーサイト

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

テーブルを使って画像に文字を重ねる

ここ1週間ほどほとんど雨の毎日です。この間に台風12号が西方海上を通過し、各地で雨による大きな被害が発生しています。被災された方々に心からお見舞いを申し上げます。
さらに追い打ちをかけるかのように強い台風11号がゆっくりと北上しています。予想コースでは九州を縦断する恐れもあります。無事であることを祈るのみです。

ところで今日のテーマですが、『画像に文字を重ねる』を再考してみました。
画像に文字を入れるには画像作成の段階で入れるのが最も簡単ですが、画像の使いまわしができません。
以前にpositionを使って『画像の上に文字を重ねる』方法を書きましたが、ピクセル単位で表示場所を設定するのは結構面倒ですね。
一般にブログを書かれる方はタグなどに詳しくない方も多いでしょうからあまり面倒なことはしたくないですね。特に毎日更新されている方はパソコンンにあまり時間を割きたくないですよね。毎日訪問いただく方も多いのですが、中でも毎日更新されている「無印良年」さんや「nekoの日記帳」さんなどには感心しています。
またソースを使って多くの写真をスライドにしてアップされている方もお見かけしますが、これって結構面倒なんですよ。
私のホームページにもソースを公開していますが、最近では私自身パワー低下でなんとなくお茶を濁している感じです。
本題からそれましたが、今回は簡単にテーブルを使って下のような枠図形に文字を重ねてみました。(枠図形はWordで作成しました)
tableのデータセル(td)の背景に枠画像を設定しただけです。その上に文字を書きました。画像の使いまわしはいくらでもできます。
下にソースを書いておきます。お暇の方はお試しください。

ここに文字を入れました
ソース:
<table align="center"><tr><td background="http://blog-imgs-63.fc2.com/j/a/6/ja6ei/20140804135016ad4.gif" width="570" height="130" align="center"><span style="font-size:x-large;color:#3300ff">ここに文字を入れました</span></td></tr></table>
赤字の部分は使用する画像のURLです。ご自分の画像のURLを入れます。width(幅)とheight(高さ)は必ず指定します。
"http://blog-imgs-63.fc2.com/j/a/6/ja6ei/20140804135016ad4.gif" width="570" height="130"
スポンサーサイト

コメントの投稿

非公開コメント

おはようございます

文字をもっと大きくしたい場合、font-size:x-large の部分を変えるのだと思いますが、教えて下さいませ m(__)m
プロフィール

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ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。