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

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/

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

  • publish_advertise
2013/08/19

こんにちは。All About ホームページ作成ガイドの西村文宏です。

 

前回は、画像の上に重なるようにして、自由な位置に文字を重ねて表示する方法をご紹介いたしました。

 

今回は、そのソースの内容を解説いたします。前回にご紹介したソースは、以下の通りです。

このソースによって、画像「photo.jpg」の上に、「画像の上に重ねて表示する文章です。」
という文章が重なって表示されます。

 


<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要素の内容を、p要素の上に重ねる」という装飾です。

p要素の中にはimg要素(画像)があり、span要素の中には文字がありますから、「画像の上に文字が重なる」ことになります。

ここでは、以下のような5つのスタイルを記述しています。

 


(1) p要素に対して、positionプロパティに値「relative」を指定。
(2) span要素に対して、positionプロパティに値「absolute」を指定。
(3) span要素に対して、topプロパティに値「30px」を指定。
(4) span要素に対して、leftプロパティに値「75px」を指定。
(5) span要素に対して、widthプロパティに値「145px」を指定。


 

(1)では、重ねる基準位置になる要素を指定しています。こう記述することによって、後述のspan要素は、「p要素の表示位置」を基準にした位置に再配置されます。

 

(2)の記述によって、span要素は「本来の表示位置」から離れ、

(1)で指定された基準位置に移動します。

 

つまり、重なって表示されるようになります。

 

(2)と(4)は、基準位置からの移動距離を指定しています。

ここでは、「上端から30px」・「左端から75px」の位置を指定しています。

つまり、span要素の内容(文字)は、p要素内の画像の上から30px・左から75pxの位置から表示されることになります。

 

(5)は、span要素を表示する横幅を指定しています。ここで横幅を指定しないと、span要素内の文字が、画像の右端を越えて右方向へ飛び出してしまいます。

 

画像内の「文字を重ねたい範囲」に合うように数値を調整してください。

(1)と(2)は常にそのまま記述します。(3)~(5)の各値は、実際の画像や、文字を表示したい位置に応じて修正してください。

 

実際の表示例は、サンプルページをご覧ください。

このサンプルページからHTMLソースをコピーして、いろいろ値を変更してみると、どのような表示になるのかがよく分かるでしょう。

 

今回は、画像を直接加工することなく、画像の上の自由な位置に文字を重ねて表示する方法をご紹介いたしました。

 

とても手軽に実現できますので、ぜひ、お試しください。

 

 

 

 

【ご注意ください】

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

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

 

 

 

Loading...
このエントリーをはてなブックマークに追加      mixiチェック
<<前の記事に戻る  
続編
2013.08.15
文字を画像の上に重ねて表示させる方法(第1回)

▲ページトップへ戻る

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

▲ページトップへ戻る