今更聞けないWordPress備忘録

初心者がワードプレスを始める基礎知識のまとめ

WordPress ぺージトップへ戻るボタン

スポンサーリンク

プラグインをインストールして有効化するだけで、ページの右下に「ページトップへ戻る」ボタンを設置することができます。

「Scroll Back To Top」の導入方法

WordPressの管理画面にログインし、プラグインのページから新規追加で「Scroll Back To Top」をインストールします。「Scroll Back To Top」で検索すると出てきます。

 

f:id:yumeji773:20170116193450p:plain

 

またはプラグインのページから直接ダウンロードし、サーバにアップロードします。

 https://wordpress.org/plugins/scroll-back-to-top/

 インストールが完了したらプラグインのページで「Scroll Back To Top」を有効化します。

 

f:id:yumeji773:20170116193647p:plain

 

これだけでOKです。
サイトをスクロールすると下記のようにフェードして「ページトップへ戻る」ボタンが表示されます。

 

f:id:yumeji773:20170116193731p:plain

デフォルトの状態でもいいのですが独自でボタンのデザインなどをカスタマイズする

①設定から「Scroll Back to Top」を選択し設定画面を開きます。

 

f:id:yumeji773:20170116193822p:plain

 

②「Scroll Back to Top」の設定画面が表示されるので、ボタンの大きさや色、表示位置などお好みで設定します。

 

f:id:yumeji773:20170116193915p:plain

 

「Scroll Back To Top」の設定

「Scroll Back To Top」の設定画面の内容を簡単に説明します。

 Status

 「ページトップへ戻る」ボタンの表示・非表示を設定します。

f:id:yumeji773:20170116194105p:plain

Publicly Visible:表示
Preview Mode:プレビューでのみ表示(ログイン時)
Disabled:非表示

Button Appearance

サイズや色などを設定します。

f:id:yumeji773:20170116194248p:plain

Width:幅
Height:高さ
Background Color:背景色
Background Hover Color:ホバー時の背景色
Foreground Color:文字色
Foreground Hover Color:ホバー時の文字色

Button Location

「ページトップへ戻る」ボタンを表示するの位置を設定します。

f:id:yumeji773:20170116194448p:plain

Horizontal Alignment:左、中央、右の位置

Vertical Alignment:上、下の位置

Button Label

ボタンのデザインをやテキスト、テキストサイズを設定します。

f:id:yumeji773:20170116200047p:plain

Label Type:アイコンの種類
Icon Size:アイコンのサイズ
Custom Label Text:テキスト
Font Size:フォントサイズ

 

「Custom Text」にチェックを入れると「Custom Label Text」と「Font Size」が入力できるようになります。Custom Textでは任意のテキストを入れることが可能なので日本語でも表示できます

f:id:yumeji773:20170116200227p:plain