各業界のプロに学ぼう「本じゃ読めないアフィリエイト講座」
こんにちは。All About ホームページ作成ガイドの西村文宏です。
画像の内部に文字を書き込みたい場合、その都度、Photoshopなどのソフトウェアを使って画像を加工するのは面倒ですよね。
画像を直接加工してしまうと、「修正したくなったときに再加工する作業が面倒」「文字部分が検索にはヒットしなくなる」などといったデメリットもあります。
そこで、スタイルシートの出番です。スタイルシートを活用すれば、簡単に文字を画像の上に重ねて表示できます。
画像を直接加工する手間は不要です。重ねた文字を修正したい場合は、HTMLソースを編集するだけで済むため、メンテナンスも楽々です。
もちろん、文字部分は検索にもヒットします。今回は、スタイルシートを使って、画像の上に文字を重ねる方法をご紹介いたします。
以下の手順で記述してみてください。
■STEP.1 画像を表示させる
ウェブページ上に画像を表示するには、img要素を使いますね。
例えば、「photo.jpg」というファイル名で、横幅が320px・高さが210pxの画像を表示したいなら、以下のようにHTMLソースを記述します。
<img src=”photo.jpg” width=”320″ height=”210″ alt=”写真”>
■STEP.2 画像に文字を追加する
ここで、画像に文字を追加してみます。先ほどのimg要素の直後に、span要素を配置して、そこに文字を記述します。
さらに、その全体を(「段落」を表す)p要素で囲みます。
文字の掲載にspan要素を使っているのは、後からスタイルを適用するためです。
<p>
<img src=”photo.jpg” width=”320″ height=”210″ alt=”写真” /><br />
<span>画像の上に重ねて表示する文章です。</span>
</p>
上記のソースだと、単に画像の下部に文字が表示されるだけです。
最後に、この文字が画像の上に重なるように、スタイルシートを書きます。
■STEP.3 文字が画像の上に重なるようにスタイルを追記する
p要素とspan要素に対して、以下のようにスタイルを追記します。
<p style=”position: relative;”>
<img src=”photo.jpg” width=”320″ height=”210″ alt=”写真” /><br />
<span style=”position: absolute; top: 30px; left: 75px; width: 145px;”>
画像の上に重ねて表示する文章です。
</span>
</p>
上記のようにスタイルシートを追記すると、span要素内に記述している文字が、画像の「上から30px」・「左から75px」の位置に重なって表示されます。
実際の表示例は、サンプルページをご覧ください。
■補足:
先ほどのソースでは、HTML中にstyle属性を使ってスタイルを記述しました。
スタイルシート部分を分離して、以下のように書いても構いません。
<style type=”text/css”>
p.imagebox { position: relative; }
p.imagebox span.inside { position: absolute; top: 30px; left: 75px; width: 145px; }
</style>
<p>
<img src=”photo.jpg” width=”320″ height=”210″ alt=”写真” /><br />
<span>
画像の上に重ねて表示する文章です。
</span>
</p>
さて、上記で記述したスタイルシートのポイントは、要素の表示位置を指定するために利用する「positionプロパティ」です。
詳しい記述方法の解説は、次回にご紹介いたします。
【ご注意ください】
このコンテンツで紹介されているサイトおよびサービス(ツール)は、
アクセストレードが運営するものではありません。必ず使用方法や注意
事項等をよく理解した上で、ご自身の判断のもとでご利用ください。
万が一、損害・トラブル等が生じた場合も、執筆者およびアクセス
トレードは責任を負いかねますので、あらかじめご了承ください。