フッター(下部DIV要素)固定CSS

Last Updated:2019年11月23日| コメントを残す

CSSを使用して簡単に下部にDIV要素を固定することができます。

Sticky div bottom css

上の図では、 WordPressのfooter.phpファイルの一番下に div要素を中央下に配置した例を示しています。 そのためには、次のようなコードをheader.phpやfooter.phpファイルなどの適当な場所に追加します。 必ずチャイルドテーマを作成作業してください。

<div id="fixedfooter">
<div class="inner">Sticky Bottom DIV element</div>
</div>

そして次のようなCSSコードを追加します。

#fixedfooter {
position:fixed;
left:0px;
bottom:0px;
width: 100%;
text-align: center;
}
.inner {
background:#1E299D;
color: white;
width: 200px;
padding: 15px;
display: inline-block;
}

WordPressでテーマファイルを変更せずにテーマ関数ファイルにコードを追加したい場合は、次のようなコードをテーマ関数ファイルに追加することができます。 (この場合も、子テーマを作って作業してください。)

// HTML to wp_footer()에 추가
function child_theme_footer_script() { ?>
<!-- HTML 코드 추가하기 -->
<?php }
add_action( 'wp_footer', 'child_theme_footer_script' );

もしモバイル機器の下部に固定されたバナーを表示したい場合CSSメディアクエリ(media query)を使用して、モバイル機器でのみ表示されるようにして、PCで非表示にすることができます。 次の記事を参照してみてください:

WordPressでのCSSコードを追加したい場合 この記事を参考にして、ユーザーCSSコードを追加することができます。 (テーマファイル内のスタイルシートファイルを変更せずにチャイルドテーマを作成し、CSSを追加したり、 WordPress 伝言板で追加してください。)

参照


コメントを残す

コメント