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

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

こんな感じです。

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

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

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

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

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

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

<!-- VFページ -->
<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>

<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の書き方をします。

<!-- VFページ -->
<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: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の色はこんな感じになります。アイコンそのままの色ではなくて、ちょっと薄めになるようですね。