写真をポラロイド風や写真立て風に表示する

写真を以下のようにポラロイド風に表示する方法。

インド料理のランチ

スタイルシートにポラロイド風写真のスタイルの記述を追加します。上の写真の場合は、pola クラスとして次のように指定しています。好みに応じてスタイル指定を変えてください。

.pola { background-color:#fffdf4;padding:30px 30px 90px 30px;border: 1px solid #cccccc; }

「padding:30px 30px 90px 30px;」が写真周囲の余白になります。数字は前から順番に、上、右、下、左の余白になります。上、右、左を同じ数字にして、下をそれよりも大きめに指定するとポラロイドっぽくなります。

次に、対象となる画像の画像挿入タグ内に class="pola" を挿入します。

次に、以下のように写真立て風に表示する方法。

インド料理のランチ

たとえば、次のようにスタイルを指定します。ここでは、stand クラスとしてスタイルを指定しています。

.stand { background-color:#fffdf4;padding:30px 30px 90px 30px;border: 1px solid #cccccc; background-image: url(http://～gazo.gif) ; }

background-image: url(http://～gazo.gif) の (　) に画像の URL を指定してください。

今度は、対象となる画像の画像挿入タグ内に class="stand" を挿入します。

写真の下の余白部分に説明を入れることも可能。

マリンピア神戸のインド料理のランチ。安くておいしいです

記述例は以下のとおり。

<div style="border:1px solid #cccccc; padding:30px; width:250px; background:#fffdf4; font-size:85%; line-height:150%; ">
<img style="margin:0 0 10px 0;" width="250px" height="188" alt="インド料理のランチ" src="lunch.jpg">
<br>
マリンピア神戸のインド料理のランチ。安くておいしいです
</div>

div の width と画像の width に同じ値を指定します。

関連記事 >> 写真をポラロイド風に加工できるサイト