どうも！LSSです！！
今回は、手元にあるCSSの本の一番最後に載っている「filter」を試してみます。
元画像とフィルター
元画像（今日の昼に作ったチャーハン←またかいっ！ｗ）
セピア
ぼかし
色反転
やり方はとても簡単^^
普通に、はてなブログの機能で画像をアップロード、記事に貼り付けると、HTML編集画面ではこんなコードになります。
<p><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/l/little_strange/20200824/20200824231356.jpg" alt="f:id:little_strange:20200824231356j:plain" title="f:id:little_strange:20200824231356j:plain" class="hatena-fotolife" itemprop="image" /></p>
この<p>と</p>で挟まれた<img>タグに、styleオプションを付け足すだけ！
セピア
<p><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/l/little_strange/20200824/20200824231356.jpg" alt="f:id:little_strange:20200824231356j:plain" title="f:id:little_strange:20200824231356j:plain" class="hatena-fotolife" itemprop="image" style="filter: sepia(100%);" /></p>
style="filter: sepia(100%);"
を付け足しています。
ぼかし
<p><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/l/little_strange/20200824/20200824231356.jpg" alt="f:id:little_strange:20200824231356j:plain" title="f:id:little_strange:20200824231356j:plain" class="hatena-fotolife" itemprop="image" style="filter: blur(5px);" /></p>
style="filter: blur(5px);"
を付け足しています。
色反転
<p><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/l/little_strange/20200824/20200824231356.jpg" alt="f:id:little_strange:20200824231356j:plain" title="f:id:little_strange:20200824231356j:plain" class="hatena-fotolife" itemprop="image" style="filter: invert(100%);" /></p>
style="filter: invert(100%);"
を付け足しています。
他にも何種類かのフィルターがありますが
とりあえず試しやすそうなものだけ試してみましたｗ
あと、コード中に入ってる数値を調節する事でも、フィルターの影響の「程度」を調節できます^^
ただし、これはブラウザ上での見た目を変更しているだけで、例えば画像をダウンロード保存すると、普通に元のままの画像がダウンロードされます。
（Chromeで、画像の上で右クリックして「新しいタブで画像を開く」などでも、元画像が表示されます。）
あと、記事タイトルに記載した通り、InternetExplorはそもそも非対応だそうです^^;
今回は画像に対してフィルターをかけてみましたが、画像以外の要素にも適用可能なので、キーフレームアニメーションと組み合わせると面白い効果が出るのかも？
お手軽な使い方としては…閲覧注意画像に「ぼかし」をかけておいて、見たい人だけ「画像クリックで別途画像が表示される、はてなブログの標準機能」と組み合わせるのはアリかもですねｗ
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
