各業界のプロに学ぼう「本じゃ読めないアフィリエイト講座」

All About ホームページ作成ガイド 西村 文宏
All About ホームページ作成ガイド
西村 文宏 (ニシムラ フミヒロ)
2001年より、その道のプロ(専門家)が情報発信する生活総合情報サイトAll About内で、「ホームページ作成」ガイドサイトを担当。ウェブ製作に関して毎月数本の記事を連載。HTMLの記述方法から、スタイルシートやJavaScriptの活用方法、アクセス数向上テクニックなど、2011年現在までに300本近くの記事を公開している。著書として、「プロ顔負けのホームページ作成術」・「SEO・SEM使いこなしテクニック」などがあり、最近は作家デビューも果たしている。
コーポレートサイトhttp://allabout.co.jp/gm/gt/1053/
講師PR
RSSフィードを自動生成するフリーソフト「Fumy RSS & Atom Maker」が人気です!『にししふぁくとりー』
http://www.nishishi.com/

文字を画像の上に重ねて表示させる方法(第1回)

  • publish_advertise
2013/08/15

こんにちは。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プロパティ」です。

 

詳しい記述方法の解説は、次回にご紹介いたします。

 

 

 

 

 

【ご注意ください】

このコンテンツで紹介されているサイトおよびサービス(ツール)は、
アクセストレードが運営するものではありません。必ず使用方法や注意
事項等をよく理解した上で、ご自身の判断のもとでご利用ください。

万が一、損害・トラブル等が生じた場合も、執筆者およびアクセス
トレードは責任を負いかねますので、あらかじめご了承ください。

 

 

 

Loading...
このエントリーをはてなブックマークに追加      mixiチェック
続きを読む>>
続編
2013.08.19
文字を画像の上に重ねて表示させる方法(第2回)

▲ページトップへ戻る

1CLICKアンケート!!
Loading...
1CLICKアンケート!!
アフィリエイトで稼ぐための心構え3カ条
1.「稼ぐ気持ち」を出しすぎない
稼ぎたい気持ちが全面に出ていると、ユーザーはサイトに対し良い印象を持ちません。
2.「納得できる方法」で稼ぐ
報酬額ばかりで選ばず、自分自身がお薦めできるプログラムを心が伝わるように紹介しましょう。
3.実績のある方法や考え方などを「学ぶ」
「成功者のノウハウ」、「今盛り上がっている市場は?」など、常に最新情報をキャッチし、実践できているかどうかが、アフィリエイト成功のカギ。アフィ大では、アフィリエイトで稼ぐためのお役立ち情報を数多くの成功者が発信しています。ぜひご活用ください!

▲ページトップへ戻る