Simplicity2|PCページとAMPページ「トップへ戻る」ボタンのカスタマイズ

白い鳥が2羽、はばたいている。右隅にトップへ戻るボタン

Simplicity2 の「トップへ戻る」ボタン。
デフォルトだとちっこくて可愛いです。

さらにサイトの利便性を高めるため、ボタンのアレンジに挑戦してみました。

  • PC ページのボタンをデザインそのままにサイズを大きく変更する CSS
  • AMP ページのトップへ戻るボタンデザイン

これらを紹介してみようと思います。

スポンサーリンク

PCページのボタンサイズ変更

よりジャンボにするボタン CSS はこちらです。
子テーマの style.css に記述して使用します。

#page-top a {
  font-size: 21px;
}

マウスポインタが合わせやすく、クリックしやすくなると思います。
モバイルのボタンサイズは変わりません。

AMPページのボタンカスタム

当サイトではこちらの記事を参考に、AMP ページにもトップへ戻るボタンを設置しています。

AMP に「ページトップへ戻る」ボタンを設置する方法のご紹介です。 amp-animation と amp-position-observer の 2 つのスクリプトを使うことで、ボタンの表示と非表示を切り替えるアニメーションを表現できます。クリック・タップをするとページトップに移動するため、サイト訪問者の利便性が高ま...

このボタンデザインを Simplicity2 のデフォルトそっくりに近づけてみました。

先ほどの記事からの変更点は、記事ページなかほどにある amp-footer.php への記述について、fa-arrow-up アイコンの呼び出し部分を fa-angle-double-up アイコンに変え、サイズを大きくしただけです。

<div class="page-top-button">
      <button id="page-top" on="tap:header.scrollTo('duration'=375, 'easing'='cubic-bezier(.4,0,.2,1)')"><i class="fa fa-angle-double-up fa-2x" aria-hidden="true"></i></button>
    </div>
    <div class="page-top-trigger">
      <amp-position-observer on="enter:hide-page-top.start; exit:show-page-top.start" layout="nodisplay"></amp-position-observer>
    </div>

さらに下を子テーマの amp.css に貼り付けています。

#page-top {
  background: #aaa;
  border: none;
  border-radius: 4px;
  bottom: 5px;
  box-shadow: 0 2px 8px rgba(0,0,0,.2), 0 0 8px rgba(0,0,0,.1);
  color: #fff;
  font-size: 12px;
  height: 38px;
  line-height: 100%;
  position: fixed;
  right: 5px;
  transition: .3s cubic-bezier(.4,0,.2,1);
  visibility: hidden;
  width: 29px;
  z-index: 19999;
}

#page-top:active {
  background: #424242;
  box-shadow: 0 8px 24px rgba(0,0,0,.2), 0 0 24px rgba(0,0,0,.1);
  transform: translateY(-1px);
}

.page-top-trigger {
  height: 0;
  position: absolute;
  top: 450px;
  width: 0;
}

出来上がりはこんな感じです。
このスタイルでは PC 画面でのボタンはスマホ表示と変わらず、ちっこいデザインになります。

ご覧頂きありがとうございました。

スポンサーリンク