ルクセリタスのヘッダー帯状メニューにアイコンフォントを使ってカスタマイズ

2019-04-08ルクセリタス・カスタマイズアイコンフォント

ルクセリタスのヘッダー帯状メニューにアイコンフォントを使ってカスタマイズ

Luxelitasのヘッダー上の帯状メニューの設定方法と、表示のカスタマイズ方法を解説していきます。

「帯状メニュー」は、通常のカスタマイザーからの設定+メニューの編集で設定できます。

 

今回のカスタマイズは、メニュー編集からのカテゴリーなどをカスタマイザーから設定できるフォローボタンに合わせてアイコンフォントでシンプルに表示する方法です。

 

5702_03

 

5702_06

 

バージョンと初期デザインについて

当サイトで使用中のバージョンは以下です。(記事作成時)

Luxeritas Child Themeバージョン: 3.0.0
Luxeritasバージョン: 3.5.9

ダウンロードはこちら

ルクセリタスに用意されている「デザイン選択」からのデザイン変更はせずにデフォルトからカスタマイズしています。

 

帯状メニューを有効にする

 「外観」→「カスタマイズ」

4544_03

 

 「ヘッダーの上の帯状メニュー」を編集
 ヘッダーの上に帯状のメニューを表示 にチェックを入れます。

5702_01

設定項目の編集

その他の項目はお好みで、色などもここでカスタマイズ可能です。

ここで設定できる事
  • 帯状メニューの高さ
  • 帯状メニュー文字色
  • 帯状メニューリンクホバー文字色
  • 帯状メニュー背景色
  • 帯状メニューの下線の色
  • 帯状メニューの下線の太さ
  • 検索ボックス表示
  • 検索ボックス文字色
  • 検索ボックス背景色
  • 検索ボックス背景透過
  • フォローボタンの表示方法
  • アイコンのみ or アイコン + SNS名
  • フォローボタンをカラーにする
 フォローボタンは11種類
  • Twitter ID
  • Facebook ID
  • Instagram ID
  • Pinterest ID
  • はてブ ID
  • Google+ ID
  • Youtube ID
  • Youtube ID ( old )
  • LINE ID
  • RSS ボタン表示
  • Feedly ボタン表示

 

メニューの編集

カスタマイザーからの設定で可能なフォローボタンのみを表示する場合は、メニューの編集は必要ありません。

更に追加したいメニューがある際に設定します。

ここではメニュー作成について簡単に説明しています。メニュー作成についての詳細は以下をご覧ください。

 

 「外観」→「メニュー」

5452_02

 「新規メニューを作成」を押し、新しいメニューを作ります。

5702_07

 わかりやすい名前をつけて「メニューを作成」ボタン

5702_08

 

カテゴリーや、固定ページ、カスタムリンクなどから表示したいメニューを作ります。

 それぞれから選択、カスタムリンクはURLを入力して「メニューに追加」ボタン

 

 

 下のメニュー設定から「ヘッダーの上の帯状メニュー」にチェックを入れ、「メニューを保存」ボタンを押します。

5702_12

 

 

この状態で表示は以下の通りです。

(フォローボタンのツイッター、Facebook、RSSはカスタマイザーで設定したもの)

5702_13

 

アイコンフォントを入れる

アイコンフォントの使い方については以下をご覧ください。

よく使うアイコンは以下からもコピー可能です。

 

5702_16

 メニュー編集の右上にある「表示オプション」をクリックして開き、「CSSクラス」にチェックを入れ、CSSオプションを表示します。

5702_15

 

 CSS classオプションに使いたいアイコンフォントを指定します。

【例】Homeに対して「おうちマーク」を入れる場合

fas fa-home

 

5702_14

 

 

アイコンフォントのみの表示例

 

5702_18

 

 クラスには何も入れず「ナビゲーションラベル」にアイコンフォントのコードを入れる

 

<i class="fas fa-home"> </i>

または

<i class="fas fa-home">&nbsp;</i>

 

5702_17

 

リンクのタイトルを表示させる

アイコンだけになると、Homeなどはわかりますが、わかりにくいアイコンもある為、タイトル属性を追記しておくとカーソルが載った際に文字が出ます。

5702_21

 

タイトル属性は以下で入力します。

5702_22

 

カスタマイズ方法

上記のメニュー編集で、すべてのメニューをアイコンフォントのみにした例でカスタマイズしていきます。

 

CSS追記

子テーマのスタイルシートにCSSを追記します。

「Luxeritas」→「子テーマの編集」で「スタイルシート」を選択します。(Ver.3.7.9以前は「style.cssタブ」)

Luxelitasスタイルシート編集画面

 

 

カスタマイザーから設定したフォローボタンには「▲矢印」がありませんが、メニューからの項目には左側に「▲」が出ていますので、これを消します。

5702_04

/*帯メニュー*/
.band-menu .menu-item a::before {
content: none;
margin: 5px;
}

5702_05

▲を消した分、間隔が詰まってしまうので、以下を追記します。

div[id*="head-band"] .menu-item a {
padding: 4px;
}

完成!

5702_06

 

参考:クラス名

 

.band
.head-band
.band-menu
.menu-item
.snsf

 

 

ざっくりHTML構造

<div class="band">
<div id="head-band">
<div class="band-menu">
<ul>
<li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home"></li>
<li><span class="snsf twitter"></li>
</ul></div>
</div>
</div><!--/#head-band-->

その他のカスタマイズは以下も参考にして下さい。

 

関連記事