0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

ペライチで追っかけボタンを作成する(要レギュラープラン)

Posted at

#やりたいこと
スクロールしてもずっと画面の下にくっついてくる例の緑っぽいボタン!

#前提
ペライチのレギュラープランが必要です

#やること
##1.htmlブロック要素を追加
ブロックの挿入 > HTML埋め込み
※[link]は任意のURLに付け替え

<div id="float-div">
    <a href='[link]' target="_blank" >追っかけボタン</a>
</div>

##2.JS/STYLEの追加
ページ情報埋め込み > headタグ内の埋め込み

<style>
    #float-div {
        width: 200px;
        height: 60px;
        position: fixed;
        right: 7vw;
        bottom: 3vh;
        background: #56C500;
        opacity: 0.8;
        border-radius: 5px;
    }

    #float-div a {
        display: block;
        position: absolute;
        margin: 0 auto;
        top: 25%;
        text-align: center;
        width: 100%;
        text-decoration: none;
        font-size: 18px;
        font-weight: bold;
        color: #fff;
    }
</style>
0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?