文字背景の透明化が綺麗にできない?!解決方法はこちら!!

どうも、クルルです!
本日は文字背景の透明化で困った事があり、何とか見栄え良く出来るようになったので、
同じように悩んでいる方の力になればと思い記事にしました!!
ぼくは知識がないので他に良い方法があるかもしれませんが、よければご覧ください。





・文字背景の透明化が綺麗にできない・・・(;´・ω・)


ぼくはブログを始めてまもない初心者ブロガーです!!
そんなぼくがブログタイトルのロゴを作ろうと、ネットで調べていると『PEKO STEP』さんに行き当たったので利用させて頂く事にしました。(*´ω`*)
便利な物を作って頂き感謝です!!


・Let’s Try!!


さっそく利用開始!!
まずは作ったロゴのファイルを取り込みます。





この白くなっている部分を透明にしたいので、
透明対象を『クリックした色』に選択して、白い部分どこでもいいのでクリック!!
すると・・・。





こんな感じで白い部分が消えて透明化完了!!
いい感じですね~☆
簡単だ♪♪(*´ω`*)


・そして失敗


さて次はいよいよサイトに表示設定だぁー\(^o^)/
ポチポチッと・・・。





え、えっ??
これは・・・。





汚い、まるで幼児の塗り絵のようだ・・・。Σ(゚д゚;) ヌオォ!?笑
なんでだーちゃんとやり方調べてやったのにー!!(;´・ω・)


ぼくのやり方に問題があるのか、それともPCの環境問題なのか分かりませんが、
こんなタイトルロゴただの罰ゲームじゃあないか。笑


ここからぼくは長い事頭を悩ませるのでした・・・。





・解決方法


まずはこの白い部分!
こいつをどう消滅させるか。
フォントが悪いのか?とかサイズが悪いのか?など試してみたものの変化なし。



こんな時間使って悩むぐらいなら記事書いていた方がいいのでは?と何度も頭をよぎりました。笑



そして色々試していく中でやっと納得できるレベルまで到達しましたー!!(>_<)



・解決方法その1


※『この方法は、サイトの背景が『単色』かつ『カラーコードが分かっている』状態の方が対象です。』



この白い部分は背景の白・・・、という事は
透明化する前の段階で『サイトの背景』『文字背景』の色を同じにしてみたらどうか?
よしやるぞ!!
背景が同じ色のロゴを作成していざ取り込み・・・。





そして緑の部分をクリック!!
できあがったのがこちら・・・。





周りに緑ぃのがくっ付いていますが同じ色だからきっとおけっ!(゚Д゚)ノ
それではサイトに設定だぁー!!





おぉ!いとなじんでおられる・・・。(*´ω`*)笑
希望の光がさしたぜ♪♪





・解決方法その2


※『こちらの方法だと『写真背景』『多色背景』の人でも解決できるかと思います。』



解決の兆しが見えましたが、
ぼくのサイトの背景は単色じゃなくて『写真画像』。
この方法じゃ解決できない。(*´Д`)



なんとかできないかと考えた結果、辿り着いたのがロゴの作成時に『文字枠の色』『背景の色』を設定する方法です。
この方法だと色々な色があるサイト背景でもなんとかなりました。



透明化する際に、文字背景の色が少し残ってしまっていたので、
『文字枠の色』を設定し背景の色』は文字枠の色の薄い色を設定します。
理由は背景を透明化するすると、
文字枠』と『背景』が同系色なので、薄い背景の色が多少残ってもあまり気にならなくなります。


言葉では分かりずらいので実際にみて行きましょう!!
まずロゴに文字枠を設定します。
文字枠の色は濃いめのグレーをお勧めします!! 理由はサイトに設定する際にロゴ文字枠と背景のコントラストが強すぎて違和感がでるためです。





こんな感じになるかと思います。
黒く見えますが、一応濃いめのグレーです!!



そして背景を設定するのですが、
上で説明したように『背景が少し残ってしまった際に背景の色が文字枠の色より薄いと目立ちにくくなるため、文字枠の色の同系色で薄い色を選択します。』
では設定!!





はい、こんな感じです!!
それでは背景透明化しましょう♪♪




いい感じですね!\(^o^)/
ここで拡大してみて、まだ気になる所があればWindowsのペイントなどで出っ張った部分を消す事が出来るのでより綺麗にできます☆
拡大するとこんな出っ張りがあったりします。





ぼくは今回ペイントでの修正は行いません。
では、いよいよサイトに設定しますー!!(`・ω・´)





どうですか??
今回はちょっとオレンジの色が強すぎましたが、そこそこな感じにはなったかと思います♪♪
これでペイントで少し修正すればかなり綺麗に仕上がるのではないでしょうか?\(^o^)/




その他、ブログ関連での困った事はこちらです!!

Font Awesomeのアイコンがちゃんと表示されない?!解決方法!!

ワードプレスで広告の表示・ツイッターの埋め込み表示がおかしい!謎のArray表示!



・最後に・・・


ここまで、かなり悩んでやっとこさ妥協できる所まで辿り着きました。
現在の『サイトロゴ』と『ファビコン』も上記の方法で作成し、ペイントでの修正はしていません! なんかその方が味がある感じがして気に入ってます!!(*´▽`*)笑


PEKO STEPさん、便利な物を提供して頂きありがとうございます!
気に入ったロゴが作れました♪♪
今後も利用させて頂きたいと思います!!\(^o^)/


以上、ぼくなりの解決方法でした!
もっといい方法があったり、そもそも使い方が違っているなどございましたら『お問い合わせ』からご一報頂ければ幸いです。


この記事が少しでも皆さんの役に立てたら嬉しいです!!(*´ω`*)
ここまで読んで頂きありがとうございました☆
スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする