Diviの固定ヘッダーでロゴを切り替える

公開: 2017-08-31

さまざまな色やサイズのさまざまなバージョンのロゴを作成することは、常に素晴らしいアイデアです。 たとえば、さまざまな背景色で見栄えがするように、ロゴの暗いバージョンと明るいバージョンを用意する必要があります。 そして、あなたのウェブサイトのそれらの窮屈な領域のためにロゴのより小さな（より少ない垂直でより水平な）バージョンを持っています。 別のバージョンのロゴを使用するのに最適な場所の1つは、固定（またはスティッキー）ヘッダーです。

多くの場合、固定ヘッダーにはメインヘッダーとは異なるスタイルが必要になります。 同じロゴを保持すると、固定ヘッダーのスタイルを設定する方法が制限されます。 ここで、カスタムロゴを使用すると便利です。 固定ヘッダー用に特別にカスタマイズされた個別のロゴを使用して、好きなようにスタイルを設定できます。 これにより、サイトのデザインをより細かく制御できます。

この投稿では、次の方法を紹介します。

  1. 固定ヘッダーがアクティブになったら、ロゴを別のロゴに切り替えます。 （これはCSSの1行で実行できます）
  2. 固定ヘッダーのロゴの色を反転します。
  3. 固定ヘッダーのロゴを切り替えるときに、クールなトランジション効果を追加します。
  4. 中央に配置されたヘッダーロゴを、固定ヘッダーのデフォルト（左揃え）レイアウトに切り替えて移動します。

始めましょう。

スニークピーク

これは、このチュートリアルで達成することのちょっとした覗き見です。

シンプルなロゴスイッチは次のようになります。

固定ヘッダーロゴ

こちらがトランジション効果のあるロゴスイッチです。

固定ヘッダーロゴ

これは、中央のヘッダースタイルから位置を変更するロゴです。

固定ヘッダーロゴ

セットアップ

他のことをする前に、次のことを完了してください。

  1. Diviの最新バージョンをインストールします。
  2. アクティブなDivi子テーマを実装します。 子テーマの設定についてサポートが必要な場合は、この投稿で説明されています。 追加のヘルプが必要な場合。 サポートチームにお問い合わせください。
  3. 両方とも200×131の2つのバージョンのロゴを作成し、WordPressMediaライブラリに追加します。 1つのロゴはメインヘッダーに使用され、もう1つは固定ヘッダーに使用されます。 可能であれば、ロゴの固定ヘッダーバージョンをより水平にして、小さい固定ヘッダーで垂直に押しつぶされないようにします。これは、私が使用しているメインヘッダーロゴの例です。 固定ヘッダーロゴ これが私の固定ヘッダーロゴの例です。 高さの少ないヘッダーにうまく収まる、よりシンプルで水平方向のロゴを作成するために、テキストを切り抜いたことに注意してください。 とにかく誰もがそのテキストを読むことができる可能性は低く、ブランドはまだ表現されています。

    固定ヘッダーロゴ

  4. メニュー項目を使用してプライマリメニューを設定します。

これらの手順を完了すると、開始する準備が整います。

Diviの固定ヘッダーでロゴを切り替える

私たちのYoutubeチャンネルを購読する

CSSを使用して固定ヘッダーのロゴを切り替える

カスタムCSSに入る前に、テーマカスタマイザー内でメニュー設定をセットアップしましょう。 WordPressサイトのバックエンドから、[テーマカスタマイザー]> [ヘッダーとナビゲーション]> [ヘッダー形式]に移動し、デフォルトのヘッダースタイルが選択されていることを確認します。

固定ヘッダーロゴ

次に、テーマカスタマイザーのヘッダーとナビゲーションの設定に戻ります。 プライマリメニューバーを選択し、以下を更新します。

メニューの高さ：105
ロゴの最大高さ：80
テキストサイズ：20

固定ヘッダーロゴ

次に、ヘッダーとナビゲーションに戻ります。 [固定ナビゲーション設定]を選択して、以下を更新します。

固定メニューの高さ：60
テキストサイズ：20

固定ヘッダーロゴ

残りの設定は、サイトのデザインに合わせて追加できます。 メニューとロゴの高さは、必要に応じて調整する必要がある場合があります。 ただし、サイズが正確になるようにトランジションエフェクトを追加する場合は、これらの設定を保持することをお勧めします。 いつでも戻って後で変更できます。

CSSスニペットを挿入して固定ヘッダーのロゴを切り替えます

固定ヘッダーでロゴ画像を別の画像に切り替える最も簡単な方法の1つは、CSSプロパティ「content」を使用することです。 CSSに精通している場合、これは通常、：beforeまたは：after疑似要素にコンテンツを追加するときに使用されるものです。 この場合、これを使用して新しいコンテンツ（ロゴ画像）を挿入し、現在のロゴ画像を置き換えます。

これを行うには、[テーマカスタマイザー]> [追加のCSS]に移動し、次のCSSを挿入します。 

/*********************************
change logo for fixed header (quick and easy way)
**********************************/
.et-fixed-header #logo {
content: url(INSERT NEW LOGO IMAGE URL);
}

固定ヘッダーロゴ

次に、「INSERT NEWLOGOIMAGE」というテキストを実際のロゴ画像に置き換えます。

URLを取得するには、WordPressダッシュボードからメディアライブラリに移動し、追加する画像をクリックします。 ポップアップ表示される画面の右上にURLがあります。

固定ヘッダーロゴ

それでおしまい。 この単純なソリューションは、ページ全体をスクロールするときに固定ヘッダーがアクティブな場合にのみ、ロゴを新しいものに置き換えます。 ページの一番上にスクロールして戻ると、デフォルトのロゴが返されます。

固定ヘッダーロゴ

ロゴの色を反転する

固定ヘッダーに同じロゴの暗いバージョンまたは明るいバージョンを追加するだけの場合は、このソリューションがお勧めです。

Invert CSSプロパティを使用すると、数行のCSSでロゴの色を反転できます。 たとえば、ロゴが黒の場合、ロゴの色を反転すると白になります。 また、ロゴが白の場合は黒に反転します。 このスタイルをロゴに追加するには、[テーマカスタマイザー]> [追加のCSS]に移動し、次のCSSを追加します（以前に追加したCSSを削除またはコメントアウトしてください）。 

/*********************************
Invert Logo color on fixed header
*********************************/
.et-fixed-header #logo {
-webkit-filter: invert(100%);
filter: invert(100%);
}

結果を確認してください。 これは、白いバージョンに反転された黒いロゴです。

固定ヘッダーロゴ

固定ヘッダーでロゴを切り替えるときにトランジション効果を追加する

固定ヘッダーでロゴを切り替える別の（より堅牢な）方法について説明するのはなぜか疑問に思われるかもしれません。 主な理由は、ロゴが固定ヘッダーに「遷移」するときに、ロゴにクールな遷移効果を追加できるようにするためです。 これを行うには、スタイリングのために両方のロゴ画像を並べて表示する必要があります。

新しいロゴをHeader.phpファイルに追加する

ヘッダーに別のロゴ画像を追加するには、header.phpファイルに追加する必要があります。 FTPクライアント（FileZillaなど）を使用して、Diviテーマファイルのルートに移動し、header.phpファイルのコピーを作成します。

固定ヘッダーロゴ

header.phpファイルのコピーを子テーマフォルダーのルートに貼り付けます。

固定ヘッダーロゴ

次に、お好みのテキストエディタを使用して、header.phpファイルを開きます。 クラス「logo_container」でdivにラップされたロゴ画像を保持するリンクのhtmlコードを見つけます。 

<a href="<?php echo esc_url( home_url( '/' ) ); ?>">
<img src="<?php echo esc_attr( $logo ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name' ) ); ?>" id="logo" data-height-percentage="<?php echo esc_attr( et_get_option( 'logo_height', '54' ) ); ?>" />
</a>

ヘッダーに別の画像を表示するために、同様のコードスニペットを追加します。 次のコードをコピーして、そのすぐ下に貼り付けます。 

<a href="<?php echo esc_url( home_url( '/' ) ); ?>">
<img src="INSERT NEW LOGO IMAGE URL" alt="<?php echo esc_attr( get_bloginfo( 'name' ) ); ?>" id="logo" class="second-logo" data-height-percentage="<?php echo esc_attr( et_get_option( 'logo_height', '54' ) ); ?>" />
</a>

これは、その上の元のコードの更新されたコピーですが、2つの違いがあることに注意してください。 まず、追加する必要のある新しい画像ソースURLがあります。 そして第二に、それは「second-logo」と呼ばれるクラスです。

固定ヘッダーロゴ

WordPressダッシュボードから、メディアライブラリに移動し、追加する新しいロゴ画像のURLを取得します。

固定ヘッダーロゴ

次に、header.phpファイルに戻ります。 作成したコードスニペットを見つけて、「INSERT NEW LOGO IMAGEURLHERE」というテキストを実際の画像のURLに置き換えます。

固定ヘッダーロゴ

header.phpファイルを保存します。

これで、サイトに並べて表示される2つのロゴができました。 そのままにしておきたくない場合があるので、トランジション効果を出すために必要なカスタムCSSを追加しましょう。

固定ヘッダーでロゴが切り替わるときにクールなトランジションを追加する

[テーマカスタマイザー]> [追加のCSS]に移動し、この投稿の前のセクションからコードを削除（またはコメントアウト）します（該当する場合）。 次に、次のカスタムCSSを追加します。 

@media all and (min-width: 980px){
/*********************************
show, hide, and transition logos for primary and fixed nav;
must have second logo in header.php file for this to work
**********************************/
#logo {
opacity:1;
display:inherit;
margin: 0 0 0 0;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
#logo.second-logo {
opacity:0;
margin: 0 0 -200px -130px;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.et-fixed-header #logo {
opacity: 0;
margin: -200px 0px 0 0px;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;

}
.et-fixed-header #logo.second-logo {
opacity:1;
margin: 0 0 0 -90px !important;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}

/*********************************
hides overflow on header container so logo doesn't show outsite header on transition
*********************************/
#main-header {
overflow: hidden;
}
}

コードが何をしているのかを知らせるために、CSSコードにコメントしました。 つまり、CSSは、ヘッダーの外側にロゴを移動しながら、各ロゴの不透明度を増減させています。 したがって、固定ヘッダーに移動すると、ロゴにかなりクールなトランジション効果があります。

固定ヘッダーの中央に配置されたヘッダーロゴの位置を左側に変更する

ヘッダーを表示するための中央揃えヘッダースタイルが好きです。固定ヘッダー上のそのロゴの位置を確認することをお勧めします。 私の場合、固定ヘッダーにデフォルトのヘッダースタイル（ロゴを左揃え）にすることを好みます。 主な理由は、ナビゲーションの上部にロゴがあると、スクロールしてページを表示するときに固定ヘッダーが少し高すぎる傾向があるためです。

中央のロゴから左揃えのロゴに切り替えるには、テーマカスタマイザーの[追加のCSS]ボックスに次のカスタムCSSを追加します。 まず、コードを追加して、ロゴをすばやく簡単に切り替えます。 

/*********************************
change logo for fixed header (quick and easy way)
**********************************/
.et-fixed-header #logo {
content: url(INSERT NEW LOGO IMAGE URL HERE);
}

ロゴ画像のURLを追加することを忘れないでください。

次に、以下を追加してロゴの配置を調整します。 

@media all and (min-width: 980px){
/*********************************
change centered logo on centered header style to default layout when fixed header is active
*********************************/
.et_header_style_centered header#main-header.et-fixed-header .logo_container {
float: left;
width: 20%;
}

.et_header_style_centered #main-header.et-fixed-header div#et-top-navigation {
width: 80%;
float: right;
height: 70px;
line-height: 70px;
text-align: right;
}
.et-fixed-header #top-menu-nav {
float: none!important;
}

.et_fixed_nav #et-top-navigation {
-webkit-transition: none !important;
-moz-transition: none !important;
transition: none !important;
}
}

注：競合する可能性のある以前のCSSをこの投稿から必ず削除してください。

それでおしまい。 結果を確認してください。

固定ヘッダーロゴ

最後に

良いロゴを誇りに思うことは難しいです。 したがって、不適格な小さなバージョンに甘んじたり、さらに悪いことに、固定ヘッダーにロゴを非表示にしたりしないでください。 クライアントが喜ぶスムーズな移行を備えたカスタムバージョンに切り替えます。

来る

デフォルトでは、Diviにはモバイルの固定ヘッダーは含まれていません。 しかし、1つ追加するのは本当に簡単です。 次の投稿では、モバイルで異なるロゴのカスタム固定ヘッダーを追加する方法を紹介します。 ここに少しこっそり覗き見があります。

私はそれを楽しみにしています。

以下にコメントを投稿することを忘れないでください。 子テーマファイルの設定と編集に関連する問題がある場合は、サポートチームにお問い合わせください。

乾杯。