【WordPress】アイキャッチ画像から色を取得して背景色に設定する

背景画像をCSSでcoverや100％にしなかった時、画像サイズより表示範囲が大きいと下地がでてきてしまいます。

通常あまり問題にならないのですが、レスポンシブ対応などの可変でこのような状況に陥ることがあります。
 
画像がブッツリ切れている感じでどうにも気持ち悪く、自動で画像と背景色をなじませる方法をPHP初心者なりに考えたので、個人的にメモ。
もちろん透過PNG等でできるならそれが一番早く綺麗だと思います。ただ、大きな画像などで少しでも軽くしたい場合やはりJPEGなどを選びたいですよね。

今回は特にWordPressでアイキャッチ画像の色を取得して、それをCSSで背景画像を設定しつつ背景色にも色を流し込みました。

下準備

背景色は単色のため、両端は画が切れていないことが前提となります。

グラデを効かせたり切れないように配置したりした画像を用意します。

画像の色を取得する

functions.php：

imagecolorat($img, 1, 1);で左上1ｐｘの色をとります。

表示場所：

まとめ

10進数→16進数の変換の際に０埋めが必要らしく、base_convert だけだとちゃんと色が取れませんでした。

一応今の所不具合なく実現はしていますが・・・・もっと綺麗に書ける方法があったら調整します。

[参考]

• http://php.net/manual/ja/function.imagecolorat.php
• http://php.net/manual/ja/function.base-convert.php