賢威８でヘッダーの色を変更したい！ロゴ画像と背景色の変更で対応。

ららです。

賢威８が出ましたね～。
さっそく使ってみましたよ～。

メインビジュアルという、ヘッダー部分の下に表示される画像は、
動画にできたりスライダーにできたり、色んな楽しみ方があるんですけど、
ヘッダー部分はシンプルが推奨のようで、メニューから色を変えることはできません。

メインビジュアルはTOP画面だけですからね、
各記事の上部に常に表示されるヘッダーもちょっとこだわりたいじゃないですか。

なので私は、こんな感じのシンプルなヘッダーを

こんなふうに画像ベースのピンクに変えてみました。

コレのやり方をご紹介します。
あなたも、素敵なヘッダーに変えてみてくださいね＾＾

ロゴ画像を設定する

まずは普通にロゴ画像を設定します。
私が使用した画像は、以前のブログでヘッダーとして使っていた、横1200px、タテ150pxほどのサイズのものです。

これを、賢威の設定のロゴ画像からアップロードします。

そうすると、こんなふうに縮小されて、ロゴ画像の位置に表示されます。
右側にはブログの説明文が表示されています。この説明文は消すこともできます。

カスタマイズの準備をする

外観⇒テーマの編集をクリックします。

この部分が「賢威8.0（子テーマ）」になっていると思うので、「賢威8.0」に変更してください。

base.cssをクリックします。そうすると、中央の画面にコードがズラッと表示されます。

そのコードをCtrl+Aで全選択してコピーして、メモ帳に貼り付けます。
（ここではTeraPadを使用しています）

これが親テーマのCSSになるんですが、
親テーマを直接編集せずに、該当箇所をコピーして、子テーマのCSSに書き加えていく形を取ります。

親テーマはもう必要ないので、先ほどの部分を、子テーマに戻してください。

子テーマのbase.cssを開きます。ここにコードを追加していくことになります。

以上でカスタマイズの準備は終了です。次からは実際にカスタマイズを行っていきます。

ヘッダー部分の色を変更する

まず、ヘッダー部分全体をピンクにする方法をご紹介します。

メモ帳を検索して、このような場所を見つけてください。

ここがヘッダー部分の背景色を指定している場所です。

ここ全体をコピーして、子テーマのbase.cssに貼り付けます。

最後の行以外は不要なので、

削除して1行にします。

そして、カラーコードの部分を変更したい色のカラーコードに変更します。
background-color: #E7C7DE; /*ヘッダーの背景色*/

更新して表示させてみると、ヘッダー部分が指定の色に変更されています＾＾

ちなみに、カラーコードがわからない！という場合には、こちらのフリーソフトが便利です。
私もヘビーに利用してます＾＾
＞＞パワースポイト

グローバルメニュー部分の色を変更する方法

次は、グローバルメニューの部分の色を変更します。
実際のメニューの部分を残して、周辺の部分だけが変わります。

メモ帳の中から、このような部分を検索してください。
赤で囲った部分が、該当の箇所になります。

ここをコピーして、子テーマのbase.cssに張り付けて、カラーコードを変更します。

これだけで、グローバルメニューの周辺の色が変更されます。

グローバルメニューの色を変更する方法

最後に、グローバルメニューのバックの色を変更して、文字の色も変更する方法をご紹介します。

まずは先ほど使用した箇所のちょっとした、この部分が該当コードになります。
コピーして子テーマのCSSに貼り付けてください。

カラーコードをお目当ての色のコードにしてくださいね。

これだけだとまだこんな状態です。
メニューの文字の色と、その下の白い部分の色を変えていきます。

親テーマのCSSから、このコードを検索してください。「keni-gnav_inner」で検索すればヒットします。

「color」の行だけ残してあとは削除して、カラーコードを変更します。ここでは文字を白にしたいので「#fff」にしています。

最後に、グローバルメニューの文字の下の白い線の色を変更します。
先ほどの行の下に、この1行を追加してください。赤い部分は好きなカラーコードに変えてください。
border-bottom: 3px solid #E7C7DE;

以上ですべての工程が終了しました。お疲れさまでした。