BizVektorのカスタマイズ

BizVektorで作成するスマホサイトのフッターにフローティングメニューを作るときに、右端は「上に戻る」ボタンにしたい場合があります。

スマホのフローティングメニュー(右端が「上に戻る」)

スマホのフローティングメニュー(右端が「上に戻る」)

アイコンを使ったフローティングメニューの作り方は以下のページも参考にしてください。
フローティングメニューをフッターに表示する

「TOP」のリンク先を「#」にすれば単純に画面の最上部に移動するリンクとして機能しますが、せっかくなので、BizVektorの「上に戻る」に相乗りさせてもらいましょう。クリック時にスムーズに上にスクロールされるようになります。

BizVektorの「上に戻る」ボタン

BizVektorの「上に戻る」ボタン

BizVektorの「上に戻る」に相乗りするには次のように設定します。

  • 「上に戻る」のリンク先を「#wrap」にする
  • そのリンクを「id="back-top"」のdivタグで囲む

たとえば、次のようなHTMLになります。

<div id="back-top">
<a href="#wrap"><i class="fa fa-arrow-circle-o-up"></i><br />
TOP</a>
</div>

「fa-arrow-circle-o-up」はアイコンフォントFont Awesomeの上矢印アイコンです。

これをフローティングメニューの右端などに追加すれば、「上に戻る」アイコンが表示されます。クリックすると、スムーズに画面最上部までスクロールされるはずです。

ただし、スタイルを設定する必要があります。BizVektor組み込みの「上に戻る」ボタンには「position: fixed;」などが指定してあり、常に画面右下に固定表示されるようになっているからです。

フローティングメニューの「上に戻る」用のサンプルCSSを紹介します。

#back-top a {
    position: relative;
    bottom: 0;
    right: 0;
}

これで、「上に戻る」がフローティングメニューになじんで表示されるようになります。

実際は既存の「上に戻る」との兼ね合いがあるので「フローティングメニューのボタンのみ」(例:#footerFloatingMenu #back-top a)のようなセレクタを組み立てるなど、少し工夫が必要です。
フローティングメニューの右端に「上に戻る」を表示

フローティングメニューの右端に「上に戻る」を表示

あとはいろいろとお試しください。

ゼロからフローティングメニューの設置をご希望の方はWordPress個別サポートで承ります。

この記事をSNSで共有する
WordPressでお困りのときはご相談を
細かい質問からCSSやPHPのカスタマイズ、トラブル対応まで、この記事を書いた西沢直木が直接、WordPress個別サポートで対応します。
WordPress個別サポートの特徴
  • 最短で本日中に問題解決できます
  • 見積もり無料・料金は終了後の後払いです
  • 銀座教室・スカイプ・出張またはメールで対応します
カスタマイズがうまくいかないときは
お急ぎのときはWordPressメールサポートで対応します。ご活用ください。
こんなときはご相談ください(相談・見積もり無料)
  • サイトのデザインをカスタマイズしたい
  • CSS・PHPのカスタマイズがうまくいかない
  • 引っ越し(サーバー移転)したい
  • サイトをSSL対応(https://)したい
WordPress講座の問い合わせ先
WordPress講座申し込み
メールで問い合わせ

関連記事

スポンサーリンク