カスタマイズについて



バリバリの初心者マークの私が、自分でやったカスタマイズを記録として書いています。
にわかがニュアンスで書いたフワッフワした記事ですので参考程度にどうぞ!
そしてカスタマイズは自己責任でお願いいたします。
どうなるのか分からないので、バックアップやコピーはしっかり行って下さいね!

基本 ワードプレス

カーラーコード検索とRGB変換

更新日:

cssを使ったカスタマイズをしているとカラーコードをよく使うのですが、そのコードを調べるのが結構面倒なんですよね。
今までイラレやフォトショを開いて確認していたのですが、その手間もオサラバ!なサイトをご紹介。
カラーコードだけじゃなく、透過する際に使うRGBカラー、透過度合いまで分かるのでここさえブクマしてれば全てOK!

React Color

英語サイトなので、なんて書いてあるかは分かってません!
こちらのサイト本来の使い方は分かりませんが、今回の目的であるカラーコードや透過に必要なRGBカラーを調べるだけなら理想的なのは間違いなしです!

サイトの使い方、CSSを使ったカラー指定方法や、透過の仕方を説明しますので、気になる項目の目的よりどうぞ!

サイトの使い方

基本的に説明も必要ないくらいシンプルなサイトなのですが、一応説明していきます。
主に使う場所は下の画像の3か所で大丈夫です。

カラーコード

どこを使っても良いのですが、一番わかりやすいであろうColor Picker部分を使っていきます。
イラレ、フォトショではお馴染みの、Color Pickerだよ!

上の画像の赤枠(①)で囲ってある部分にカラーコードが表示されるようになっています。
分かっているカラーコードからRGBカラーを知りたい場合は、こちらにカラーコードを入力すれば赤枠で囲った部分の上にあるR、G、B、に表示されます。
逆にRGBカラーからカラーコードが知りたい場合はR、G、Bに入力すれば、下にカラーコードが表示されます。

また、今から色を探す場合はColor Pickerを使って好きな場所をクリックすれば表示されます。

色を選ぶのが面倒な場合は、下の方にある色一覧をクリックしてもカラーコード、RGBは表示されるのでそちらを使って下さい。

RGBカラー(透過)

RGBカラーからカラーコードが知りたい場合は上で説明したカラーコードで確認してください。
ここでは、透過度についての確認をしたいです。
R、G、BはRGBカラーの数値になっています。
最後のAの部分が透過率になります。
100が透過無しになり、0が完全透明になりますので、お好きな数値を入れるかバーで調整して下さい。
一応、小さいですが透過した色見は横に表示されています。

cssを使ったカスタマイズで透過をする場合は、このAの数値を使いますよー!

選んだ色の確認(サンプル)

こちらのサイト、色を選択するとサイト全体がその色になるのですが1つ注意です。
サイト上部の背景色も変わるのですが、こちらは選んだ色ではありません!
透過(55%くらい?)された色になりますので、選んだ色をしっかり確認したい場合は③の緑で囲った部分を見て下さい。
白文字フォントも置いてあり、色見が分かりやすいですよ。(黒字での確認ができないのが残念!)

REI
透過度を変えてもここの色は変わらないよ!

CSSでのカラー指定

htmlを使ったカラー指定はする機会があまりないと思うので、cssを使ったカラー指定方法を紹介です。
しかし初心者マークの私のザックリ説明なので、あしからずー!

書き方は主に3パターン!

・カラーコード
・rgb(透過をしたい場合はこれ)
・カラーの名前

で、名前についてはスルーします!気になる方は「カラーネーム、css」とかで出てくると思いますので検索どうぞ!

カラーコード(CSS)

とっても簡単で、#(ハッシュタグ)を使います。
#の後に6桁のカラーコードを入力するだけです!
(省略コードとかもあるけど、6桁使ってれば間違いないよ!)
実際に書くとこんな感じ

.sample {collar:#FFFFFF;}

RGB(透過CSS)

こちらも簡単で、()と,を使って区切ってあげるだけです。
rgbと書いて(Rの数値,Gの数値,Bの数値,透過率)といった並びになります。
R、G、Bの数値はそれぞれ1~3桁までありますが、1桁の場合でも「006」とかじゃなく「6」と書いて大丈夫です!
透過率は1が透過無し(この場合は書かなくてOK)、0が透明(表示されない)になります。
80%の色見(透過率20%)でって場合は0.8と書く感じですね。

透過無しで、RGBカラーで指定する場合はこんな感じ

.sample {collar:rgb(6,20,255);}

透過ありの場合

.sample {collar:rgb(6,20,255,0.8);}

まとめ

カラーについてはブラウザや環境などで表示されるカラーが若干違ってきます。
私は全然活用できていないのですが、気になる方はセーフカラーを使うと良いですよ!
「WebSafeカラー一覧」なんかですぐ出てきます。

カラー使いが下手な上にセーフカラーも意識してない私が言うのもアレですが、サイトの雰囲気はカラー使いで決まってくると思います!
サイト作りの際にはとても便利なサイトなので是非活用していただきたいです!







-基本, ワードプレス
-, ,

Copyright© 3ism+9ality , 2020 All Rights Reserved.