【Visualforce】apex:pageBlockの色をとりあえず簡単に変える。

Salesforce

Visualforceページでapex:pageBlockタグを使うと、それなりの見た目の画面が楽に作れるので良いですよね。よく使います。

こんな感じです。

apex:pageBlockを使ったVisualforceページ

ただセクション区切りの色が黒になるので、全体的に重たいイメージになってしまう・・組織のテーマカラーがあるならできるだけ雰囲気を合わせたいんだけど、そんなモノなのかな、と思っていました。

とそんな時、コントローラ拡張を使用したら色が変わることが分かりました。あれ?

拡張コントローラを使ったVisualforceページ

これは、オブジェクトのカスタムタブを作る時に選んだアイコンの色になっているとのこと。

カスタムタブ

タブを作る時のアイコンって何のために選んでるのかな~と思っていましたが、やっと理由が分かりました(これだけじゃないですが・・)。タブのアイコンを変えれば、apex:pageBlockの色もそれっぽい色に変ります。

これがどうも、通常のコントローラでもできるらしいです。
apex:pageBlockタグの属性にtabStyleというものがあり、ここにオブジェクトを指定してあげるとカスタムタブのアイコン色になるとのこと。
Visualforce 開発者ガイド apex:pageBlock

下記は通常のコントローラを使ったVisualforceページのソースですが、tabStyle属性にオブジェクトを指定したら色が変わりました。

RGB指定じゃないとダメとかだと使えませんが、アイコンはたくさんあるので、それっぽい色にして見た目をよくしたい程度のことであればこれで手軽に済ませられます。というか済ませたい。

ちなみにtabStyleにVisualforceタブを指定したい場合は、タブ名__tabの書き方をします。

こんな感じの色のアイコンだと

Visualforceタブ

apex:PageBlockの色はこんな感じになります。アイコンそのままの色ではなくて、ちょっと薄めになるようですね。

apex:pageBlockを使ったVisualforceページ

コメント

タイトルとURLをコピーしました