BizVektorのカスタマイズ

BizVektorではデザインスキンを何パターンか選べますが、グローバルメニューとヘッダー画像を入れ替えてみるとさらにデザインパターンが増えたような感じがしてワクワクするのは私だけでしょうか?

「グローバルメニューとヘッダー画像の入れ替え」と聞くとheader.phpの編集が必要に思えるかもしれませんが、ここでは、PHPを変更せずにCSSを使って実現する方法を紹介します。

仕上げるとヘッダー画像が上、その下にグローバルメニューが表示されます。

ヘッダー画像とグローバルメニューを入れ替えた例

ヘッダー画像とグローバルメニューを入れ替えた例

現在は次のように「サイト名(ロゴ画像)」「グローバルメニュー」「ヘッダー画像」の順に構成されています。

初期設定ではグローバルメニューの下にヘッダー画像

初期設定ではグローバルメニューの下にヘッダー画像

スポンサーリンク

ヘッダー画像を消す

まずは、「外観」-「ヘッダー」メニューで「画像を非表示」をクリックしてヘッダー画像を消します。

ヘッダー画像を消す

ヘッダー画像を消す

ロゴ画像を表示する

続いて、「外観」-「テーマオプション」メニューでヘッダー画像として使っていた画像をヘッダーロゴに設定します。

ヘッダーロゴを選択

ヘッダーロゴを選択

ヘッダー画像に使っていたものではなく、別の大きな画像でも大丈夫です。

サイトを確認すると小さいロゴ画像が表示されるはずです。

ロゴ画像が表示される

ロゴ画像が表示される

ロゴ画像のサイズを設定

初期設定ではロゴ画像の高さは最大で60pxに縮小されます。このロゴ画像を画面いっぱいに広げてヘッダー画像のように見せる作戦です。そのため、次のようなCSSを「外観」-「CSSカスタマイズ」メニューまたは子テーマのstyle.cssに入力します。

/* ★ロゴ画像の幅を画面いっぱいに */
#header #site-title a img {
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: 500px;
    margin-top: 0;
}

/* ★ヘッダー幅を画面いっぱいに */
#header #site-title,
#headerInner {
    width: 100%;
}

/* グローバルメニューの下線 */
#gMenu {
    border-bottom: 2px solid #C30000;
}

/* キャッチフレーズを消す */
#headerTop {
    display: none;
}

/* ヘッダー上の余白を消す */
#header {
    padding-top: 0;
}

/* ヘッダー内部の余白を消す */
#headerInner {
    margin: 0;
}

@media (min-width: 770px) {
    /* サイトタイトル下の余白を消す */
    #header #site-title {
        padding-bottom: 0px;
    }

    /* 連絡先の位置の調整 */
    #header {
        position: relative;
    }

    #header #headContact {
        width: auto;
        padding: 10px;
        background-color: #fef4f4;
        position: absolute;
        bottom: 5%;
        right: 2%;
    }
}

/* 連絡先の位置の微調整 */
#header #headContact {
    margin: 5px;
}

ヘッダー画像自体のスタイルは★が付いている最初の2ブロックだけです。それ以降は連絡先など関連パーツのスタイル調整です。

表示結果は次のようになります。

ヘッダー画像とグローバルメニューを入れ替えた例

ヘッダー画像とグローバルメニューを入れ替えた例

ふわっと仕上げです。たたき台として表示確認して、各自カスタマイズしてください。うまくいかない場合や細かい修正はWordPress個別サポートにご相談ください。
WordPressでお困りのときはご相談を
細かい質問からCSSやPHPのカスタマイズ、トラブル対応まで、この記事を書いた西沢直木が直接、WordPress個別サポートで対応します。
WordPress個別サポートの特徴
  • 最短で本日中に問題解決できます
  • 見積もり無料・料金は終了後の後払いです
  • 銀座教室・スカイプ・出張またはメールで対応します
カスタマイズがうまくいかないときは
お急ぎのときはWordPressメールサポートで対応します。ご活用ください。
こんなときはご相談ください(相談・見積もり無料)
  • サイトのデザインをカスタマイズしたい
  • CSS・PHPのカスタマイズがうまくいかない
  • 引っ越し(サーバー移転)したい
  • サイトをSSL対応(https://)したい
WordPress講座の問い合わせ先
WordPress講座申し込み
メールで問い合わせ

関連記事

スポンサーリンク