>> テーマ変更に伴い見づらい箇所や不具合があるかもしれません、ご迷惑をおかけします。→
PR

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

ルクセリタス・カスタマイズ
この記事は約6分で読めます。

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 ボタン表示

 

メニューの編集

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

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

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

ワードプレスWordPressのメニュー作成方法(グローバルナビ 他)
メニューの表示位置・表示可能数やデザインなどは、テーマにより異なりますが、すべてのメニューは同様の方法で作成できます。 メニューの作り方  「外観」→「メニュー」を開きます。 既に作成済みのメニューやデフォルトで用意されたメニューがあれば表...

 

 「外観」→「メニュー」

5452_02

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

5702_07

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

5702_08

 

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

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

 

 

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

5702_12

 

 

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

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

5702_13

 

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

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

Font Awesomeアイコンフォントのサイズ・向き等の変更とコードが消える対処法
当サイトでは Ver.5以降を使用しており、記事もすべて同様のバージョンでの利用に基づいています。 Ver.4.7を使っておられる方で、アイコンフォントを探したい場合は以下をご覧ください。 Font Awesome Ver.6 について 2...

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

よく使うアイコンフォントのコード74選まとめでサクっとコピー
「Font Awesome」のフリーフォントです。 なんとフリーのものだけで1,500もあるので、よく使う、または使えそうなアイコンフォントのコードをまとめまています。 このページではよく使いそうなものに絞って71個載せています。 Font...

 

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-->

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

ルクセリタスLuxeritasの約40ヵ所をカスタマイズ!高速・高機能無料テーマ
高機能でスピード抜群の無料テーマ「ルクセリタス」を、いろいろカスタマイズしていますので、少しまとめてみます。 カスタマイズ済みの当サイトオリジナルデザインファイルは以下をご覧ください。 ルクセリタスについて 今のところテーマはこの一択と決め...

コメント

  1. うさぎ より:

    こんにちわ。
    Luxeritas 3.9.1 (Child 3.0.3) を利用しています。
    このカスタマイズを試したところ、

    <a href="(URL)" title=" “> 

    というHTMLが生成され、「”>」という不要な表示が現れしまいます。

    原因は恐らくaの”title=”パラメータが生成されるようになったことに起因するとは思い、
    また、head-band.phpのdescription_walker::start_elの生成部分を編集すればよいのはわかっているのですが、
    他によい方法があれば教えて頂けると助かります。

    • 綾糸 より:

      うさぎさま
      はじめまして。

      ご質問の件、どこかしら間違えているのではないかと思いますが、ひとまずメニュー編集で「タイトル属性」部分をご確認下さい。
      この記事の「リンクのタイトルを表示する」の項です。

      • うさぎ より:

        ありがとうございます! 正しく表示できるようになりました。
        タイトルの設定が必須なんですね。ここを空白にすると、ナビゲーションラベルがtitleパラメータに適用されてしまい、iタグがそのまま出力され、表示が崩れてしまっておりました。

タイトルとURLをコピーしました