映えるのか!?instagram.cssで画像をインスタ風に加工!

プロモーションのこと、制作のこと、気になる話題をお伝えします

  • WEB

映えるのか!?instagram.cssで画像をインスタ風に加工!

映えるのか!?instagram.cssで画像をインスタ風に加工!

どうも!
だんだん寒さも和らいできましたね!
インスタグラムといえば少し前からユーザーも増え「インスタ映え」などという流行語も登場しましたね。
投稿される画像の中でもキレイな画像などは「インスタ映え」する画像などと言われるのですが、今回はそんな「インスタ映え」する画像をホームページでも作成できるinstagram.cssをご紹介します。
今回は少し難易度がアップするのですが、どうしてもご紹介したく記事にまとめてみました。

 どこで入手するの?

まずはGitHubより、ファイルをダウンロードします。
ダウンロード先URL:https://github.com/picturepan2/instagram.css
ダウンロードが出来たら、次に自社のサーバーにアップロードを行います。FTPツールなどを使い、任意の場所、もしくはフォルダ指定のある場所にアップロードをします。

 

 どうやって使うの?

予め用意されたクラス名をタグにつけます。
↓使用例 ※タグの編集は慎重に行わないと、うまく表示されなかったり、レイアウトが崩れる場合がありますので、ご注意を!

タグ入力例↓
<figure class="filter-〇〇任意のフィルター名">
  <img src="example.jpg" alt="example">
</figure>

 使えるフィルター

使い方でご紹介したfilter-の後に、下の一覧から好きなフィルタ名を入力します。

1977 クラス名→ filter-1977
Aden クラス名→ filter-aden
Amaro クラス名→ filter-amaro
Ashby クラス名→ filter-ashby
Brannan クラス名→ filter-brannan
Brooklyn クラス名→ filter-brooklyn
Charmes クラス名→ filter-charmes
Clarendon クラス名→ filter-clarendon
Crema クラス名→ filter-crema
Dogpatch クラス名→ filter-dogpatch
Earlybird クラス名→ filter-earlybird
Gingham クラス名→ filter-gingham
Ginza クラス名→ filter-ginza
Hefe クラス名→ filter-hefe
Helena クラス名→ filter-helena
Hudson クラス名→ filter-hudson
Inkwell クラス名→ filter-inkwell
Kelvin クラス名→ filter-kelvin
Kuno クラス名→ filter-juno
Lark クラス名→ filter-lark
Lo-Fi クラス名→ filter-lofi
Ludwig クラス名→ filter-ludwig
Maven クラス名→ filter-maven
Mayfair クラス名→ filter-mayfair
Moon クラス名→ filter-moon
Nashville クラス名→ filter-nashville
Perpetua クラス名→ filter-perpetua
Poprocket クラス名→ filter-poprocket
Reyes クラス名→ filter-reyes
Rise クラス名→ filter-rise
Sierra クラス名→ filter-sierra
Skyline クラス名→ filter-skyline
Slumber クラス名→ filter-slumber
Stinson クラス名→ filter-stinson
Sutro クラス名→ filter-sutro
Toaster クラス名→ filter-toaster
Valencia クラス名→ filter-valencia
Vesper クラス名→ filter-vesper
Walden クラス名→ filter-walden
Willow クラス名→ filter-willow
X-Pro II クラス名→ filter-xpro-ii

実際に加工してみました

実際にこのフィルターを使用して加工した画像を一部ご紹介します。
画像は先日ブログ記事でアップロードしました、釣りの画像を加工してみました。
んん~~、何気ない画像が、少しカッコよく?なりましたね!笑

釣りのブログ記事はこちら

instagram.cssで画像加工した画像フィルター名willow
フィルター名willow

 

instagram.cssで画像加工した画像フィルター名1977
フィルター名1977

 

instagram.cssで画像加工した画像フィルター名crema
フィルター名crema

 

instagram.cssで画像加工した画像フィルター名kelvin
フィルター名kelvin

 

いかがでしたか?
ご興味がございましたら、是非!!

 

//____________

WEB制作なら大阪のWEB制作会社シードアシストへお気軽にご相談下さい!

 

その他の最新コラムはこちら