2022(令和4)年4月13日テーマカスタマイズ【景品表示法に基づく表記】ページ内のコンテンツには、商品プロモーションが含まれていますサイトを作っていて、例えば、固定式のヘッダーなど何かの要素を表示しつつ、うっすらと重なった部分が見えるようにしたいというケースはありませんか?要素全体を透過させるなら、opacyやtransparencyなどで指定すれば簡単!ですが、これだと、全部が透過されて、その中にある文字なども透明化されるのでちょっと具合悪いですね。確実な方法として紹介されているのが、RGB(A)を使った方法。HEXの代わりに使えば、確実かつ簡単に背景色のみを透過させることができます(これについてはいろいろなところで紹介されているので割愛します)。確実ならそれを使えばいいんじゃない?ではあるのですが、私が困ったのはこれをWordPressのカスタマイザー上で指定させるにはどうする?というケースです。WordPress標準のカラーピッカーはすべてHEX値で保存されるので、RGB(A)として扱うには以下のような措置が必要なんです。通常のカラーピッカーに透過度を追加するHEX値で保存されているデータをRGB(A)へ変換して出力するまず1の方法ですが、通常のカラーピッカーコントロールにアルファ(透過)要素を追加する方法がGitHubなどでいくつか紹介されてはいるものの、実際に実装してみるとエラー続発でなかなかうまくいきません(私の能力の問題なのかも..)。続いて2の方法では、計算式によってHEXをRGB(A)には変換できるものの、透過度を示す最後の値については指定して出力するか、何等かの方法で値を与えて統合するしかないんです。調べると全ての色について正確に変換できない場合があるようで、確実性がないことからちょっと使いにくいです。そこで見つけたのが、本当に単純な方法。それは、通常の6桁のHEX値に透過度を示す2桁を追加するだけというシンプルなものです。黒色を示す「#000000」の後ろに「80」を付けて、「#00000080」とするだけで、50%透過させることができるんです。実は、【HABONE】テーマに固定ヘッダー機能を追加していて、できれば色や透明度を自由にできるようにしたいなぁ、と思いつつどうしてもうまくいかない中、発見した方法、まさかこんなに単純だったとは..。Explorer(全バージョン)では使えませんのでご注意を!ただ、この透過度の2桁は特に法則性がなく、覚えるのは難しいようですので、以下を参考に設定するとよいでしょう。Tenテーマがデフォルトになる前と結構な期間お世話になっています。興味に応じて、いろいろなサイト作っては壊しを繰り返しながら、独自テーマの作成やプラグインの作成などを行っています。Utility】プラグインの紹介などをしています。(PWCN)WordPressで実際に行ったカスタマイズの記録、発生したトラブルに対処した時のメモ、ブロックテーマのカスタマイズなどこのスライドメニューは以下のページの方法を使って実装しています。以下のページでタブ切り替え式のコンテンツの作り方を公開しました。Utility】プラグインをバージョン5.1へ更新しました。Monitorプラグインからの離脱方法メモ(ちょっと大変かも..)。