【ロゴなどで使える！】PNG画像の背景を透明化させる方法

画像（PNG）を背景透過させる方法についてです。

ブラウザ上のWebサービスだけで、簡単に作成できました。

というのも、僕はWordpress歴2年ほどになりますが、つい最近あること気づきました。

上の画像のとおりです。小さくて今まで気づきませんでした。

ちょっと気になりますよね。。。

この記事の方法で、現在は上の画像のとおり直っています！

白い部分の原因は、ロゴの曲線などを無視した形で画像を使っているから、、、

こちらが使用しているファビコンの画像ですが、今まではロゴの画像に合わせて背景透明化をしていなかったんですよね。

同様に、ロゴ画像もCanvaで作ったものをそのまま表示させてました。

こんな感じで、ドラッグしようとすると、ロゴじゃない部分も表示されてます。

幸い、ヘッダーが白地だから良かったものの、違和感を感じますね。

上の画像のとおり、ロゴも直しました。

背景透過は思った以上に簡単でした。

ということで、やり方を分かりやすく説明しますね。

画像背景を透過させる方法

最初に全体の流れをお見せします。

作業の流れ

簡単 4ステップ です。

では、順番に見ていきましょう。

手順①：『PEKO STEP』さんのサイトを開く

早速、画像を背景透過にできるWebサービスへ接続しましょう。

『PEKO STEP』さんのサイトが便利です。

以下のリンクをクリックします。

https://www.peko-step.com/tool/alphachannel.html

上の画面が表示されました。

手順②：画像を開く

『ファイルを選択』をクリックして、背景透過させたい画像を選びます。

Finderなどからドラッグ＆ドロップでも画像を開けます。

⬆のとおり、画像を開くことができました。

手順③：画像の透過度設定をする

『不透明度』が「0」になっていることを確認します。　※デフォルトで「0」のはずです。

開いた画像の背景透過させたい箇所をクリックします。

⬆のとおり、背景透過させることができました。

簡単ですね。

戻したい場合

一旦、背景透過を戻したい場合は、『不透明度』を「100」にします。

そして、再度戻したい箇所をクリックしてみてください。

⬆のとおり、背景透過する前の状態に戻りました。

手順④：画像を保存して完了！

画像を左クリックして『名前を付けて画像を保存…』をクリックします。

Finder上の好きな場所に保存します。

まとめ

というわけで、今回は以上です！

最後までお読み頂き、ありがとうございました。
素敵なPCライフをお楽しみください。