賢威サイドバーの見出しに背景画像を設置する方法

賢威6.0のコーポレート版では、最初は比較的、地味でシンプルなデザインになっています。

今日はこの賢威のサイドバーの見出しを、背景画像を設置してカスタマイズする方法をご紹介します。ちなみに初期状態ではこんな感じですね。

初期状態のサイドバー

まずは見出し用の画像を用意する

まずは見出しに使う背景画像を用意していきましょう。今回は例なので「幅　280px」「高さ　55px」の四角形にグラデーションをつけて、１pxで外枠を作っただけの以下のようなシンプルなボックスを見出しにしていきます。

この画像はただGIMPで「幅280px」「高さ55px」で作った画像にグラデーションをかけてるだけなので、特に作り方は解説しません。詳しくはこちらの関連記事（賢威の見出し画像の作り方）あたりを参考にしてください。

賢威CSSをカスタマイズする

次に「外観―＞テーマ編集」より「design.css」を選択してください。すると以下のような記述があります。

 
ここを以下のように書き換えてください。なお、画像サイズを上記と全く同じ「幅280px」「高さ55px」で作っていれば、賢威6.0の２カラムであれば以下をそのままコピペして使えると思います。

もし細かい微調整が必要な場合は、Chromeのディベロッパーツールを使ってください。

 
するとこのようになります。

サイドバーのカスタマイズ完成

 
それほど派手さはありませんが、少しグラデーションをかけた画像を見出しの背景として使うだけでもちょっと高級感がでるのではないかと思います。それでは今回は以上です。