ページ先頭へ戻るボタンの表示設定

ページ先頭へ戻るボタンの表示設定

デザイン

画面の右下に固定表示されるページの先頭へ戻るためのボタンを表示する設定方法について紹介します。

ページ先頭へ戻るボタンの表示設定

ページ先頭へ戻るボタンの表示はカスタマイザーの「[ys]デザイン」→「フッター」の中にあります。

ページ先頭へ戻るボタン設定

ボタンを表示する場合は「ページ先頭へ戻るボタンを表示する」にチェックをつけてください。

ボタンのカスタマイズ

ボタンテキストの表示

ページの先頭へ戻るボタンテキスト

「ページの先頭へ戻るボタンテキスト」ではボタンに表示されるテキストを設定できます。

初期表示では上矢印アイコンが表示されます。

ショートコードが使えるため、アイコンメニューからショートコードを選んで使用できます。

サイト内で使えるアイコンを表示するためのショートコードを検索・コピーする方法
サイト内で使えるアイコンを表示するためのショートコードを検索・コピーする方法について紹介します。
wp-ystandard.com

また、上級者向け機能としてimgタグについても使用できるようにしていますので、ボタン用アイコン画像を作成し、imgタグを直接記述することで好きなデザインのボタンを作成できます。

ページの先頭へ戻るボタンに画像を表示する

ボタンの文字色・背景色

ページ先頭へ戻るボタンの背景色・文字色

「ページ先頭へ戻るボタン背景色」「ページ先頭へ戻るボタン文字色」ではボタンの背景色と文字の色をそれぞれ設定できます。

ボタンの角丸

ページ先頭へ戻るボタンの角丸

「ページ先頭へ戻るボタンの角丸」ではボタンの丸さを調整できます。

0にすると丸さがなくなり真四角なボタンになります。

注意事項:モバイルフッターメニューと併用はできません

モバイルフッターメニューを設定している場合、ページ先頭へ戻るボタンはモバイルとタブレットでは表示されません。

モバイル・タブレットでもページ先頭へ戻るボタンを追加したい場合、モバイルフッターメニューで「カスタムリンク」を追加し、URLに「#」を入力してください。

モバイルフッターメニュー項目にカスタムリンクを設定する
モバイルフッター固定メニュー設定
このページではモバイルフッター固定メニューの設定方法について紹介します。
wp-ystandard.com