WordPress講座(個別相談)

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個別サポートにご相談ください。
この記事をSNSで共有する
WordPressでお困りのときはご相談を
この記事を書いた西沢直木が直接、WordPress個別サポートで対応します。
こんなときはご相談を
  • WordPressの使い方(ページやメニューの作り方を教えてほしい)
  • カスタマイズ(機能の追加やデザイン調整をお願いしたい)
  • トラブル対応(画面真っ白・「ログインできない」を解決したい)
マンツーマンなので相談内容は自由です。いただいた課題をその場で解決、CSSやPHPも目の前で修正します。気軽にご相談ください。
カスタマイズがうまくいかないときは
お急ぎのときはWordPressメールサポートで対応します。ご活用ください。
wordpress講座受講予約
WordPress講座の問い合わせ先

関連記事

スポンサーリンク