HTMLコーディング

ホームページもインスタ映えの時代!?classを付けるだけで画像をインスタグラム風にできるcss

こんにちは、ほぼ毎日朝7時からジムに通ってます。徳永です。
今更ながらあけましておめでとうございます。
作業がひと段落したので重い腰を上げて2018年1発目の記事を書こうと思います。

近頃街を歩いているとスマホで建物や友人同士で撮影している人を見かけと、「インスタに投稿するんかな?」と思います。
去年の流行語大賞で「インスタ映え」とノミネートされる位、いまではインスタグラムが生活の一部になってるなと感じます。

インスタグラムは撮影した写真を既に用意されているフィルターを適用する事で写真の見栄えを変えることが出来るので
自分好みの写真を自由自在に作ることが出来ます。
そして、そんなインスタグラム風な写真がスタイルシート1つでも再現できるようになりました。
今日はその方法をご紹介します。

「Instagram.css」でホームページをインスタ映えに

「Instagram.css」はclassを付けるだけで41種類ものフィルターを画像に適用する事が出来る便利なスタイルシートです。
使い方も非常に簡単です。GitHubから「Instagram.css」または「Instagram.min.css」をダウンロードして、スタイルシートを読み込ませます。
そして適用させたい画像を括っているdivやfigureに下記のようにclassを付け加えます。

<div class="filter-filter_name">
<img src="image.jpg">
</div>

class=”filter-[filter_name]の[filter_name]を適用したいフィルター名を入力します。
例えば1977年風のフィルターを適用すると、、、

<div class="filter-1977">
<img src="image.jpg">
</div>


(ちなみに写真は2年前西日本一高い「石鎚山」で撮影したものです)

他にも、こんな風にしたり

<div class="filter-skyline">
<img src="image.jpg">
</div>

このようにたった数行のコードを入力するだけで、インスタ風の画像に早変わりします。
現在用意されている41種類のフィルターのclass名は以下になります。

  • 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

注意点としては、フィルターを適用した際自動的に「:before」疑似要素が追加されているので
すでに「:before」疑似要素を使用していると上手く適用されない可能性もありますのでご注意ください。

是非「Instagram.css」でインスタ映えするサイトにしてみてはいかがでしょうか。

スタイルシートのダウンロードはこちらから
https://picturepan2.github.io/instagram.css/

PS:夏までにインスタ映えするボディを作りたい、徳永でした。

ピックアップ記事

  1. 【お客様インタビュー】サンキョウプラテック株式会社様

関連記事

  1. HTMLコーディング

    便利すぎるWebフォント「Font Awesome」でサイトの見栄えをワンランクUP!

    今回はWebフォント「Font Awesome」の使い方を紹介します。Font Awesomeとは、Web上でアイコンをフォントとして利用できるW…

  2. HTMLコーディング

    【SVGことはじめ その1】SVG形式の画像ファイルを作って表示させてみよう

    このあいだ社長の大好きなラフロイグというウイスキーを飲ませてもらい独特の匂いに驚きのけぞったともさんです、こんにちは。みなさん、svgって知っ…

  3. HTMLコーディング

    【WordPressでGO!】管理画面の左メニューをカスタマイズしてみよう

    皆様あけおめです。ともさんです。あけおめ・・・もう2月ですよ。どうしましょう。なにをしてたんでしょうか。というわけで、今回もはりきってゴー…

  4. HTMLコーディング

    最近流行りの静的サイトジェネレータについて掘り下げてみる【Movable Type編】

    最近、耳をふさがないイヤホンを見つけて衝動買いしてしまったワタクシ、ともさんです。こんにちわ。Bluetoothではないのに、まあまあ高め…

  5. HTMLコーディング

    棒グラフをcssで表現してみよう

    何かおいしい日本酒銘柄があれば教えて欲しいと思っている、ともさんです。ちなみに、私のおすすめは「美少年」です。先日の案件で、サイト内に棒グ…

  6. HTMLコーディング

    高機能で簡単!レスポンシブ対応のjQueryスライダー「bxSlider」を設置してみよう

    もう年の瀬ですね。当社の営業日も実質今日で終わりです。あとは大掃除を残すのみ(/・ω・)/そんな中でのこんなブログ記事です。仕事熱…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

CAPTCHA


最近の記事

  1. レポート

    グリコードを使ってプログラミングを学んでみた!
  2. WEBデザイン

    Photoshopで付箋風のデザインを作る方法!!
  3. WEBデザイン

    ブログ内のリンク切れをチェックしよう!Broken Link Checkerの使…
  4. コピーライティング

    コピーライティング心理学 そのさん ~バンドワゴン効果とスノッブ効果~
  5. HTMLコーディング

    【SVGことはじめ その1】SVG形式の画像ファイルを作って表示させてみよう
PAGE TOP