ブログヘッダー画像の背景を透過したい!簡単な方法教えます!

当ページのリンクには広告が含まれています。

先日、急に思い立ってブログスキンを切り替えました(ブログ書け)

今まで使用していた背景が白であったため気になっていませんでしたが変更したことでブログタイトルのヘッダー背景色が変わってしまい急に目立ってしまいました

これをどうにか出来ないのかといろいろ調べました

Googleで調べてみたらCSSを書き換えて背景を変更することも出来るようですが知識があまりないので敷居が高い・・・

しかも下手に分からずいじってしまうと、最悪ブログが真っ白になってしまう可能性も・・・!

それは避けたいので他の方法を探したら・・・・ありました!

この記事ではヘッダーバナーの透過の仕方を教えます!

こんな内容が書かれています

ブログのヘッダーバナーなどの画像を透過する方法

短い時間でとても簡単にできます

自分も数分ほどで画像の加工ができました!

  • HTMLやCSSなどの難しい知識は必要ありません
  • 有料ツールなどもいりません
  • 簡単な操作ですぐに編集が出来ます

この記事をよんで浮いたロゴを脱却し、統一感のあるデザインにしましょう!

記事の内容(クリックできます)

バナーの一部を透明化する

早速ですが今回、画像を透過するためにこちらのサイトを使用します

▶ブログHPツール

こういった感じのサイトです

ブログでよく使う画像のリサイズやトリミングなども出来る便利なサイトです

画像透過の項目を選択

今回はこちらの画像透過を使用します

加工した画像ファイルを選択

中に入るとこのような画面になります

赤く囲われている「ファイルを選択」をクリックし、ご自身の加工したい画像を選択してください

画像の編集

画像を選択したらいよいよ加工していきます

まずはじめに「隣接」というボタンをクリックし、チェックをいれておきます

隣接ボタンをオンにすることでペイントの塗りつぶしのようなクリックした色と繋がっている色のみを透過してくれます

これをオフにすると・・・

このように透過してほしくない部分まで透過されてしまいます

透過しても問題ない場合はもちろんオフで使用してください!

透過の選択

次は透過する場所を選択して画像を透過していきます

透過の設定は「色モード」を選択してください

これはペイントの塗りつぶしと同じで選択した部分を一気に塗りつぶしてくれます

「ペンモード」は細かく部分を透過させたいときにポインタでクリックした部分を塗りつぶします

複雑な形でなければ「色モード」で塗りつぶしたほうがとても簡単です!

色の許容値の変更

この設定が一番重要になります

色の許容値が低いと線との境界の透過具合が甘く綺麗に透過されません

試しに設定値「1」で透過してみると・・・

このように線の周りが白くガタガタになってしまいます

逆に色の許容値が高いと線との境界のギリギリまで透過してしまい線が綺麗に残りません

こちらも試しに「200」で透過してみます

このようにうさぎの線の外側が削れてしまい、タイトルロゴの輪郭もすこしギザギザとしています

適切な設定値は?

いろいろ試した結果、設定値は40~100の間にしたほうが綺麗に透過されると思います

ちなみに自分のロゴは設定値を「40」で透過しています

画像の解像度などによって変わってくると思いますので実際に設定値を変えてご自身の納得いく数値で透過してみてください!

「戻る」ボタンを押すことで1つ前の状態に戻すことができます!

完成したバナーの画像化

透過が完了したら画像化してみましょう!

赤く囲んである「画像化」をクリック!

クリックするとキャンバスの下に黄色い点線で囲われた画像のプレビューがでます

その下段にある「保存」をクリックすると画像がダウンロードされます

これで透過画像が作成されました!

最終確認

作成出来たからすぐにバナーを設定しよう!となりますが最終確認することをオススメします

プレビュー画面では上手くできているように見えても、実際は輪郭が荒かったりぼやけていたりすることがあるからです

確認する方法は単純にダウンロードしたバナー画像を開いてみてみるだけです

パソコンのダウンロードフォルダに入っている先程保存した画像を開きます

すると、このように透過加工した後のバナー画像がみれます

この画像は透過設定を低めにしたため文字やうさぎの輪郭の透過が甘く、白く残ってしまっています

確認をして微妙な点があれば再度設定を変更してから再ダウンロードしてください

透過加工したらブログヘッダーを変更してみよう

最終確認をしてみて問題ないようでしたらブログヘッダーに設定してみましょう!

実際に透過加工したブログバナーを貼ってみると・・・

背景の白枠が消えてちゃんと透過出来てますね!

ついでにフッターのブログバナーもみてみました。いい感じです!

ちょっとブログのブランド化が進んだ気がします♪(気がするだけです)

スポンサーリンク

まとめ【いらないバナー背景を透過してサイトデザインをスマートに】

この記事はブログバナーなどの画像の背景を透過する方法を紹介しました!

ちょっとしたことですがやる前とやった後だと見た目がずいぶん変わっておしゃれな感じになりました♪

気になっているけどやり方がわからない方の参考になればとても嬉しいです!

投票してもらえると嬉しいです♪
にほんブログ村 花・園芸ブログ 趣味の園芸へ
にほんブログ村

多肉植物ランキング
多肉植物ランキング

 

シェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメントをどうぞ

コメントする

記事の内容(クリックできます)