Luxeritasのモバイル用ナビボタンの重なりの解消法
皆さんこんにちは。隠家 くろ(@kakurekuro)です。
今回のLuxeritasの改造ポイントは、モバイル用ナビボタンとページトップボタンの重なりです!
Luxeritasのバージョン3.7.0から、モバイルからサイトを見た際に、画面下部に固定のナビボタンを付けられるようになりました。
これは、Luxeritasユーザーからすると大幅なアップデートで、歓喜した人も多いはず。。。!
なのですが、実は1部分だけある問題が生じてしまいました。
それが、先程言った、ページトップボタンとの重なりです↓
今回は、その重なりを解消する方法を紹介していきます!
※Luxeritasの最新バージョンのダウンロードは以下からできます↓
ページトップボタンの場所を変える
一番手っ取り早い解消方法は、ページトップボタンの位置を変えることです。
CSSへの記述が必要ですが、短いので誰でも簡単にできます。
やり方を説明します。
まずは、子テーマの編集画面に遷移します↓
その子テーマのCSSコードに以下のコードを追記します。
※最初から書いてあるコードを消すと、正常にテーマが動作しなくなりますので注意してください!
/* ページトップボタン位置調整 */
#page-top {bottom: 50px;}
数字が大きければ大きいほど、ページトップボタンが上にずれます。
これだけです。
これで、ページトップボタンの位置が少しだけ上にずれて表示されます↓
右や左にも動かすことが出来るのですが、変な位置に置くと誤タップの原因になるので、初期位置から上下にだけ調整することをおすすめします。
大きさとかも変更可能です↓
/* ページ先頭ボタンサイズ調整 */
#page-top {width: 200px;}
あとがき
以上でLuxeritasのモバイル用ナビボタンとページトップボタンの重なり解消は終了です。
Luxeritasはとても高機能ですが、細かいデザインがしたいとなると、CSSを弄るしかありません。
そんな人の助けに少しでもなれたら幸いです。
なにか質問があれば、コメントやTwitterでどしどし聞いてきてください!
それでは、今回はこの辺で
またいつか
ディスカッション
コメント一覧
まだ、コメントがありません