ペライチ　トップへ戻るボタンをつける

ペライチでトップへ戻るボタンをつける方法

ＣＳＳの追加と、ＨＴＭＬコードの追加でペライチにトップへ戻るボタンがつけられます。

固定ナビゲーションにしてＴＯＰボタンを作っておけば、ＴＯＰへ戻る機能は付けられますが、ＣＳＳとＨＴＭＬコードの追加で普通のＴＯＰへ戻るボタンが作れます。

コードを書く必要があるのでレギュラープラン以上の必要があります。

ＣＳＳの追加

編集画面でページの基本情報を選択しタグの埋め込みボタンを押します。
headタグ内の埋め込みで、以下のＣＳＳを記述します。

<style>
#page_top{
  width: 50px;
  height: 50px;
  position: fixed;
  right: 0;
  bottom: 0;
  background: #3fefee;
  opacity: 0.6;
}
#page_top a{
  position: relative;
  display: block;
  width: 50px;
  height: 50px;
  text-decoration: none;
}
#page_top a::before{
  font-family: FontAwesome;
  content: '\f062';
  font-size: 25px;
  color: #fff;
  position: absolute;
  width: 25px;
  height: 25px;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}
</style>

ブロックの埋め込み

適当な場所にブロックを追加し、その他のＨＴＭＬ埋め込みを選択し、以下のコードを貼り付けます。

<div id="page_top"><a href="#"></a></div>

これで、画面右下にＴＯＰへ戻るボタンが表示されます。

ペライチキャンペーン

無料でホームページを作って公開しよう！キャンペーン実施中！
https://goo.gl/llbtZV