カラーピッカーで取得した色情報を透過させる方法
カラーピッカーでは、RGBを取得しますが、この情報には透過のパラメーターがありません。
透過させるにはRGBaを使います。
下記のコードで、6桁ある色情報を2桁ずつに区切り、10進数にして配列に格納します。（758はカラーピッカーのページID）
|
1 2 3 4 5 6 7 |
<?php $colorcode = str_replace("#", "", get_field("layer_color", 758 )); $layerColor["red"] = hexdec(substr($colorcode, 0, 2)); $layerColor["green"] = hexdec(substr($colorcode, 2, 2)); $layerColor["blue"] = hexdec(substr($colorcode, 4, 2)); ?> |
そして、使う時は下記のように記述します。（.6は、透過率60%の意味）
|
1 2 3 |
.layerColor { background-color: rgba(<?php echo $layerColor["red"]; ?>, <?php echo $layerColor["green"]; ?>, <?php echo $layerColor["blue"]; ?>, .6); } |
ある日、たまたま見ていたテンプレートでこの技が使ってあり、目からウロコでした。
こういう事が思いつく人はすごいなと、つくづく思います。
思いつくのは難しいけど、こういう事例を知って、自分が出来ることを増やしていきたいと思います。
公開日：2019年7月30日
最終更新日：2019年7月30日
