<p class="thumb"><img src="http://web-marketing.zako.org/images/2018/01/instagram-css.jpg" alt="" width="620" height="374" class="alignnone size-full wp-image-31322" /></p>
<p>インスタ映えなんて言って、いつのまにやらフォトジェニックという言葉がメディアから消え去っている昨今。
それならブログやサイトだって、写真がインスタっぽくなっていても良いじゃないか。なんてことになりますね。
というわけで今回は、CSSでインスタのフィルターを画像に付けられるものをご紹介します。</p>
<!--more-->

<h3 id="cssinstagramcss">CSSでインスタのフィルターを画像に付けられる「Instagram css」</h3>

<p>「<a href="https://picturepan2.github.io/instagram.css/">Instagram css</a>」は、サイトに掲載する写真にインスタで使えるようなフィルターをかけられるCSSのセット。
画像を囲むブロック要素に特定のクラスをつけてあげるだけでフィルターをかけることができるようになっています。</p>

<h4 id="">サンプル</h4>
<style type="text/css">
.filter-gingham {
  -webkit-filter: contrast(1.1) brightness(1.1);
  filter: contrast(1.1) brightness(1.1);
}

.filter-gingham::before {
  background: #e6e6e6;
  content: "";
  mix-blend-mode: soft-light;
}

.filter-willow {
  -webkit-filter: brightness(1.2) contrast(.85) saturate(.05) sepia(.2);
  filter: brightness(1.2) contrast(.85) saturate(.05) sepia(.2);
}

.filter-xpro-ii {
  -webkit-filter: sepia(.45) contrast(1.25) brightness(1.75) saturate(1.3) hue-rotate(-5deg);
  filter: sepia(.45) contrast(1.25) brightness(1.75) saturate(1.3) hue-rotate(-5deg);
}

.filter-xpro-ii {
  -webkit-filter: sepia(.45) contrast(1.25) brightness(1.75) saturate(1.3) hue-rotate(-5deg);
  filter: sepia(.45) contrast(1.25) brightness(1.75) saturate(1.3) hue-rotate(-5deg);
}

.filter-xpro-ii::before {
  background: radial-gradient(circle closest-corner, rgba(0, 91, 154, .35) 0, rgba(0, 0, 0, .65) 100%);
  background: -o-radial-gradient(circle closest-corner, rgba(0, 91, 154, .35) 0, rgba(0, 0, 0, .65) 100%);
  background: -moz-radial-gradient(circle closest-corner, rgba(0, 91, 154, .35) 0, rgba(0, 0, 0, .65) 100%);
  background: -webkit-radial-gradient(circle closest-corner, rgba(0, 91, 154, .35) 0, rgba(0, 0, 0, .65) 100%);
  content: "";
  mix-blend-mode: multiply;
}
</style>
<h5 class="tips">フィルターなし</h5>
<img src="http://web-marketing.zako.org/images/2018/01/pink-hotel.jpg" alt="" width="620" height="413" class="alignnone size-full wp-image-31323" />
<h5 class="tips">Gingham</h5>
<div class="filter-gingham">
	<img src="http://web-marketing.zako.org/images/2018/01/pink-hotel.jpg" alt="" width="620" height="413" class="alignnone size-full wp-image-31323" />
</div>
<h5 class="tips">X-Pro II</h5>
<div class="filter-xpro-ii">
	<img src="http://web-marketing.zako.org/images/2018/01/pink-hotel.jpg" alt="" width="620" height="413" class="alignnone size-full wp-image-31323" />
</div>

<h5 class="tips">Willow</h5>
<div class="filter-willow">
	<img src="http://web-marketing.zako.org/images/2018/01/pink-hotel.jpg" alt="" width="620" height="413" class="alignnone size-full wp-image-31323" />
</div>
<p>Classをつけたブロックで画像を囲んでいるだけなので実装も非常に楽です。</p>
<h4>実装サンプル</h4>
<p>たとえばGinghamのフィルターだとこんなcss</p>
<pre><code class="line-numbers language-css" data-language="CSS">// Gingham Filter <br>
	.filter-gingham {<br>
	  -webkit-filter: contrast(1.1) brightness(1.1);<br>
	  filter: contrast(1.1) brightness(1.1);<br>
	}<br>
<br>
.filter-gingham::before {<br>
  background: #e6e6e6;<br>
  content: "";<br>
  mix-blend-mode: soft-light;<br>
}
</code></pre>


<p>HTMLは以下のようなものが基本。<a target="_blank" href="https://github.com/picturepan2/instagram.css/blob/master/dist/instagram.css">instagram.css</a>をダウンロードしてサイトに読み込ませて、画像の外側のブロック要素に「filter-✕✕」のクラスをつけてあげればOKです。</p>

<pre><code class="line-numbers language-markup" data-language="Markup">&lt;div class="filter-gingham"&gt;
    &lt;img src="assets/img/✕✕✕.jpg"&gt;
&lt;/div&gt;
</code></pre>

<p>たったこれだけで写真にお気に入りのインスタ フィルターをかけることができてしまいます。</p>

<h4 id="42">フィルターは全部で42種類</h4>

<p>フィルターの名前とクラス名の一覧は以下。今後さらにフィルターの種類を増やしていく予定なのだそうです。</p>

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

<p>興味があるかたは<a href="https://picturepan2.github.io/instagram.css/">Instagram css</a>へどうぞ。</p>