【CSS小ネタ】写真っぽい写真【はてなブログ用】

　どうも！LSSです！！

フィルムカメラのように「フィルムの無駄」を気にせず、パシャパシャと気軽に撮影が楽しめるようになりましたね^^

それでも時々ふと、あの白いフチのある写真に懐かしさを覚えたりします。

スマホで撮影後に画像加工するのも手ですが、CSSなら画像はそのままでコードに少し手を加える事で、懐かしい白フチ写真を演出できます。

写真っぽい写真

はてなブログの「写真を投稿」機能で写真をアップロード・記事に挿入した後に、コードを付け足します。

赤太字、オレンジ太字部分が追記箇所となります。

※imgタグの内容は貼り付けた画像によってsrcやwidth、heightなどの内容は変わりますが、そこは手を加えなくてOKです。

まず、はてなブログで記事中に写真を貼り付けると、↓のようになります。

この時、「HTML編集」画面に切り替えると、該当箇所は次のようなコードが書かれています。

とに挟まれて、<img ～中略～/>が入っている、というカタチですね。

この、最初ののpの後ろに半角スペースを挟んで、以下のコードをコピペします。

style="border: 1px solid black; padding: 3%; box-shadow: 10px 10px 5px 0px gray;"

そして「プレビュー」に切り替えると、

↑のように、白フチつき、右下に影がついたような演出で表示される事になります^^

でも、よく見てみると…下のフチのほうが他よりもわずかに太くなっています。
これが気になる場合、「<img」の後ろにも半角スペースを入れて、その後に

style="display: block;"

のコードを挿入すると、フチの太さが同じになります^^

楕円形にくりぬいたような演出もできます。

こちらはもっと簡単で、

のように、imgタグに

style="border-radius: 50%;"

を挿入するだけです。

ちなみに、前述の白フチもそうなのですが、はてなブログの機能で「画像をクリックすると拡大表示」されますが、その拡大表示された場合には元の画像を見る事ができます。

ってなとこで、今回はこのへんで！

次回もまた、よろしくお願いします^^