【お知らせ】このMASAa.netではWordPressテーマ Cocoonを採用しています。ここをクリックするとTHE THOR採用のZMASAa.blogを開きます。
WordPressWordPress

【WordPress】プラグインを使ってHOMEに戻るボタンを設置する

アイキャッチ画像 WordPress
この記事は約5分で読めます。
スポンサーリンク

プラグインを使ってHOMEに戻るボタンを設置する

スマートフォンのモバイル端末でサイトを表示させた場合、下側にトップページに戻るためのホームボタンが設置されています(WordPressテーマ Cocoon及びTHE THORの場合)。

【WordPress】プラグインを使ってHOMEに戻るボタンを設置する

【WordPress】プラグインを使ってHOMEに戻るボタンを設置する

しかし、PCでの表示の場合は、トップページに戻るためのホームボタンがありません。

そこで、PCの表示の際にもトップページに戻るためのホームボタンを設定したいと思います。

今回はカスタマイズでトップページに戻るためのホームボタンを設置するのではなく、手っ取り早くプラグインを導入してみました。

今回導入したプラグインは「WPFront Scroll Top」です。

WordPressシステムの新規追加で、プラグイン「WPFront Scroll Top」を検索して、インストール後有効化します。

【WordPress】プラグインを使ってHOMEに戻るボタンを設置する

プラグイン WPFront Scroll Top 設定内容

今回、プラグイン「WPFront Scroll Top」の設定内容については以下通りとなります。

Display

Enabled(有効) ON
JavaScript Async(JavaScript非同期) ON
Scroll Offset(スクロールオフセット) 80px
Button Size(ボタンのサイズ) 0px 0px
Button Opacity(ボタンの不透明度) 75%
Button Fade Duration(ボタンのフェード期間) 200ms
Scroll Duration(スクロール時間) 400ms
Auto Hide(自動非表示) OFF
Auto Hide After(後に自動非表示) 2sec
Hide on Small Devices(小型デバイス時非表示) ON
Small Device Max Width(小型デバイスの最大幅) 640px
Hide on Small Window(小さなウィンドウ時非表示) ON
Small Window Max Width(小さなウィンドウの最大幅) 640px
Hide on WP-ADMIN(wp-adminで非表示) ON
Hide on iframes(iframeで非常時) OFF
Attach on Shutdown(シャットダウン時に添付) OFF
Button Style(ボタンスタイル) Font Awesome
Button Action(ボタン動作) Link to Page Page URL:https://masaa.net/

Location

Location(位置) Top Right
Enabled(有効) ON
Margin X(マージンX) 60px
Margin Y(マージンY) 80px

Filter

Display on Pages(ページ表示) Exclude in following pages [Use the textbox below to specify the post IDs as a comma separated list.]
[Page] Home

FilterFont Awesome Button

Icon Class(アイコンクラス) fas fa-sign-in-alt fa-6x faa-horizontal animated
Font Awesome URL  
Do not include URL(URL含まず) ON
Icon Color(アイコンカラー) #fe619a
Custom CSS(カスタムCSS) #wpfront-scroll-top-container {filter:drop-shadow(4px 4px 1px #aaa);}

プラグイン WPFront Scroll Top 設定後

プラグイン「WPFront Scroll Top」設定後このようになりました。

右端上にある矢印がトップページに戻るためのHOMEボタンなります。

【WordPress】プラグインを使ってHOMEに戻るボタンを設置する

「Button Style(ボタンスタイル)」は、今回用意されている画像【Image】でなく【Font Awesome】のWebアイコンフォントを使用しました。

使用したWebアイコンフォントはHOME型でも良かったのですが、今回は矢印のアイコンを使ってみました。

WordPressテーマ THE THOR(ザ・トール)などのように【Font Awesome】を使っていない場合には、プラグイン「WPFront Scroll Top」に標準で収められている【Image】画像を使うと良いでしょう。

必ず「Button Action(ボタン動作)」の項目設定は、自分のウェブサイトのURLを記載します。

なお、【Font Awesome】に対して、アニメーションのカスタマイズを行っています。

実際に右上の矢印のアイコンをクリックして、その動作を確認してみて下さい。

最後に

今回のプラグインは、自分が運営しているMASAa.netZMASAa.blogMASAa.blogの全部のウェブサイトに導入しました。

そのお陰でPC表示でもエントリー記事閲覧中に、直ぐにトップページ(ホームページ)に戻ることができてレスポンスが良くなりました。

MASAa.netをご覧頂きありがとうございます!
もしMASAa.netの記事がお役に立てた場合、
下記【サポート】を頂くことで今後の記事制作に繋ぎます!

気軽にプレイできるPC向けウェブブラウザ対応ゲーム!
邪神ちゃんドロップキック
精霊幻想記アナザーテイル
ラストラグナロク
ビビッドアーミー
城姫クエスト 極
下記バナーからスマホゲームのインストールお願いします!
天下大豪商
アーテリーギア-機動戦姫-
ナナリズムダッシュ
イース6オンライン
ザ・アンツ
魔剣伝説
FIFA MOBILE

おすすめWordPressテーマ!
WordPressテーマ WING(AFFINGER6)
WordPressテーマ THE THOR(ザ・トール)
WordPressテーマ Diver

MASAa.net

コメント