コピペでできる左右に固定表示されるバナーとソーシャルブロック

12分

固定されるバナーのイラスト

SHARE

WEBサイトを見ていると、記事投稿者のソーシャルアカウントへのリンクや、広告が固定で表示されるサイトを見かけます。

固定表示される為、ユーザーの可読性を阻害するリスクがありますが必ずと言っていいほど目に入るので、見せたい内容がある場合導線や可読性を担保しながら設置するのも一つの方法です。

今回は、コピペでできる左右に固定表示されるバナーとソーシャルブロックについてご紹介します。

右側の固定バナーブロックサンプル

このページをPCで見た時に、右下に固定で表示されるバナーを置くのに良さそうなブロックです。

サンプルではmp4の動画を背景に置き、その上にテキストとロゴを置いてリンク要素にして、「閉じる(バッテン)」のボタンを押すと非表示になります。

右側のバナーエリア

コードを書く時の注意点

このブロックは、jQueryを使用しています。

jQueryが既に<head>〜</head> の中で読み込まれていれば問題ありませんが、ない場合は以下のMEMOを見てjQueryもHTMLファイルに書き込みましょう。

MEMO
当サイトでは以下のjQueryを使用しています。
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js'></script>
上記のような記述が、htmlファイルの
<head></head>
の中に無い場合その中へ貼り付けましょう。

バナーブロックのコード一式

jQueryのコードは、<body>〜</body> の中のクロージングタグ </body>の直前に記述するようにしましょう。

コードを表示する

HTML 

    　<div class="target">
		 <div id="flyin" class="stopanimate">
				 <a href="#">
				 <video id="top_movie" poster="https://dubdesign.net/wp-content/uploads/2021/01/bgposter.jpg" width="100%" autoplay loop muted>
        <source src="https://dubdesign.net/wp-content/uploads/2021/01/AdobeStock_291460901-1.mov" type="video/mp4">
				 </video>
					<div class="videocover">
					 <p>デザイナーのライフハックメディア</p>
					 <img src="https://dubdesign.net/wp-content/uploads/2020/04/dub_logo_new-4.svg">
					</div>
				 </a>
			 <button class="flyinclose button"></button>
		 </div>
	</div>

CSS 

/* 右側の追従バナーエリア */
#flyin {
z-index:100;
border-radius:10px 0 0;
-moz-border-radius:10px 0 0;
-webkit-border-radius:10px 0 0;
width: 360px;
position:fixed;
bottom:20px;
right:30px;
-webkit-backface-visibility:visible!important;
-ms-backface-visibility:visible!important;
backface-visibility:visible!important;
-webkit-animation:flipInY 1s cubic-bezier(0.77,0,.175,1);
-moz-animation:flipInY 1s cubic-bezier(0.77,0,.175,1);
-o-animation:flipInY 1s cubic-bezier(0.77,0,.175,1);
animation:flipInY 1s cubic-bezier(0.77,0,.175,1);
-webkit-transition:bottom .5s ease,background-position .5s ease;
transition:bottom .5s ease,background-position .5s ease;
padding:0;
filter: drop-shadow(0px 0px 7px #aaa);
transition: 0.3s ease-in-out;
}

#flyin .flyin-man {
position:absolute;
right:5%;
top:110px;
z-index:3;
width:82px;
height:130px;
display:block;
background-image:url(//cdn.elegantthemes.com/images/flyin-man.png);
-webkit-animation:float 3s infinite;
-moz-animation:float 3s infinite;
-o-animation:float 3s infinite;
animation:float 3s infinite;
-webkit-transition:top 1s ease,opacity 1s ease;
transition:top 1s ease,opacity 1s ease;
}

#flyin #flying_subscribe {
-webkit-transition:opacity .5s ease,background-color .5s ease;
transition:opacity .5s ease,background-color .5s ease;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border:none;
width:100%;
color:#fff;
font-size:16px;
font-family:'Goudy Bookletter 1911',arial,sans-serif;
background:#55a753;
text-align:center;
cursor:pointer;
padding:11px 0 10px;
}

#flyin #flying_subscribe:hover,#flyin .flyinbutton:hover {
background-color:#408c3f;
}

#flyin #exit_emailinput {
-webkit-transition:opacity .5s;
transition:opacity .5s;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
width:220px;
background:#f8fafa;
border:1px solid #e4e9e9;
color:#b3b3b3;
font-size:13px;
margin:0 0 10px;
padding:11px 20px;
}

#flyin .flyinclose {
-webkit-transition:0 .5s ease .2s,opacity .5s ease,top .5s ease .2s;
transition:transform .5s ease .2s,opacity .5s ease,top .5s ease .2s;
content:'';
display:block;
z-index:2;
box-shadow:0 0 10px rgba(0,0,0,.2);
cursor:pointer;
width:30px;
height:30px;
border-radius:30px;
background:#fff url(//cdn.elegantthemes.com/img/exitpopup-x.png) no-repeat center center;
position:absolute;
top:-10px;
left:-5px;
margin:0;
padding:0;
}

#flyin .flyinbutton {
-webkit-transition:top .5s ease,opacity .5s ease,background-color .5s ease;
transition:top .5s ease,opacity .5s ease,background-color .5s ease;
width:300px;
height:20px;
top:400px;
opacity:0;
position:absolute;
left:10px;
z-index:5;
display:block;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border:none;
color:#fff;
font-size:16px;
font-family:'Goudy Bookletter 1911',arial,sans-serif;
background:#55a753;
text-align:center;
cursor:pointer;
padding:11px 0 10px;
}

.hide {
opacity:0;
-webkit-transition:opacity 1s ease;
transition:opacity 1s ease;
}

.hide div {
top:60%!important;
-webkit-transition:top 1s ease;
transition:top 1s ease;
}

.minimize {
bottom:-320px!important;
background-position:320px 127px!important;
}

.minimize .flyin-man {
top:-300px!important;
opacity:0!important;
}

.minimize .flyinbutton {
top:10px!important;
opacity:1!important;
}

.minimize .flyinclose {
top:15px!important;
transform:rotate(180deg);
-ms-transform:rotate(180deg);
-webkit-transform:rotate(180deg);
}

#flyin .free,#flyin .present_bottom,#flyin .present_top {
display:block;
position:absolute;
left:50%;
}

#flyin .present_top {
-webkit-transition:all .5s ease .5s;
transition:all .5s ease .5s;
width:100px;
height:42px;
margin-left:-50px;
top:114px;
background-image:url(//cdn.elegantthemes.com/images/flyin-present-top.png);
}

#flyin .present_bottom {
width:108px;
height:74px;
margin-left:-54px;
top:182px;
background-image:url(//cdn.elegantthemes.com/images/flyin-present-bottom.png);
}

#flyin .free {
-webkit-transition:all .5s ease 1s;
transition:all .5s ease 1s;
width:175px;
height:82px;
margin-left:-87px;
top:133px;
background-image:url(//cdn.elegantthemes.com/images/flyin-free.png);
}

.minimize .flyinclose {
}
.target.is-hidden {
  padding-top: 0;
  padding-bottom: 0;
  line-height: 0;
  pointer-events: none;
  display:none;
}

.videocover {
    background-color: rgba(0,0,0,0.4);
    padding: 10px 40px 5px;
    position: absolute;
    bottom: 9px;
    right: 0px;
    font-size: 0.6em;
    color: #FFF;
    left: 0;
    text-align: center;
}
.videocover p {
    border-bottom: solid 1px #FFF;
    padding-bottom: 0px;
    letter-spacing: 0.09em;
    font-size: 1.4em;
    margin: 0;
}

.videocover img {
    width: 270px;
    margin-top: 6px;
}

div#flyin:hover {
    transform: translateY(-5px);
    transition: all .5s;
}

jQuery 

$(function(){
    $('.button').click(function(){
        $('.target').hide();
    });
});

左側の固定ソーシャルサンプル

このページの左側に position: fixed; の固定で表示するソーシャルリンク集のバーが、実際に設置した際のデザインと仕様です。

:hover するとそれぞれのソーシャルのリンクが表示する仕様です。

左側のソーシャルエリア

固定ソーシャルのHTMLとCSSのコード一式

各ソーシャルアイコンは li タグの中に記述しているので、必要に応じてソーシャルの追加や、a タグのリンク先を変更するなどして利用ください。

コードを表示する

HTML 

<div class="sticky-container">
    <ul class="sticky">
      <li>
        <a href="#">
        <img width="32" height="32" title="" alt="" src="https://dubdesign.net/wp-content/uploads/2021/01/fb.png" /></a><p>
                                <a href="#">Facebook</p>
      </li>
      <li>
        <a href="#">
        <img width="32" height="32" title="" alt="" src="https://dubdesign.net/wp-content/uploads/2021/01/tw.png" /></a><p>
        <a href="#">Twitter</p>
      </li>
      <li>
        <a href="#">
        <img width="32" height="32" title="" alt="" src="https://dubdesign.net/wp-content/uploads/2021/01/pint.png" /></a><p>
        <a href="#">Pintarest</p>
      </li>
      <li>
        <a href="#">
        <img width="32" height="32" title="" alt="" src="https://dubdesign.net/wp-content/uploads/2021/01/link.png" /></a><p>
        <a href="#">Linkedin</a></p>
      </li>
      <li>
        <a href="#">
        <img width="32" height="32" title="" alt="" src="https://dubdesign.net/wp-content/uploads/2021/01/rss.png" /></a><p>
        <a href="#">RSS</a></p>
      </li>
      <li>
        <a href="#">
        <img width="32" height="32" title="" alt="" src="https://dubdesign.net/wp-content/uploads/2021/01/tm.png" /></a><p>
        <a href="#">Tumblr</a></p>
      </li>
      <li>
        <a href="#">
        <img width="32" height="32" title="" alt="" src="https://dubdesign.net/wp-content/uploads/2021/01/wp.png" /></a><p>
        <a href="#">WordPress</a></p>

      </li>
      <li>
        <a href="#">
        <img width="30" height="32" title="" alt="" src="https://dubdesign.net/wp-content/uploads/2021/01/yt.jpg" /></a><p>
        <a href="#">YouTube</a></p>

      </li>
    </ul>
  </div>

CSS 

/* サイドのソーシャルバー */
.sticky-container{
    padding: 0px;
    margin: 0px;
    position: fixed;
    left: -152px;
    width: 210px;
}

  .sticky li{
    list-style-type: none;
    background-color: #c8e4ff;
    color: #fff;
    height: 43px;
    padding: 0px;
    margin: 0px 0px 1px 0px;
    -webkit-transition:all 0.25s ease-in-out;
    -moz-transition:all 0.25s ease-in-out;
    -o-transition:all 0.25s ease-in-out;
    transition:all 0.25s ease-in-out;
    cursor: pointer; 
                filter: gray; 
                -webkit-filter: grayscale(100%); 

  }

  .sticky li:hover{
    margin-right: -115px;
    /*-webkit-transform: translateX(-115px);
    -moz-transform: translateX(-115px);
    -o-transform: translateX(-115px);
    -ms-transform: translateX(-115px);
    transform:translateX(-115px);*/
    -webkit-filter: grayscale(0%);
  }

  .sticky li img{
    float: right;
    margin: 5px 5px;
    margin-right: 5px;
  }

  .sticky li p{
    padding: 0px;
    margin: 0px;
    text-transform: none;
    line-height: 43px;
    text-align:right;
    font-color:#fff;
    margin-right: 10px;
  }


  /** fork icon**/
  .fork{
    position: absolute;
    top:0px;
    left: 0px;
  }

ul.sticky {
    border: none;
}
.sticky li a:hover {
    text-decoration: none;
}
.sticky li p a {
    text-decoration: none;
    font-size: 1em;
}

前の記事

計算のイラスト
条件分岐タグ

次の記事

コピペでできるHTMLとCSSの背景と基本のデザインテンプレ
背景に使うイラストアイキャッチ

関連記事

カテゴリーのイラスト

同じカテゴリの記事一覧

ボタンの影

まとめ記事

Article

About

Summary

OTHER

DUB DESiGNはデザインをテーマにしたメディアです。Webデザインに関するHow-toや、WordPressのスニペットなど、デザインの話を中心に、仕事を楽しむすべての方を対象に記事を配信しています。

＞＞ 詳しくはこちら