ルクセリタスのPAGETOPボタン設定&表示位置変更とプチカスタマイズ

2019-05-16使い方

 

ルクセリタスには、PAGETOPボタンが標準装備されています。

今回は、サイトのページ、右下に出る「ページのトップへ戻るボタン」の設定方法と表示位置をずらしたい時や横幅いっぱいに表示するなどプチカスタマイズの方法についてです。

 

特徴

 

初期設定では以下のように表示されていますが、簡単にデザイン変更が可能です。

マウスが載った際には、色が変わります。
設定する色がホバー時の色で、通常の表示はその色の薄いバージョン)

 

色や表示する文字を変更したり、表示する矢印のアイコンも6種類から選択可能ですので、好みのデザインで表示出来ます。

 

丸いボタンも簡単に設定!

7348_11

 

設定方法

 

 「外観」→「カスタマイズ」を開きます。

7188_04

 

 「細部の見た目」を選択します。

 

7348_03

 

初期状態

7348_02

 

ボタンテキストを変える

 

ボタンテキストに入力。

7348_17

7348_15

 

テキスト非表示

ボタンテキストを空欄にすると矢印アイコンだけになります。

 

矢印アイコンを変える

あらかじめ用意されているアイコンにチェックを入れるだけで変更出来ます。

アイコンはそれぞれ以下の通りです。

fa-arrow-up 7348_04
fa-caret-up 7348_05
fa-chevron-up 7348_06
fa-chevron-circle-up 7348_07
fa-arrow-circle-up 7348_08
fa-angle-double-up 7348_09

 

角を丸める・円にする

角の丸みに数字を入れる事で、ボタンを丸める事が出来ます。

7348_13

7348_10

 

円にする場合は「25」と入力します。

7348_12

7348_11

 

色を変える

背景色の設定は、ホバー時の色になり、通常の表示はその色の薄いバージョンになります。

7348_18

 

色の変更には以下もご利用下さい。

 色別カラーコード

マカロンビビッドパステル和色セーフ色名 配色パターンサンプル

 

プチカスタマイズ

 

位置の調整

もう少し上に表示したい、もう少し左に表示したいといった場合は、CSSを追記すれば可能です。

 上にずらす
#page-top {bottom: 80px;}
 左にずらす
#page-top {right: 80px;}

 

サイズを変更

#page-top {width: 200px;}

7348_23

 

全体に表示

#page-top {left: 50px;right: 50px;}

7348_21

 

モバイルのみ表示を変える

 

@media only screen and (max-width: 1199px){
#page-top {left: 100px;right: 100px;}
}

 

スマホ表示例

7348_22

 

 

  • WordPressランキング
  • にほんブログ村 IT技術ブログ Webサイト構築へ

使い方

Posted by 綾糸