Diviでフッターリビールを作成する方法

公開: 2017-07-28

今日のDiviチュートリアルでは、自分のWebサイトやクライアントのWebサイトに統合することを考えたことのない特定の効果を実現する方法を紹介します。より正確に; フッターリビールを作成する方法を紹介します。フッターリビールは基本的に、ページの最後に到達するまで待機し、スクロールの仕方に応じてフッターをリビールします。ページ全体をスクロールすると、フッターが元の形式で表示されます。

あなたのウェブサイトにフッターリビールを追加することはあなたがあなたのウェブサイトのフッターに与えようとしていたその余分な小さなタッチをもたらすことができます。また、Webサイトの任意のページをスクロールしたときに最後に表示されるものでもあります。フッターが明らかにすることの正確な意味を示すために、最終結果を見てみましょう。

フッターリビール

フッターを公開するだけでなく、ウェブサイトのメインコンテンツに微妙な影を追加したことがわかります。そうすることで、メインコンテンツとフッターの間にある種の視点を作成しました。

Diviでフッターリビールを作成する方法

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

必要なCSSコードを追加する

フッターの公開結果を得るには、まず、CSSコードを数行必要とします。 CSSコードをDiviWebサイトに追加するにはさまざまな方法があるため、3つすべてを紹介します。まず、テーマオプションにコードを追加する方法を説明します。次に、テーマカスタマイザーを使用してコードを追加します。 2つの方法のいずれかでコードを追加することにより、フッターの公開はWebサイト全体にすぐに適用されます。一方、特に1つのページにコードを適用したい場合は、それを行うこともできます。作業中のページにコードを追加する方法を示すことで、1つのページだけにその効果を作成できます。

コードで必要となる2つの主なものは、メインコンテンツのz-indexとマージンボトムです。フッターが完全にフィットすることを確認するには、フッターの高さを知る必要があります。通常、使用されているフッターの値は53pxです。ただし、必要に応じて高さを変更した可能性があります。フッターリビールを標準で追加する方法を示した後、フッターの高さに合わせる方法も示します。

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

CSSコードを追加する最初の方法は、Diviテーマオプションを使用することです。これは、WebサイトにCSSコードを追加するために最も頻繁に使用される方法です。この領域にCSSコードを追加すると、すぐにWebサイト全体に適用できるようになります。

コードを追加するには、 WordPressダッシュボード> Divi>テーマオプション>に移動し、タブの下部にある[カスタムCSS]フィールドにCSSコードの次の行をコピーして貼り付けます。

#main-content {
margin-bottom: 53px;
z-index: 2;
}
#main-footer {
width: 100%;
position: fixed;
left: 0;
bottom: 0;
z-index: -1;
}

コードを追加したら、Webサイトにアクセスして、フッターがその役割を果たしていることを確認します。

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

CSSコードをDiviWebサイトに追加する別の方法は、テーマカスタマイザーを使用することです。テーマカスタマイザーまたはテーマオプションを使用してコードを追加することは同じです。テーマオプション内のコードを削除すると、テーマカスタマイザーでも削除されます。その逆も同様です。テーマカスタマイザーを使用してコードを追加する利点の1つは、すべてがリアルタイムで発生することを確認できることです。したがって、コードに追加の調整を加えると、得られる最終結果をすぐに明確に把握できます。

テーマカスタマイザーにコードを追加するには、 WordPressダッシュボード>外観>カスタマイズ>「追加のCSS」までスクロールダウンし、CSSコードの次の行を追加します。

#main-content {
margin-bottom: 53px;
z-index: 2;
}
#main-footer {
width: 100%;
position: fixed;
left: 0;
bottom: 0;
z-index: -1;
}

必要なCSSコードを1ページにのみ追加する

フッターを追加してCSSコード行を表示する最後の方法は、特に1ページに追加することです。これは、たとえば、相互作用の少ないコンテンツを含むページに付加価値を与えたい場合に役立ちます。フッターリビールを追加することで、ページをもう少しインタラクティブにし、ソーシャルメディアアイコンなど、フッターで提供されているコンテンツに焦点を当てることができます。

特に1つのページにCSSコードを追加するには、その特定のページを開きます。そのページのDiviBuilderの右上隅に、次のアイコンが表示されます。

アイコンをクリックして、次のコード行を[カスタムCSS]フィールドに貼り付けます。

#main-content { 
margin-bottom: 53px;
z-index: 2;
} 
#main-footer { 
width: 100%; 
position: fixed; 
left: 0; 
bottom: 0; 
z-index: -1; 
}

設定を保存すると、特にそのページにフッターリビールが表示されます。

フッターの高さを変更する

さて、上で説明した方法は、提供されている標準のフッターのみにカウントされます。別の高さを処理すると、コードは適切に機能しなくなります。これを考慮して、他の高さでもフッターを表示する方法を説明します。

いつでも、フッターに割り当てる高さを選択できます。メインフッターとフッター下部の2つのCSSIDの高さを設定する必要があります。これらの2つの場所で高さを調整することにより、フッターは所定の位置に収まります。もちろん、それが終わったら、メインコンテンツの余白の下部も変更する必要があります。たとえば、高さが60pxのフッターが必要な場合は、次のコード行が必要になります。

#main-content {
margin-bottom: 60px;
z-index: 2;
}
#main-footer {
height: 60px;
width: 100%;
position: fixed;
left: 0;
bottom: 0;
z-index: -1;
}
#footer-bottom {
height: 60px;
}

「60px」の値が必要な場所が3つあることがわかります。フッターに割り当てたい別の高さの値がある場合は、3か所すべてで変更してください。メインコンテンツ、メインフッターとフッターボトム。

CSSボックスシャドウを追加する

あなたのウェブサイトにその少しの視点と相互作用を追加するためにあなたがすることができるもう一つのことは、メインコンテンツにいくつかのボックスシャドウを追加することです。フッターは、メインコンテンツの下にあることをすでに示しています。ボックスシャドウを追加したら、それを強調します。影を付けることで、メインコンテンツとフッターの間の高さの幻想的な距離が大きく見えます。

フッターリビールにボックスシャドウを追加するには、次のコード行を使用します。

#main-content {
margin-bottom: 60px;
z-index: 2;
-webkit-box-shadow: 1px 1px 10px 1px black;
-moz-box-shadow: 1px 1px 10px 1px black;
box-shadow: 1px 1px 10px 1px black;
}
#main-footer {
height: 60px;
width: 100%;
position: fixed;
left: 0;
bottom: 0;
z-index: -1;
}
#footer-bottom {
height: 60px;
}

それでおしまい！これで、フッターの公開が正常に機能するはずです。

最終的な考え

今日の投稿では、Webサイトにフッターリビール効果を作成する方法を紹介しました。提供されているカスタムCSSコードを使用して効果を作成し、フッターの高さに合うようにしてください。その追加の視点を与えたい場合は、上記の手順に示すように、メインコンテンツにボックスシャドウを追加することをお勧めします。質問や提案がある場合; 下のコメントセクションにコメントを残してください！

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

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