ホームページテンプレートのdecoweb > 編集方法 > 画像にキャプションを入れたい

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

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

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;」で回り込みを解除しないと、デザインが崩れてしまいます。