Luxeritasのモバイル用ナビボタンの重なりの解消法

ルクセリタスナビボタン

皆さんこんにちは。隠家 くろ@kakurekuro)です。

今回のLuxeritasの改造ポイントは、モバイル用ナビボタンとページトップボタンの重なりです!

Luxeritasのバージョン3.7.0から、モバイルからサイトを見た際に、画面下部に固定のナビボタンを付けられるようになりました

これは、Luxeritasユーザーからすると大幅なアップデートで、歓喜した人も多いはず。。。!

なのですが、実は1部分だけある問題が生じてしまいました。

それが、先程言った、ページトップボタンとの重なりです↓

ルクセリタス

今回は、その重なりを解消する方法を紹介していきます!

Luxeritasの最新バージョンのダウンロードは以下からできます↓

ページトップボタンの場所を変える

一番手っ取り早い解消方法は、ページトップボタンの位置を変えることです。

CSSへの記述が必要ですが、短いので誰でも簡単にできます。

やり方を説明します。

まずは、子テーマの編集画面に遷移します↓

子テーマ編集

その子テーマのCSSコードに以下のコードを追記します。

最初から書いてあるコードを消すと、正常にテーマが動作しなくなりますので注意してください!

/* ページトップボタン位置調整 */
#page-top {bottom: 50px;}

数字が大きければ大きいほど、ページトップボタンが上にずれます。

これだけです。

これで、ページトップボタンの位置が少しだけ上にずれて表示されます↓

ページトップボタン

右や左にも動かすことが出来るのですが、変な位置に置くと誤タップの原因になるので、初期位置から上下にだけ調整することをおすすめします。

大きさとかも変更可能です↓

/* ページ先頭ボタンサイズ調整 */
#page-top {width: 200px;}

あとがき

以上でLuxeritasのモバイル用ナビボタンとページトップボタンの重なり解消は終了です。

Luxeritasはとても高機能ですが、細かいデザインがしたいとなると、CSSを弄るしかありません。

そんな人の助けに少しでもなれたら幸いです。

なにか質問があれば、コメントやTwitterでどしどし聞いてきてください!

それでは、今回はこの辺で

またいつか

0

Posted by 隠家 くろ