Diviフッターを修正する方法

公開: 2017-07-11

今日のDiviチュートリアルでは、通常のフッターではなく、Webサイトの固定フッターを作成する方法を紹介します。前回の投稿では、最初は同じように見えるかもしれませんが、実際には固定するのとは異なる粘着性にする方法を紹介しました。あなたがそれを粘着性にすることを探していなかったが、代わりに修正したならば、この投稿はあなたを助けるでしょう。

あなたのウェブサイトに固定されているフッターを追加することはあなたがあなたのクライアントの1人から持っていた要求またはあなたがあなた自身のウェブサイトのために持っている必要性であるかもしれません。固定ヘッダーほど頻繁には使用されませんが、苦労していることの1つである可能性があります。 DiviWebサイトでフッターをスティッキーにする2つの方法を紹介します。 1つ目はいくつかのCSS行を使用し、2つ目はjQueryコードを使用します。どちらの方法でも、WebサイトのフッターのCSSスタイルシートが変更されます。

ここに、スクロールしたときに固定フッターがどのように見えるかの例があります。

固定フッターを使用する場合

あなたがあなたのウェブサイトに固定フッターを持ちたい理由はいくつかあります。それらの理由の1つは、フッターが保持する情報の関連性である可能性があります。たとえば、ソーシャルアイコンをフッターに配置したり、Webサイトにアクセスしている訪問者にソーシャルメディアチャネルを探索するように促したりすることができます。別の理由は、それがあなたのウェブサイトに与える効果と同じようにあなたが単に好きであるということかもしれません。

固定フッターを使用している場合は、訪問者のウィンドウの一部が常に占有されることに注意する必要があります。つまり、固定フッターがない場合に表示されるのと同じコンテンツを表示するには、さらにスクロールする必要があります。訪問者はできるだけ努力をしないことを好むので、それは挑戦です。

ただし、フッターがそれほど大きくない場合は、フッターで実行されるアクションの数が増える可能性があります。固定ヘッダー、プライマリメニュー、フッターを同時に使用することはお勧めしません。 3つすべてを修正することで、表示されるコンテンツが大幅に減少し、バウンス率が高くなる可能性があります。

固定フッターとスティッキーフッターの違い

始める前に、固定フッターとスティッキーフッターの違いについて説明します。

スティッキーフッターは通常、もう少し複雑です。ページにフッターを画面の下部にプッシュするのに十分なコンテンツがない場合は、固定フッターのように動作するように作成されています。ページが十分に長い場合、フッターは通常のフッターのように動作し、画面ではなくページの下部まで押し下げられます。

始めましょう

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

2つの方法で固定フッターをWebサイトに追加する方法を紹介することからすぐに始めます。 CSSコードとjQueryコードを介して。どちらの方法も機能しますが、それはすべて、必要なWebサイトにどちらを使用するかによって異なります。

CSSを介して固定フッターを追加する

固定フッターを作成する最初の最も簡単な方法は、いくつかのCSS行を追加することです。 Divi BuilderとWordPressを使用すると、これらの行をさまざまな場所に追加できます。それらを見てみましょう。

1ページのカスタムCSSを介してCSSコードを追加する

CSSコードを追加する最初の方法は、特に1つのページに追加することです。 Webサイトの各ページで固定フッターを同じにすることをお勧めします（Webサイトでその一貫性を保つため）が、特に1つのページに適用するように選択することもできます。

CSSコード行を追加するページを開き、DiviBuilderの次のボタンをクリックします。

下にスクロールして、次のコードを[カスタムCSS]フィールドに追加します。

#main-footer{
position: fixed;
bottom: 0;
width: 100%;
}

テーマカスタマイザーを介してCSSコードを追加する

コードを追加するもう1つの方法は、テーマカスタマイザーを使用することです。テーマカスタマイザーを使用すると、Webサイトで結果がリアルタイムで発生するのを確認できます。テーマカスタマイザーを介して追加したコードは、Webサイトのすべてのページに適用されます。

Webサイトのテーマオプティマイザーに移動>追加のCSS>次のCSSコード行を貼り付けます。

#main-footer{
position: fixed;
bottom: 0;
width: 100%;
}

テーマオプションを使用してCSSコードを追加する

CSSコードをWebサイトに追加する最後の方法は、テーマオプションを使用することです。テーマオプションの[カスタムCSS]フィールドにコードを追加すると、そのコードはWebサイト全体にも適用されます。これは、DiviWebサイト全体にカスタムCSSコードを追加するために最も頻繁に使用される方法です。

[Divi]> [テーマオプション]> [一般]>下にスクロールして、[カスタムCSS]フィールドに次のコードを追加します。

#main-footer{ 
position: fixed; 
bottom: 0; 
width: 100%; 
}

jQueryを介して固定フッターを追加する

もう1つの可能性は、いくつかのjQueryコード行を介してCSSを変更することです。固定フッターを使用している場合、通常は、それがWebサイトのすべてのページに適用されることを確認する必要があります。この種の一貫性により、訪問者は混乱することなくWebサイトを簡単にナビゲートできます。

特に1ページのコードモジュールを介してjQueryコードを追加する

固定フッターを適用するページを開き、ページの上部に新しい標準セクションを追加します。次に、全幅の行を選択し、それにコードモジュールを追加します。コードモジュールを開き、コンテンツボックスに次のjQueryコードを貼り付けます。

<script text="text/javascript">
jQuery(function($) {
$("#main-footer").css("position","fixed").css("bottom",0).css("width",'100%');
});
</script>

1つの特定のページのコードモジュールを介してjQueryコードを追加することにより、コードはそのページにのみ適用されます。 Webサイトの残りの部分には通常のフッターがありますが、コードモジュールを使用したWebサイトには固定フッターがあります。

テーマオプションを使用してjQueryコードを追加する

フッターを修正するjQueryコードを追加する最後のオプションは、テーマオプションを使用することです。コード行はすぐにWebサイト全体に適用され、Webサイトに必要な一貫性を提供します。

[Divi]> [テーマオプション]> [統合]に移動し、次のコード行をWebサイトの<head>に貼り付けます。

<script text="text/javascript">
jQuery(function($) {
$("#main-footer").css("position","fixed").css("bottom",0).css("width",'100%');
});
</script>

最終的な考え

以前の投稿の1つで、スティッキーフッターの作成方法を紹介しました。この投稿では、特にWebサイトの固定フッターを作成する方法を扱いました。固定フッターは、Webサイトにアクセスしている間、常に訪問者の画面の下部に表示されます。ご質問やご提案がございましたら、下のコメントセクションにコメントを残してください。連絡させていただきます。

大きなお知らせ、役立つヒント、Diviの景品を見逃さないように、必ずメールマガジンとYouTubeチャンネルを購読してください。

Zeeker2526 /shutterstock.comによる注目の画像