Twenty Seventeen ページトップへ戻るボタンの設置

WordPress Twenty Seventeen
画面制御ボタンのカスタマイズ
ページトップへ戻るボタンの設置
 
ページをスクロールすると、画面右下に「トップへ戻る」ボタンが浮かび上がってきて、これを押すとページの先頭に戻るボタンを設置した。
以下に、この方法を記述。

スポンサー リンク

1. footer.php の編集 
 
footer.php の footer タグの前にコードを貼り付ける。
ページトップへ戻るボタン
 
貼り付ける、ページトップへ戻るボタンのコード。
 
 
2. style.css の編集
 
ボタンの表示位置やデザインを css で設定。
 
 
RGBAとは
ディスプレイ画面で色を表現するために用いられる、赤(Red)、緑(Green)、青(Blue)の3色に、アルファ(Alpha)と呼ばれる透過度の情報を加えたもので、これらの組み合わせによって、あらゆる色の表現とともに半透明の表現が可能となる。
 
 
 
3. header.php の編集
 
下にスクロールされたらボタンを表示する処理を、header.php の head タグ内にある <?php wp_head(); ?> の下に追記。
 
 
ページトップへ戻るボタンの設置結果。
ページトップへ戻るボタン

 

以上。
(2017.11.04)

 

 

スポンサー リンク

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください