続・私にもできた！画像を写真っぽくするテクニック(スマホ対応済)

あなたのビジネスに
寄り添える身近なウェブデザイナー
もりかわ ゆきえ です。


前回
私にもできた！
画像を写真っぽくするテクニック
と言うタイトルで記事を書きましたが
スマホに対応されてなかった…


 

画像に対するスタイルシートが
効いてないことが分かり
スマホに対応させるやり方を…

そして、もっと簡単にできないかを
模索してました


そこで、画像加工しなくても
スマホから見て写真っぽく見える技を
改めてご紹介します

1.下のタグをコピーします。

<div style="display: inline-block; border: #FFF 5px solid; box-shadow: 2px 2px 10px rgba(0,0,0,0.2);"><a href="https://stat.ameba.jp/user_images/20180220/13/yukiweb-note/73/4a/j/o0500033314135258242.jpg"><img alt="" contenteditable="inherit" height="253" src="https://stat.ameba.jp/user_images/20180220/13/yukiweb-note/73/4a/j/o0500033314135258242.jpg" width="380"></a></div>


2.HTML表示にして
コピーしたタグを貼り付けます。

3.通常表示に戻します。
すると写真風の画像が表示されます。

4.画像をクリックして青くします。

5.キーボードの右矢印(→)を押して
画像の横にカーソルを合わせます。



右矢印を押すと
画像の右側に縦長の線が点滅します。


6.使用したい画像を
画面右側の写真リストから選択します

7.今度は、キーボードの左矢印(←)を
押します。

画像と画像の間に縦長の線が点滅します


8.キーボードの
BackSpace(バックスペース)を押して
最初から入っている画像を削除します

9.最後に画像をクリックして
画像サイズを「横：380」に
変更します。





◆おまけ◆
・ポラロイド風のタグ
下記のタグをコピーして貼り付けます。

やり方は上記と同じ

<div style="display: inline-block; border: #FFF 5px solid; border-bottom: #FFF 30px solid; box-shadow: 2px 2px 10px rgba(0,0,0,0.2);"><a href="https://stat.ameba.jp/user_images/20180220/13/yukiweb-note/73/4a/j/o0500033314135258242.jpg"><img alt="" contenteditable="inherit" height="253" src="https://stat.ameba.jp/user_images/20180220/13/yukiweb-note/73/4a/j/o0500033314135258242.jpg" width="380"></a></div>

やっぱり、分からないという方は
メッセージください

7日間毎日21時くらいに配信です

1日目の講座の終わりには

ホームページやブログで使える
お問い合わせボタン8色セットと
ボタン素材の使い方を特典として
もれなく全員にプレゼント

ぜひ、こちらのメール講座も
登録してくださいね

また、メール講座での質問や感想も
お気軽にお寄せください

メルマガ登録はこちら

※携帯電話（docomoやau、softbank）
でのメールでは受信ができません。
パソコンのメールアドレス（Gmailも可能）
での登録をお願いします。