写真をポラロイド風にしてみる

DEAR DAYS 別冊 『写真をポラロイド風にする』

DEAR DAYS 別冊さまのこの記事を見まして、あら素敵♪と早速やってみたのですが、こちらにも書かれている「うまく行かない人」のパターンだったらしく、グレーの枠しか出なかった(T_T)ので、本文内にあるように
プチパレブログ 『画像に写真風、ポラロイド風の枠をつける』 →プチパレブログさまのこの記事を参考にやってみたら、できました♪


またプチパレブログさまでは、写真サイズによって、「ポラロイド風」「写真枠風」に分けると言う素敵なアイデアも出されています。プチパレブログさまは、モブログの小さな画像はポラロイド風という指定をなさっていましたが、わたしはモブログはしないので、個々の記事で指定することに。

まずは、Templeteで指定
.photo {
float: left;
background-color: #F9F9F9;
border-width: 2px;
margin: 5px 10px 4px 5px;
padding: 10px 10px 10px 10px;
border-style: solid;
border-color: #DCE3E3 #C1C1C1 #C1C1C1 #DCE3E3;
}

.pict {
border: 0px solid #ffffff;
padding: 0px;
margin: 0px;
}

.rel {
clear: left;
}

.strike {
float: left;
background-color: #F9F9F9;
border-width: 2px;
margin: 5px 10px 4px 5px;
padding: 10px 10px 30px 10px;
border-style: solid;
border-color: #DCE3E3 #C1C1C1 #C1C1C1 #DCE3E3;
}
上のphotoは、写真枠にしたい場合、下のstrikeは、ポラロイドにしたい場合です。

で、個々のエントリーで、
div class="photo">画像/div>
p class="rel">本文/p>
(タグは<(左)もつけてください)
div class="strike">画像/div>
p class="rel">本文/p>
(タグは<(左)もつけてください)
と、指定してやれば、上は写真枠風に、下はポラロイド風になります。

写真が3割り増しで素敵に見える気がします♪

Suuさま、ミキさま、ありがとうございました。


  •   このエントリーをはてなブックマークに追加  

<< ジャム作りました 戻る 初雪@越冬ぶろぐ と アイスバーグ >>