画像にキャプションを入れたい

画像の下にキャプション（説明文）を入れる方法を教えます。
※当サイトでの方法は多数あるやり方の中の一つとお考え下さい。

Step1

【画像左寄せの回り込みにキャプションを入れる】

上の画像の下にキャプションを入れてみましょう。

• imgを<div>で囲み、<span>でキャプションを囲みます。最後に回り込みを解除します。
  （class名はご自分でわかりやすい名前にしてもOKです）
  
  <div class="imagebox_left">
  <img src="my_images/picture1.jpg" alt="イメージ画像"><span>画像のキャプション</span>
  </div>
  <p>このように画像の右脇にテキストが回り込みます。このように画像の右脇にテキストが回り込みます。このように画像の右脇にテキストが回り込みます。このように画像の右脇にテキストが回り込みます。</p>
  <div class="clear"></div>
  

• CSSに追加します。（class名はご自分でわかりやすい名前にしてもOKです）
  

  
  div.imagebox_left{
  	float: left;
  	padding: 0 5px 5px 5px;
  }
  
  .imagebox_left span{
  	display: block;
  	font-size: x-small;
  	text-align: center;
  }
  
  div.clear{
  	clear: both;
  	margin: 0 0 10px 0;
  }
  

「clear: both;」で回り込みを解除しないと、デザインが崩れてしまいます。

 

【画像右寄せの回り込みにキャプションを入れる】

上の画像の下にキャプションを入れてみましょう。

• imgを<div>で囲み、<span>でキャプションを囲みます。最後に回り込みを解除します。
  （class名はご自分でわかりやすい名前にしてもOKです）
  
  <div class="imagebox_right">
  <img src="my_images/picture1.jpg" alt="イメージ画像"><span>画像のキャプション</span>
  </div>
  <p>このように画像の左脇にテキストが回り込みます。このように画像の左脇にテキストが回り込みます。このように画像の左脇にテキストが回り込みます。このように画像の左脇にテキストが回り込みます。</p>
  <div class="clear"></div>
  

• CSSに追加します。（class名はご自分でわかりやすい名前にしてもOKです）
  

  
  div.imagebox_right{
  	float: right;
  	padding: 0 5px 5px 5px;
  }
  
  .imagebox_right span{
  	display: block;
  	font-size: x-small;
  	text-align: center;
  }
  
  div.clear{
  	clear: both;
  	margin: 0 0 10px 0;
  }
  

「clear: both;」で回り込みを解除しないと、デザインが崩れてしまいます。

 

• 他の編集をやりたい方は『編集方法』へ

設定方法

• ダウンロード方法
• 解凍方法
• 編集方法
• アップロード方法

decowebテンプレートサイト

• ホームページテンプレート
• MovableTypeテンプレート
• WordPressテンプレート
• FC2ブログテンプレート
• livedoorブログテンプレート
• ココログ@niftyテンプレート

オススメの本