たつブロ

アラフォーWebデザイナーの福岡のグルメや日々についての事など、いろいろ雑多なブログです。たまに阪神のことも...

ちょっと画像にアクセントをつけたい場合に【はてなブログ】上でも画像補正が簡単にできる!

f:id:ryurou-shima1126:20181027103857j:plain

ソフト不要!画像補正がここまでできる!!

 

 

どうも、たつとらです。

 

普段、皆さんはブログを書くときにトップの画像、アイキャッチ画像やブログの途中に画像を差し込んだりしていると思います。ボクは一応デザインの仕事をしている(そろそろブログもカスタマイズしたいのですが、記事を書くことで精一杯になっています…)のでPhotoshopというソフトを使って撮影した画像を補正したりしていますが、持っていない人も多いでしょうしブログを書きながら、「ちょっと画像に雰囲気を加えたい」、「画像にインパクトを与えたい」などを思っている人もいるに違いません。

 

そこで、はてなブログ上で誰でも画像の補正や、加工が簡単にできる方法を紹介したいと思います。

 

 

 

 

まずは、補正したい画像を差し込む

 

まず加工したい画像をブログに配置します。そのあと、編集画面の上のタブにあるhtml編集を押します。するとコードが出てくるので画像のコードの部分、例えば下記の赤枠の部分

f:id:ryurou-shima1126:20181026221010j:plain

 

<img class="hatena-fotolife"〜.jpg 〜>  の <>の部分の中の最後style="〜"】をいれるだけで好きなように補正や加工ができます。

 

f:id:ryurou-shima1126:20181025231228j:plain


style="〜"】の中を変更するだけで「明るさを変更する」、「コントラストを上げる」、「画像を白黒にする」等いろいろできます。

 

スポンサーリンク

 

画像の明るさを変更する

画像の明るさの変更は
{
style="filter: brightness(0%);"
}
※ {}の中だけをコピーして下さい

 

を上で指名した場所に差し込みます。値が0%のときが真っ黒で100%が元の明るさです。100%以上だと元の画像より明るくできます。200%のときは画像が2倍の明るさになります。

 

f:id:ryurou-shima1126:20181026222122g:plain

f:id:ryurou-shima1126:20181026222400j:plain

 

f:id:ryurou-shima1126:20181026222606g:plain  

150%のとき

f:id:ryurou-shima1126:20181026222400j:plain

 

コントラストを調整する

画像のコントラストを調整する場合は
{
style="filter: contrast(0%);"
}

※ {}の中だけをコピーして下さい

 

明るさと同じく、%で指定します。値を0%にするとグレー1色になります。100%で元の画像で、値を大きくすることによって画像のコントラストが大きくなります。

 

f:id:ryurou-shima1126:20181026222122g:plain

f:id:ryurou-shima1126:20181026222400j:plain

 

f:id:ryurou-shima1126:20181026222606g:plain  

200%のとき

f:id:ryurou-shima1126:20181026222400j:plain

 

 

彩度(画像の鮮やかさ)を調整する

画像の色の彩度を調整します。
{
style="filter: saturate(0%);"
}

※ {}の中だけをコピーして下さい

 

値が0%の場合は色彩がなくなり(無彩色)、100%が元画像で100%を超えると画像が元の画像より鮮やかになります。

 

 

f:id:ryurou-shima1126:20181026222122g:plain

f:id:ryurou-shima1126:20181026222400j:plain

 

f:id:ryurou-shima1126:20181026222606g:plain  

200%のとき

f:id:ryurou-shima1126:20181026222400j:plain

 

 

画像を白黒(モノクロ)にする

{
style="filter: grayscale(0%);"
}

※ {}の中だけをコピーして下さい

 

上のコードを差し込めば、画像を白黒(モノクロ)にできます。値が0%の時が元の画像で、100%にすると完全な白黒画像になります。

 

f:id:ryurou-shima1126:20181026222122g:plain

f:id:ryurou-shima1126:20181026222400j:plain

 

f:id:ryurou-shima1126:20181026222606g:plain  

100%のとき

f:id:ryurou-shima1126:20181026222400j:plain

 

 

画像をセピア調にする

{
style="filter: sepia(0%);"
}

※ {}の中だけをコピーして下さい

 

上のコードを差し込めば、画像を昔風の赴きのあるセピア調にします。0%が元の画像で、100%で完全にセピア色になります。

 

f:id:ryurou-shima1126:20181026222122g:plain

f:id:ryurou-shima1126:20181026222400j:plain

 

f:id:ryurou-shima1126:20181026222606g:plain  

100%のとき

f:id:ryurou-shima1126:20181026222400j:plain

 

 

画像をぼかす

{
style="filter: blur(1px);"
}

※ {}の中だけをコピーして下さい

 

上のコードを差し込めば、画像をぼかすことができます。pxの値が大きくなるほど、ぼかしの度合いが強くなります。

 


f:id:ryurou-shima1126:20181026222122g:plain

f:id:ryurou-shima1126:20181026222400j:plain

 

f:id:ryurou-shima1126:20181026222606g:plain  

3pxのとき

f:id:ryurou-shima1126:20181026222400j:plain

 



 画像を透明に(薄く)する

{
style="filter: opacity(0%);"
}

※ {}の中だけをコピーして下さい

 

画像を透明に(薄く)します。100%の時が元の画像で、0%で画像が全く見えない透明になります。



f:id:ryurou-shima1126:20181026222122g:plain

f:id:ryurou-shima1126:20181026222400j:plain

 

f:id:ryurou-shima1126:20181026222606g:plain  

50%のとき

f:id:ryurou-shima1126:20181026222400j:plain

 

  

画像に影をつける

{
style="filter: drop-shadow(5px 5px 10px #000);"
}

※ {}の中だけをコピーして下さい

 

画像に影をつけて浮かします。この値は、最初の数値がx軸(値を増やす程、右側に影が増える)、次がy軸(値を増やす程、下側に影が増える)、次が影のぼかしの量(多い程、影がぼけます)最後が影の色です(普通に黒の場合は#000)。



f:id:ryurou-shima1126:20181026222122g:plain

f:id:ryurou-shima1126:20181026222400j:plain

 

f:id:ryurou-shima1126:20181026222606g:plain  

2px 2px 5px #000のとき

f:id:ryurou-shima1126:20181026222400j:plain

 

 

画像の角を丸くする

{
style="border-radius: 0px;"
}

※ {}の中だけをコピーして下さい

 

画像の角を丸めることができます。0の場合が角が四角で大きくする程、角が丸くなっていきます。



 

f:id:ryurou-shima1126:20181026222122g:plain

f:id:ryurou-shima1126:20181026222400j:plain

 

f:id:ryurou-shima1126:20181026222606g:plain  

10pxのとき

f:id:ryurou-shima1126:20181026222400j:plain

 

 

以上、はてなブログでもできる色々な画像補正でした。普段のブログからちょっとしたアクセントを付けたいときなどにオススメです。もちろん、コードを追加すれば組み合わせもできます。紹介した他にも画像補正ができるのもあるので、その都度紹介していけたらと思います。

 

では、また。

 

【独自ドメインを取得するなら】



スポンサーリンク