See the Pen
Untitled by チータツ (@cheese_fuji)
on CodePen.
画面上部ににょきっと登場する追従バナー。
Googleアドセンスでいうところの「アンカー広告」に当たります。
アフィリエイトの横長バナーを貼るのも良いのですが、セール情報やおすすめ商品のバナーを自作して貼っておくと結構売れるのでおすすめです。
CSSの解説
コードを見る
余計な装飾を省いています。
HTML
<input type="checkbox" id="slide"> <!-- チェックボックス -->
<div class= "float-banner">
<!---- ここに横長の画像バナーを入れる ---->
<div>
<a href="" target="_blank" rel="noopener sponsored">
<img src="">
</a>
</div>
<!---- ここまでバナー ---->
<label for="slide" class="slide-btn"></label> <!-- スライドボタン -->
</div>
CSS
/******************************
登場時のアニメーション
******************************/
@keyframes slide-in{
0%{
top: -600px; /*画面外*/
visibility: hidden;
}
100%{
top: 0; /*画面上部*/
visibility: visible;
}
}
/******************************
追従バナー
******************************/
.float-banner{
display: inline-block; /*中身の高さで変動*/
position: fixed;
top: 0;
left: 0;
width: 100%; /*画面幅*/
background: #fafafa;
text-align: center;
animation: slide-in 3s ease forwards;/*登場*/
animation-delay: 0s; /*登場の遅延時間*/
transition: 1s ease-in-out; /*スライド時の動き*/
}
/* バナー下の枠線 */
.float-banner:after{
content: "";
position: absolute;
top: 100%;
left: 70px; /*ボタン分の幅を左に確保*/
width: calc(100% - 70px);
height: 5px;
background: #fafafa;
box-shadow: 0px 2px 4px -1px rgba(0,0,0,20%), 0px -1px 2px -1px rgba(0,0,0,15%);
}
/* スライドボタンをクリック */
#slide:checked ~ .float-banner{
transform: translateY(-100%); /*画面外(上)へ*/
}
/**************************************
表示・非表示を切り替えるスライドボタン
***************************************/
.slide-btn{
position: absolute;
top: calc(100% + 5px); /*枠線分を空ける*/
left: 0;
width: 70px;
height: 25px;
border-radius: 0 0 6px 0; /*右下だけ丸く*/
background: #fafafa;
box-shadow: 1px 2px 3px rgba(0,0,0,25%);
}
/* スライドボタンの文字 */
.slide-btn:before{
content: "^";
position: absolute;
top: 65%; /*上寄りの文字なので少し調整*/
left: 50%;
transform: translate(-50%,-50%);
font-size: 16px;
font-weight: bold; /*太字*/
color: #666;
}
/* スライドボタン上の枠線部分 */
.slide-btn:after{
content: "";
position: absolute;
top: -5px;
left: 0;
width: 70px;
height: 5px;
background: #fafafa;
box-shadow: 0px -1px 2px -1px rgba(0,0,0,15%);
}
/* クリックで矢印を反転 */
#slide:checked ~ .float-banner .slide-btn:before{
top: 35%; /*下寄りの文字なので少し調整*/
transform: translate(-50%,-50%) rotate(180deg);
}
/**** チェックボックス ****/
#slide{
display: none; /*非表示*/
}
/**** 自作バナー用 ****/
.float-banner img{
vertical-align: bottom; /*画像下の余白削除*/
}
/**** スマホ対策 ****/
@media only screen and (max-width: 599.9px) {
.float-banner img{
max-width: 360px;
height: auto;
}
}
/**** タブレット対策 ****/
@media only screen and (min-width: 600px) and (max-width: 959px) {
.float-banner img{
max-width: 800px;
height: auto;
}
}
画面の追従はposition: fixedを使った固定表示。
クリックの感知にはチェックボックス（input要素）を使用。
チェックボックスのチェックの有無に応じて、transform: translateY()で 画面外↔画面上部 を変更しています。
- 登場時のスライドインアニメーション
- @keyframesを使用してアニメーションを作成
- 0%時点でtop: -600pxの画面外
- 100%でtop:0 の画面内（画面上部）へ
- クリック感知のためのチェックボックスを設置 input type="checkbox"
- 追従バナー全体 .float-banner
- display: inline-blockでインラインブロック要素に（高さ可変式にするため）
- position: fixedで画面に固定して表示
- width: 100%で長さは画面幅に
- animationで登場時のアニメーションを指定
（登場を遅らせたい場合はanimation-delayを変更する） - transition: 1s ease-in-outで表示・非表示切り替えの早さ・動き方を指定
- 表示・非表示を切り替えるためのスライドボタン .slide-btn
- チェックボックスと連動させる label 属性で作成
（for ="" を使ってチェックボックスと同じ id を指定する）
- position: absoluteを使ってバナーの左下に配置
- 文字 "^" は疑似要素:beforeを使って設置
- スライドボタンをクリックするとチェックボックスに✔が入る
- 疑似要素 :checked を使用して条件分岐
- バナーをtransform: translateY(-100%)で画面外まで上に移動
- スライドボタンをtransform: rotate(180deg)で反転（下矢印にする）
チェックボックスとのバナーの関係を分かりやすくするため、チェックボックスを表示させたものが以下のサンプルです。
See the Pen
Untitled by チータツ (@cheese_fuji)
on CodePen.
なお、自作バナー（画像）を使用する場合は 700×80 ぐらいが綺麗に映える大きさだと思います。
※スマホ表示の場合は画像の横幅が最大360px、タブレット表示の場合は最大800pxまでに縮小されます。
応用CSS
画面下に追従するバナー広告
固定表示する位置を画面下に変更したもの。
ヘッダーを固定している場合はこちらの使用をオススメします。
See the Pen
Untitled by チータツ (@cheese_fuji)
on CodePen.
コードを見る
HTMLは画面上verと同じです。
CSS
/******************************
登場時のアニメーション
******************************/
@keyframes slide-in{
0%{
bottom: -600px; /*画面外*/
visibility: hidden;
}
100%{
bottom: 0; /*画面下部*/
visibility: visible;
}
}
/******************************
追従バナー
******************************/
.float-banner{
display: inline-block; /*中身の高さで変動*/
position: fixed;
bottom: 0;
left: 0;
width: 100%; /*画面幅*/
background: #fafafa;
text-align: center;
animation: slide-in 3s ease forwards;/*登場*/
animation-delay: 0s; /*登場の遅延時間*/
transition: 1s ease-in-out; /*スライド時の動き*/
}
/* バナー下の枠線 */
.float-banner:after{
content: "";
position: absolute;
bottom: 100%;
left: 70px; /*ボタン分の幅を左に確保*/
width: calc(100% - 70px);
height: 5px;
background: #fafafa;
box-shadow: 0px -2px 4px -1px rgba(0,0,0,20%), 0px 1px 2px -1px rgba(0,0,0,15%);
}
/* スライドボタンをクリック */
#slide:checked ~ .float-banner{
transform: translateY(100%); /*画面外(下)へ*/
}
/**************************************
表示・非表示を切り替えるスライドボタン
***************************************/
.slide-btn{
position: absolute;
bottom: calc(100% + 5px); /*枠線分を空ける*/
left: 0;
width: 70px;
height: 25px;
border-radius: 0 6px 0 0; /*右上だけ丸く*/
background: #fafafa;
box-shadow: 1px -2px 3px rgba(0,0,0,25%);
}
/* スライドボタンの文字 */
.slide-btn:before{
content: "^";
position: absolute;
top: 35%; /*下寄りの文字なので少し調整*/
left: 50%;
transform: translate(-50%,-50%) rotate(180deg);
font-size: 16px;
font-weight: bold; /*太字*/
color: #666;
}
/* スライドボタン上の枠線部分 */
.slide-btn:after{
content: "";
position: absolute;
bottom: -5px;
left: 0;
width: 70px;
height: 5px;
background: #fafafa;
box-shadow: 0px 1px 2px -1px rgba(0,0,0,15%);;
}
/* クリックで矢印を反転 */
#slide:checked ~ .float-banner .slide-btn:before{
top: 65%; /*上寄りの文字なので少し調整*/
transform: translate(-50%,-50%);
}
/**** チェックボックス ****/
#slide{
display: none; /*非表示*/
}
/**** 自作バナー用 ****/
.float-banner img{
vertical-align: bottom; /*画像下の余白削除*/
}
/**** スマホ対策 ****/
@media only screen and (max-width: 599.9px) {
.float-banner img{
max-width: 360px;
height: auto;
}
}
/**** タブレット対策 ****/
@media only screen and (min-width: 600px) and (max-width: 959px) {
.float-banner img{
max-width: 800px;
height: auto;
}
}
