アメブロカスタマイズ 記事内写真をポラロイド風にしてみませんか

こんにちわ！

ペカルマンは０円アメブロカスタマイズで頑張ってます。

今回は記事内の写真をポラロイド風にしてみては

いかがでしょう？

僕のブログのように、カスタマイズ関連の記事の説明で

画像付きで説明・・・なんて写真にはあんまり必要ないと思いますが

お花、ペット等の写真はとても映える方法ですので

試してみてはいかがでしょう？

こちらのCSS、実験委員さんのブログのこの記事 を

参考にさせて頂きました。

いつものように↓をCSSの最後に

貼り付けてください。

なおCSS編集の際は

CSS編集する時の注意 こちらも参考に・・・

/* ポラロイド風 */
.entry .detailOn img {
background-color: #ffffff;/*ポラ台紙色*/
margin: 5px;/*周りにスキマをあける*/
padding: 10px 10px 40px 10px;/*画像と台紙のスキマ*/
border-width: 2px;/*枠の太さ*/
border-style: solid;/*枠線*/
border-color: #dce3e3 #c1c1c1 #c1c1c1 #dce3e3;/*枠線の色・上右下左*/
background-image:url(1ポイント画像のURL);
background-repeat:no-repeat;/*繰り返さない*/
background-position:95% 98%;/*画像の位置*/
}

僕のブログでやってみましたよ。

①のpekaruman Blogのロゴは各自で作られて

先に書きましたCSS内の１ポイント画像のURLという

ところに、作ったロゴのURLを入れて下さいね。

別にロゴじゃなくてもいいんですが、ロゴの場合は

こちらの記事 を参考にして作ってみてくださいね。

なお、このCSSで写真をポラロイド風にすると

過去記事の写真全てがポラロイド風になってるはずですので

大きい写真を掲載されてる場合は

例えば、メインカラム一杯の写真とかの場合は

今回のCSSでは写真の外にフチを付けるCSSなので

カラム崩れする恐れがあります。

メインカラム一杯の写真を貼られてる方にはお勧めできないかも。

ワンポイントの所に、僕のようにロゴを使う場合は

ロゴサイズを調整しながら試してみてくださいね。

最後までお読みいただき有難うございました。

０円アメブロカスタマイズで頑張るペカルマンでした。