簡単なのにすごい!普通の写真をインスタ映えする写真にできるスタイルシート -Instagram.css

写真画像にインスタ映えするフィルタを適用するスタイルシートを紹介します。
使い方は簡単で、外部スタイルシートと画像にclassを加えるだけでOKです。

42種類のフィルタが用意されており、どのフィルタでも簡単に利用できます。

かわいい文鳥のアクセサリ

かわいい文鳥のアクセサリ: 適用フィルタ「Lo-Fi」

上の画像はInstagram.cssのフィルタを適用したもので、元画像はこちら。

かわいい文鳥のアクセサリ

かわいい文鳥のアクセサリ: 元画像

画像の文鳥は@mamimoonさんの作品で、文鳥祭りなどの催事やオンラインショップで入手できます。入荷しても、すぐに売り切れてしまいます。

CSSのフィルタは、Instagram.cssです。インスタグラム風のフィルタが42種類用意されており、画像にclassを加えるだけで簡単に適用できます。

サイトのキャプチャ

Instagram.css
Instagram.css -GitHub

使い方は、簡単です。

Step 1: 外部ファイル

当スタイルシートを外部ファイルとして記述します。

.scssファイルも用意されており、カスタマイズも簡単です。

Step 2: HTML

あとは、画像に適用したいフィルタのclassを加えるだけです。
フィルタの名前には、「filter-lofi」などを記述します。

figure要素でなく、div要素などでもOKです。

サポートブラウザ

対応ブラウザは、Chrome 18+, Edge 13+, Firefox 35+, Opera 15+, Safari 6+で、IEはCSSのfilterが未サポートとなっています。

実際にInstagram.cssのフィルタを適用してみました。
新作文鳥と共にお楽しみください!
※画像の掲載にあたり、@mamimoonさんの許諾を得ています。

かわいい文鳥のアクセサリ

適用フィルタ「1977」

いくらの軍艦巻きに紛れ込んだ文鳥。

かわいい文鳥のアクセサリ

適用フィルタ「Amaro」

花瓶文鳥、かすみ草が挿してあります。

かわいい文鳥のアクセサリ

適用フィルタ「Brannan」

おでんがおいしい季節に、おでん文鳥も欠かせません。こんにゃくとちくわに挟まれています。

かわいい文鳥のアクセサリ

適用フィルタ「Charmes」

おでん文鳥にはレアのからし付きもあります。

かわいい文鳥のアクセサリ

適用フィルタ「Crema」

定番のおでん文鳥と枝豆文鳥には、マグネット版も!
けっこうしっかりくっつきます。

かわいい文鳥のアクセサリ

適用フィルタ「Earlybird」

桜餅団子文鳥、みたらし団子シリーズの進化系。

かわいい文鳥のアクセサリ

適用フィルタ「Ginza」

たこ焼き文鳥は数を揃えて、並べたいですね。

かわいい文鳥のアクセサリ

適用フィルタ「Helena」

オムライスに添えられた文鳥。付け合わせ的な存在です。

かわいい文鳥のアクセサリ

適用フィルタ「Inkwell」

タコさんウインナー文鳥。フィルタは白黒ですが、ウインナーのあの色になっています。

かわいい文鳥のアクセサリ

適用フィルタ「Juno」

鏡餅文鳥とみたらし団子文鳥。来年の正月にいかがですか?

かわいい文鳥のアクセサリ

適用フィルタ「Lo-Fi」

すこし溶けかかってるアイスキャンディー文鳥。

かわいい文鳥のアクセサリ

適用フィルタ「Maven」

コロネ文鳥はたくさん集めたい逸品です。

かわいい文鳥のアクセサリ

適用フィルタ「Moon」

たくさんの枝豆にこっそり忍び込ませたい枝豆文鳥。

かわいい文鳥のアクセサリ

適用フィルタ「Perpetua」

枝豆文鳥の激レア、寝顔バージョン。現存は一つだけ!

かわいい文鳥のアクセサリ

適用フィルタ「Reyes」

コロネ文鳥はクリーム、チョコ、春色など、さまざまなバリエーションがあります。

かわいい文鳥のアクセサリ

適用フィルタ「Sierra」

みたらし文鳥たくさん!

かわいい文鳥のアクセサリ

適用フィルタ「Slumber」

青りんご飴文鳥、りんごの芯付きです。

かわいい文鳥のアクセサリ

適用フィルタ「Sutro」

お部屋のインテリアにもぴったりな文鳥。

top of page

©2018 coliss