ブログの写真をポラロイド風にする方法

こんにちは、ホームページ作成アドバイザーの田中です。


ブログに掲載する写真いつもより良くとれたので、少し豪華に見せたい！

それならば写真をポラロイド風にしてみてはいかがでしょうか？

ブログに画像を張り付けする時に１回だけコピペするだけの簡単な手間でポラロイド風になります。


早速サンプルをご覧ください。

普通に画像を張り付けた場合



これをポラロイド風にするとこんな感じです。




ちょっとしたひと手間で写真がちょっと豪華に見えますよね。

子供の写真だけでなく、料理の写真とか、商品の写真など写真をよりリアルに見せたい場合にお勧めです。

ちなみにこの記事をスマホでも確認しましたがきれいにポラロイド風になっています♪




やり方は簡単です♪

今回はアメブロを例に説明しますが、これはほとんどのブログで使えますのでご安心ください。

１、まず、アメブロのブログ投稿画面を開き画像ボタンを押します。
「タグ編集エディタ」のようにhtmlタグが編集できるエディタで記事を書きます。


２、画像を記事に張り付けます。



３、張り付けた画像のhtmlタグの●部分にテキストを追加します。



アメブロで張り付けた画像のhtmlタグ

<a href="http://stat.ameba.jp/user_images/20140903/09/belink/fe/15/j/o0300020013055021222.jpg">
<img src="http://stat.ameba.jp/user_images/20140903/09/belink/fe/15/j/o0300020013055021222.jpg" alt="" border="0"● /></a>

＋

上の●の部分に下記のタグをコピペして挿入します。

style="padding: 8px 8px 25px 8px;border: 1px solid #ccc;border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px;box-shadow:rgba(113, 135, 164, 0.309804) 4px 4px 6px -2px;-webkit-box-shadow:rgba(113, 135, 164, 0.309804) 4px 4px 6px -2px;-moz-box-shadow:rgba(113, 135, 164, 0.309804) 4px 4px 6px -2px;"

↓

挿入が完了すると下記の様になります。

<a href="http://stat.ameba.jp/user_images/20140903/09/belink/fe/15/j/o0300020013055021222.jpg">
<img src="http://stat.ameba.jp/user_images/20140903/09/belink/fe/15/j/o0300020013055021222.jpg" alt="" border="0" style="padding: 8px 8px 25px 8px;border: 1px solid #ccc;border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px;box-shadow:rgba(113, 135, 164, 0.309804) 4px 4px 6px -2px;-webkit-box-shadow:rgba(113, 135, 164, 0.309804) 4px 4px 6px -2px;-moz-box-shadow:rgba(113, 135, 164, 0.309804) 4px 4px 6px -2px;" /></a>

ちょっとごちゃごちゃっとしてしまいますが大丈夫です、プレビューを見てみましょう。



是非挑戦してみてくださいね。


本日もお読みいただきましてありがとうございました。
ホームページ作成アドバイザーの田中がお伝えしました。


このブログの内容についてご質問はありませんか？
少しでも不安や疑問がありましたら、どうぞお気軽にご連絡ください。
あなたからのご連絡を心よりお待ちしております。
メッセージを送る！

今回の記事を気に入っていただけた方はこちらへ！