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

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

こんな感じ。

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

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

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

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

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

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

<apex:page controller="SampleController">
    <apex:pageBlock title="サンプル" tabStyle="Sample__c">
    	<apex:pageBlockSection title="サンプル情報">
            <apex:outputText label="サンプル件数" value="{!listCnt}"/>
        </apex:pageBlockSection>
        <apex:pageBlockSection title="サンプル一覧">
            <apex:pageBlockTable var="list" value="{!sampleList}">
                <apex:column value="{!list.Id}"/>
                <apex:column value="{!list.Name}"/>
            </apex:pageBlockTable>
        </apex:pageBlockSection>
    </apex:pageBlock>
</apex:page>

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

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

<apex:page controller="SampleController">
    <apex:pageBlock title="サンプル" tabStyle="Sample__tab">
    	<apex:pageBlockSection title="サンプル情報">
            <apex:outputText label="サンプル件数" value="{!listCnt}"/>
        </apex:pageBlockSection>
        <apex:pageBlockSection title="サンプル一覧">
            <apex:pageBlockTable var="list" value="{!sampleList}">
                <apex:column value="{!list.Id}"/>
                <apex:column value="{!list.Name}"/>
            </apex:pageBlockTable>
        </apex:pageBlockSection>
    </apex:pageBlock>
</apex:page>

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

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