質問

画像の上に文字を書きたい

  • バナーなど、画像に文字を入れたいのですが、どうすれば?
  • 画像に文字を重ねて表示できますか?

回答

画像自体に文字を入れる。

画像処理ソフトを利用して、画像そのものに文字入れすることができます。
簡単なものですと、Windows付属のペイントでも可能ですが、やはり専用のものを使った方が綺麗に仕上がります。配布している素材を編集する場合、くれぐれも著作権に注意し、加工が認められているかを必ず確認してください。

バナーの作り方ダウンロードしたフォントを使いたいも参考にしてください。

背景にする

もしご質問が、画像を一枚だけ画面の右下にでも表示しておきたいという意味でしたら、背景にすることで解決します。スタイルシートを利用して、繰り返すことなく一枚だけ表示させることが可能です。

<style type="text/css"><!--
body { 
    background-color: #ffffff;         /* 背景色 */
    background-image: url("hoge.gif")  /* 画像へのパス */
    background-repeat: no-repeat;      /* 背景画像を繰り返さない */
    background-position: right bottom; /* 背景画像を右下に */
    background-attachment: fixed;      /* 背景画像の固定 */
}   
--></style>

簡略化して、

body { background: #ffffff url("hoge.gif") no-repeat fixed right bottom; }

とまとめて書くこともできます。 top(上)、left(左)を使用して、位置を変更することも出来ます。指定しない方向は、その真ん中になります。

全体の背景だけでなく、tableやdivなどの背景にすることも可能ですが、fixed にすると画面に対して固定されますので注意が必要です。Internet Explorer だけで確認を行い、他の環境では、まったく表示されていないというケースが多々あります。

別々に書いた文字と画像を重ねて表示する。

こちらもスタイルシートで可能ですが、素直に最初の手順で、画像に直接文字を入れることをおすすめします。

<p>
  <img src="hoge.gif" alt="">
  <span style="position:relative;top:-10px;left:-30px;">文字を重ねて表示</span>
</p>

編集者

作成 むむりく 2004/10/10
編集 ばあど 2004/10/10


リロード   新規 編集 凍結解除 差分 添付 複製 改名   トップ 一覧 検索 最終更新 バックアップ   ヘルプ   最終更新のRSS
Last-modified: 2006-08-08 (火) 00:29:53 (4672d)