はじめに
コードを直接記入してバナーを（上下に）固定する方法をまとめました！
私は、HTML・CSS・WordPress初心者なので日々試行錯誤しながらLPの作成をしています！
そんな初心者な私でもプラグインなしで簡単にバナーの固定ができました！
プラグインなしのメリットは、
- 自分の希望にあったプラグインやプラグインの使用方法などを調べる手間が省ける
- テーマやバージョンとの互換性を気にしなくてOK
- 課金しなくてもできる
ことなんじゃないかな〜と思っています！
この記事の対象者
- 初心者でもWordPressを使いたい人
- ページごとに表示するバナーを変えたい人
- スクロールしてもバナーを固定したい人
コード例
下記コードでバナーを固定することができます！
URLやstyleは自分好みに設定してください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fixed Banner</title>
<style>
/* ヘッダーバナーのスタイル */
#header-banner {
position: fixed; /* 固定表示 */
top: 0; /* 画面上部に固定 */
left: 0; /* 左端に固定 */
width: 100%; /* 横幅を画面いっぱいにする */
background-color: ＃rgba(0, 0, 0, 0); /* 背景# */
color: white; /* テキストカラー */
text-align: center; /* テキストを中央に配置 */
padding:0; /* 上下のパディング */
z-index: 1000; /* 他のコンテンツよりも上に表示 */
}
/* コンテンツがヘッダーバナーに重ならないようにするためのスタイル */
body {
padding-top: 60px; /* ヘッダーバナーの高さ分だけ余白を作る */
}
/* バナーのスタイル */
#fixed-banner {
position: fixed; /* 固定表示 */
bottom: 0; /* 画面下部に固定 */
left: 0; /* 左端に固定 */
width: 100%; /* 横幅を画面いっぱいにする */
background-color: #rgba(0, 0, 0, 0); /* 背景色 */
color: white; /* テキストカラー */
text-align: center; /* テキストを中央に配置 */
padding: 0; /* 上下のパディング */
z-index: 1000; /* 他のコンテンツよりも上に表示 */
}
</style>
</head>
<body>
<!-- headerバナーのHTML -->
<div id="header-banner">
<a href="https://バナーからの遷移先URL"><img src="http://header_beaner.png" alt="Banner Image" /></a>
</div>
<!-- footerバナーのHTML -->
<div id="fixed-banner">
<a href="https://バナーからの遷移先URL"><img src="http://footer_banner.png" alt="Banner Image" /></a>
</div>
</body>
</html>
トップページで固定
トップページに固定する場合は、
WordPress内「テーマオプション」→「トップページ」の「フリースペース」にテキストで記入すると反映されます。
固定ページに固定
固定ページに固定する場合は、
WordPress内「固定ページ」→該当ページの「編集」→ページ内に「ブロックを追加」→「カスタムHTML」に入力すると反映されます。
※プレビュー表示はされませんが、「保存」すると確認できます。
おわりに
ページごとにバナーを変えるプラグインは有料のものが多いですが、この方法だと無料で簡単にできるのでとてもおすすめです！
また、初心者でもカスタムしやすく、わかりやすいコードなので編集がしやすいかと思います。
少しでも参考になると嬉しいです！