CSSで簡単にInstagram風の画像にする方法

こんにちは。フローラです。
ご無沙汰してしまいすみませんでした。
今回はCSSで簡単におしゃれなInstagram風の画像にする方法をご紹介します！
Instagramは簡単に画像にフィルタをかけられますね。種類も豊富です。

CSSで簡単にInstagram風の画像にする方法
Instagramのフィルタ機能
実装手順
  1. 配布サイトからファイルをダウンロードする
  2. head内でリンクさせる
  3. 画像にCSSを適用

たったこれだけです。では実際に見てみましょう。

サンプル

Instagram.cssの公式サイトにサンプルが掲載されています。種類も豊富にありますね。
Instagram.css

ファイルをダウンロードする

GitHubからダウンロードしてきます。
https://github.com/picturepan2/instagram.css/blob/master/dist/instagram.css
GitHubにサインインしたら、CODEをクリックします。
CSSで簡単にInstagram風の画像にする方法
「clone or download」ボタンを押します。
CSSで簡単にInstagram風の画像にする方法
distフォルダの「instagram.css」が対象ファイルです。
「instagram.css」をHTMLのhead内で読み込みます。

<head>
<link rel="stylesheet" href="instagram.css">
</head>
CSSを適用する

画像ファイルにフィルタ用のdiv等で囲って、div等にclassを適用するだけです。
classは「filter-〇〇〇」。
〇〇〇は公式サイトのサンプルをご参照ください。

【ノーマル】

<div>
<img src="0000.png" alt="" width="900" height="600" />
</div>
CSSで簡単にInstagram風の画像にする方法

【Poprocket】

<div class="filter-poprocket">
<img src="0000.png" alt="" width="900" height="600" />
</div>
CSSで簡単にInstagram風の画像にする方法
画像にボックスがfitせずうまく表示できない場合

下記コードを追加してみてください。

img{
	margin: 0;
	padding: 0;
	vertical-align: bottom;
}
最後に・・・

簡単にInstagram風のスタイルが実装できましたね。
この方法だと、いちいちphotoshopを立ち上げる必要もありませんし、画像ファイルも一枚で済みます。
種類も豊富で何パターンも用意されているので、色々試してみてください。

投稿タグ
, , ,