Luxeritasのモバイル用ナビカスタマイズ、3.xへの対応

2018年5月23日Luxeritas

ルクセリタス Luxeritas 3.0 モバイルナビ対応

jQuery でのモバイルナビ(豪華メニュー)カスタマイズ」の Luxeritas 3.x への対応です。

以前↓こんなんを紹介していましたが、テキスト部分はそのまま使えているのに、フォントアイコンがオリジナルになっていると思います。

 <script>jQuery(function($){
$('#gnavi ul.mobile-nav li.mob-next').removeClass("mob-next").addClass("mob-home").css({'cursor':'pointer','opacity':'1'});
//変更するとこ→$('#gnavi ul.mobile-nav li.mob-home i').text('').addClass('fa fa-home').css('font-size','160%');
$('#gnavi ul.mobile-nav li.mob-home p').text('Home');
$('.mob-home').on('click', function() {
window.location.href = 'https://yaruzou.net';
});
});</script>

こんなんなっちゃった理由は Font Awesome アイコンフォントの挿入の仕方が変わったため。

フォントアイコンを入れているコードの一文を変更すれば直ります(※注)。

 

変更方法

アイコン部分だけがおかしいので、変更するのは Font Awesome を挿入している部分だけ。

$('#gnavi ul.mobile-nav li.mob-home i').text('').addClass('fa fa-home').css('font-size','160%');

↓↓↓

$('#gnavi ul.mobile-nav li.mob-home i').removeClass('fas fa-angle-double-right').addClass('fa-home').css('font-size','160%');
  1. .text(") ←消す
  2. .removeClass('fas fa-angle-double-right’) ←加える
  3. fa fa-home ←緑の部分 fa を消す

とりあえずこれでいけます。

 

やっていること(解説)

1.えっと、すいません。なんで .text(“") で消していたのか覚えていません。Luxeritas 2.x では<i></i>の間に何か入っていたんだと思いますw 今は不要になったので消しています。

2.ルクセリタス 3.xではメニューアイコンが <i class="~"></i> 形式で記載されているので、class="fa fas fa-angle-double-right" のうち、[fas fa-angle-double-right]を削り、代わりに自分で入れたいアイコンを入れています(fesについては後述。バージョン5に対応させたいなら、FAのサイトで調べて入れ替えます)。

3.もともとの接頭辞 fa を消さずに残しているので、あらためて fa を代入する必要がないため、fa は不要になっています。

 

5つのモバイルナビアイコンの変更

「これだけじゃ他のが分からん」と言われそうなので、モバイルナビのメニューとして使われているアイコン5つのの入れ替え方を書いておきます。

  1. fa fas fa-list(Menu)
  2. fa fas fa-exchange(Sidebar)
  3. fa fas fa-angle-double-left(<<privious)
  4. fa fas fa-angle-double-right(>>next)
  5. fa fas fa-search(Search)
Menu
$('#gnavi ul.mobile-nav li.mob-home i').removeClass('fas fa-list').addClass('フォントアイコン名').css('font-size','160%');
Sidebar
$('#gnavi ul.mobile-nav li.mob-home i').removeClass('fas fa-exchange').addClass('フォントアイコン名').css('font-size','160%');
Privious
$('#gnavi ul.mobile-nav li.mob-home i').removeClass('fas fa-angle-double-left').addClass('フォントアイコン名').css('font-size','160%');
Next
$('#gnavi ul.mobile-nav li.mob-home i').removeClass('fa-angle-double-right').addClass('フォントアイコン名').css('font-size','160%');
Search
$('#gnavi ul.mobile-nav li.mob-home i').removeClass('fas fa-search').addClass('fa-home').css('font-size','160%');

 

Font Awesome 5 への対応(※注)

モバイルナビ豪華版のアイコンで使われているクラスを見ると、fa の後ろに fas が加わえられています。

  1. fa fas fa-list(Menu)
  2. fa fas fa-exchange(Sidebar)
  3. fa fas fa-angle-double-left(<<privious)
  4. fa fas fa-angle-double-right(>>next)
  5. fa fas fa-search(Search)

従来のFont Awesome では、全てのアイコンの接頭辞(プレフィックス)は “fa" でした。

しかしバージョン5では仕様が一部変更され、アイコンのカテゴリーごとに異なる接頭辞が割り当てられています。fas はその接頭辞の一つ。

Luxeritas 3.x では、おそらくバージョン5への対応をしたのだろうと思います。

5月28日の Luxeritas 3.0.3 でFont Awesome5 が使えるようになりました。4を使い続けるならオプションで設定してください。デフォルトで5なので、ここで5に対応させていたらそのままでOK。5にするなら fa を消しても大丈夫。

fa と fas の二つが接頭辞に使われているのは、従来の Font Awesome とバージョン5の両方に対応するため。

 

モバイルナビのアイコンを Font Awesome 5 に対応させるには?

使っているアイコンがバージョン4と5が同じ名前ものなら何もしなくても両方に対応しています。

ただ、名前そのものが変更されたものや、エイリアス(同じアイコンなのに別名のものもある)は廃止されているので、そのあたりは注意が必要です。

  • いくつかの名前は変更され、より整合性がとられています
  • バージョン5ではエイリアス(同じアイコンに複数の名前がついていた)がなくなりました。各アイコンは正式な名前を1つだけ持ちます
  • すべてのブランドアイコンには接頭辞 fab がつきます
  • -o で終わっていたアウトラインスタイルを持つアイコンは、接頭辞 far に変更されました

How to Use | Font Awesome

Font Awesome ギャラリーでアイコンの名前が確認できます。