ディビフッターを粘着性にする方法
公開: 2017-07-03このチュートリアルでは、DiviWebサイトのフッターをスティッキーにする方法を正確に説明します。 スティッキーフッターの使用は、クライアント向けのWebサイトを設計するときに受け取る要求のひとつ、または独自のWebサイトを作成するときに必要になる場合があります。 フッターを粘着性にする2つの可能性を紹介します。 最初の方法はCSSコードを使用し、2番目の方法はjQueryコードを使用します。 どちらの方法でも機能しますが、Webサイトにスティッキーな効果を作成するためにどちらを使用するかによって異なります。
スティッキーフッターをWebサイトに追加することは、現在、Diviビルダー内で自動的に実行できることではありません。 そのため、多くの労力をかけることなく、希望どおりの結果を得る方法を紹介します。 あなたがしなければならない唯一のことは、この投稿をステップバイステップで実行し、コードのいくつかの行をコピーして貼り付け、適切な場所に配置することです。
スティッキーフッターを使用する理由
スティッキーフッターは通常、1つの主な理由で使用されます。 Webサイトに1ページまたは複数のページがあり、画面全体に表示するのに十分なコンテンツがない場合。 もちろん、ページに十分なコンテンツがあることを確認することもできますが、それでもページに付加価値がもたらされない場合は、 それをする必要はありません。
これで、画面全体を埋めるのに十分なコンテンツがない場合、コンテンツが終了した直後にページにフローティングフッターが表示されます。 それは通常見栄えが良くなく、あなたが得たい結果ではありません。 幸いなことに、スティッキーフッターを使用してフローティングフッターを取り除くことができます。 スティッキーフッターは、不要なスペースを作成することなく、フッターがページの下部にとどまるようにします。 したがって、ページの長さは同じままであり、ウィンドウのサイズを調整するたびに、フッターは画面に合わせて変更されます。
ここに、スティッキーフッターのない短いページの画像があります。
スティッキーフッターが追加された後のそのページの同じ画像は次のとおりです。
スティッキーフッターと固定フッターの違い
誰もが自分のWebサイトでフッターを使用することを決定するわけではありませんが、使用する場合はそうです。 それをスタイリングする方法はたくさんあります。 それはすべてあなたのウェブサイトの構造がどのようであるか、そしてあなたが代わりにDiviビルダーで作られた「手動」で異なるスタイルのフッターを含めたいかどうかに依存します。
ただし、標準のフッターを使用している場合は、スタイルを設定する方法と、Webサイトに配置する方法を選択できます。 フッターがウェブサイト上で持つことができる3つの主な位置は、フローティング、固定、およびスティッキーです。
スティッキーフッターと固定フッターを互いに比較する場合。 一見同じように見えるかもしれませんが、そうではありません。 固定フッターは、Webサイトのページをスクロールするときに常に表示されますが、スティッキーフッターは、コンテンツが画面の下部に到達するのに十分な長さではないページを特に処理します。 コンテンツの長さが十分でない特定のケースでは、 固定フッターのように動作し、ページの下部に固定されたままになります。 その「固定フッター効果」を作成します。
ただし、コンテンツが十分に長い場合、スティッキーフッターは通常どおりに動作し、ページはフッターをページの下部に押し下げて、画面に継続的に表示されないようにします。 ほとんどの場合、この方法は、コンテンツを表示するためのウィンドウ上のスペースを増やすため、Webサイト全体で固定フッターを使用するよりも優先されます。
CSSを使用してDiviWebサイトにスティッキーフッターを作成する
それ以上の期限なしで、あなたのウェブサイトのための粘着性のあるフッターを作り始めましょう。 使用するコードは非常に単純ですが、作業は完了します。 コンテンツの長さが十分でない場合は、ページ上のフローティングフッターからフッターが下に押し下げられるページにすばやく移動します。
ページ設定を介してCSSコードを追加する（特に1ページの場合）
場合によっては、特定の1ページにのみフッターをスティッキーにしたいことがあります。 投稿のこの部分では、1ページのカスタムCSSフィールドにCSSコードを追加することによってそれを正確に行う方法を紹介します。 そうすることで、CSSコードがWebサイトのその1ページにのみ適用されるようになります。 これは、CSSコードは、誰かがその特定のページを開いたときにのみロードされることも意味します。 この方法は通常、スティッキーフッターを付けたいWebサイトの短いページが数ページしかない場合に使用されます。
スティッキーフッターをアクティブにするページを開くか、適用する新しいページを作成することから始めます。 次に、Divi Builderで次のアイコンをクリックして、ページ設定を開きます。
次に、開いたウィンドウの[カスタムCSS]フィールドに次のコードを追加します。
#main-footer {
position: absolute;
bottom: 0;
width: 100%;
}
ページをプレビューした瞬間から、CSSコードが適用され、フッターがスティッキーになります。
テーマカスタマイザーを介してCSSコードを追加する（リアルタイムビュー）
コードを追加するもう1つの方法は、テーマカスタマイザーを使用することです。 この方法でCSSコードを追加すると、Webサイト全体に自動的に適用されます。 すべてのページにこのCSSコードが適用されます。 テーマカスタマイザーを使用してコードを追加することで、Webサイトに変更が加えられたことを直接確認することもできます。
CSSコードをテーマカスタマイザーに追加するには、WordPressWebサイトのバックエンドにある[テーマカスタマイザー]をクリックします。 次に、ページを下にスクロールして、[追加のCSS]オプションを開きます。 これまでに使用したすべてのカスタムCSSコードが表示されます。 先に進み、次のコードを追加します。
#main-footer {
position: absolute;
bottom: 0;
width: 100%;
}
Diviテーマオプションを使用してCSSコードを追加する
最後になりましたが、Diviテーマオプションを使用してコードを追加することもできます。 これは、Webサイト全体にコードの恩恵を与えたいWebサイトにコードを追加するために最も頻繁に使用される方法です。
[Divi]> [テーマオプション]> [ページを下にスクロール]> [カスタムCSS]ボックスに次のCSSコードを追加します。
#main-footer {
position: absolute;
bottom: 0;
width: 100%;
}
JQueryを使用してDiviWebサイトにスティッキーフッターを作成する
コードモジュールを介してjQueryコードを追加する（特に1ページの場合）
Diviビルダー内のコードモジュールを使用して、jQueryコードを追加できます。 これも、短いコンテンツのページが多くない場合や、Webサイト全体のjQueryコードをロードしたくない場合に主に使用されます。
作業中のページに全幅行のセクションを追加します。
その全幅の行にコードモジュールを追加して続行し、次のコードをその行に貼り付けます。
<script text= "text/javascript">
jQuery(function($){
function stickyFooter(){
var footer = $("#main-footer");
var position = footer.position();
var height = $(window).height();
height = height - position.top;
height = height - footer.outerHeight();
if (height > 0) {
footer.css({'margin-top' : height+'px'});
}
}
stickyFooter();
$(window).resize(function(){
stickyFooter();
});
});
</script>
Diviテーマオプションを介してjQueryコードを追加する
jQueryコードを追加するもう1つの可能性は、Diviテーマオプションを使用することです。 Webサイト全体にjQueryコードを追加する場合、Diviテーマオプションにはそれを実行できる特定の場所が1つあります。 <頭＆gt; [統合]タブのフィールド。 これがまさに今コードを追加する場所です。
WordPressWebサイトを開きます> Diviに移動します>テーマオプションを開きます> [統合]タブに移動し、次のjQueryコードをWebサイトの<head>に追加します。
<script text= "text/javascript">
jQuery(function($){
function stickyFooter(){
var footer = $("#main-footer");
var position = footer.position();
var height = $(window).height();
height = height - position.top;
height = height - footer.outerHeight();
if (height > 0) {
footer.css({'margin-top' : height+'px'});
}
}
stickyFooter();
$(window).resize(function(){
stickyFooter();
});
});
</script>
最終的な考え
通常、コンテンツが多くないページがある場合は、スティッキーフッターを追加する必要があります。 ページ構造をより自然に感じるために、フローティングフッターを削除する必要があります。 私たちのブログセクションに今後の投稿についてコメントや提案がある場合; 連絡が取れるように、下のコメントセクションにコメントを残してください。
大きなお知らせ、役立つヒント、Diviの景品を見逃さないように、必ずメールマガジンとYouTubeチャンネルを購読してください。
Vintagio / shutterstock.comによる注目の画像