【SWELL】グローバルナビのリンクを好きな画像やアイコンに変更する！

みなさんブログカスタマイズしてますか？

SWELLではグローバルナビもある程度好きなようにカスタマイズすることができ、テキストのみ、サブテキストあり、ドロップダウンでサブメニューを表示することもできます。

• テキストのみ
• サブテキスト
• ドロップダウン

後の２つはSWELLの公式サイトで使用されていますね。

今回は現在の私のブログでやっているように、このグローバルナビを好きな画像に置き換える方法と、オマケでアイコン化する方法を解説します。

現在はデザインが少々変わっています（×画像→SVG）

ちーも

オリジナル感にこだわる人向け！

グローバルナビとは？

グローバルナビとはページ上部、ヘッダ内にあるメニューのことです。グローバルメニューと呼ばれることもあります。

グローバルナビがあると、ユーザのページ遷移が楽になるだけでなく、優先的に見てもらいたいコンテンツをアピールすることにも繋がります。

項目が多すぎると視認性も悪く逆効果なので5項目くらいにするのがおすすめです。
それ以上になる場合はドロップダウンメニューを使用しましょう。

グローバルナビはPC向けです。一般にタブレットやスマホ表示の場合はハンバーガーメニューというものになるか、画面下部にメニューが固定される場合が多いです。
私のブログではハンバーガーメニューを採用しています。

今回のカスタマイズもほとんどがPCのみに適用されるものなのでご注意ください。

メニューを好きな画像にする方法

まずはメニューを好きな画像にする方法を解説します。

この方法はドロップダウンメニューには対応していませんので、項目が少ない人向けです。

画像を準備する

まずは画像を用意しましょう！今回私はこんな感じの簡単なデザインをillustratorで作成しました。

サイズは後で調整するので適当に大きめに作りましょう。小さすぎると大きな画面で見た時に画質が落ちてしまいます。

形は縦長でなければどんな形でも大丈夫だと思いますが、バランスをみて調整してください。まるく作るのも可愛いかもしれませんね。

ご自身で画像の準備が難しい場合はフリーの素材を使用するのもいいかもしれません。
おすすめのフリー素材サイトはこちらの記事でもご紹介しています！

あわせて読みたい

【無料・商用利用可・クレジット表記不要】現役WEBエンジニアがおすすめする素材サイト おしゃれなサイトを作りたいとき、イラスト・アイコン・写真は必要不可欠な存在です。ですが１から全て自前で用意するのはなかなか難しく、時間や費用との兼ね合いもあ…

画像が用意できたら次のステップに進みます。

画像を使ったグローバルナビを作成する

まず表示したいデザインをブログパーツで作成します。
どのように作ってもいいのですが、グローバルナビなので横一列に並べるのがたぶんよいと思われます◎

完成形はこんな感じ。

STEP

リッチカラムの挿入

まずリッチカラムブロックを挿入し、表示数を入れたいメニューの分だけ増やします。

今回は４つのメニューを入れたいので、PCとタブレットでカラム数を４に設定しました。

グローバルナビはPC向けとは言いましたが、画面サイズの大きいタブレットで見る場合はグローバルナビが表示される可能性があるので念のため設定しています。

スマホではこのグローバルナビは表示されないので特に変更しなくて大丈夫です。

STEP

画像の配置

次にそれぞれのカラムにメニューに使いたい画像を配置し、リンクを設定します。

これを必要なメニュー数繰り返し、全てに設定してください。この時画像のサイズは画質低下を防ぐためフルサイズに設定し、画像の寸法は後でCSSで調整するのでいじらずでOKです。

画像の寸法、ここで設定すればCSSいらないじゃん！と思うかもしれませんが、SWELLの設定では縦横のサイズ比が固定なので（width: auto;が使えない）、用意した画像の横幅が異なる場合はここで高さを合わせても表示がぴったり合いません。

画像の縦横サイズが全て同じならここでサイズ指定を行い、CSSはなしでもいけると思います。（未検証）

STEP

追加CSSクラスをつける

ここまでで、完成形のグローバルナビに見た目は同じになりました！最後に追加CSSクラスを付与します。

ここでクラスは必ず「リッチカラム」に付与してください。

別の場所に付けるとこの後のCSSが動かなくなります。

私はクラス名を「header_img_menu」としましたが、好きな名前で大丈夫です。（その場合CSSをコピーするときはご自身でセレクタを変更してください）

ちーも

これで画像を使ったグローバルナビは完成！

SVGを使いたい場合

ホバー時に線の色を変えるなど、アニメーションも使いたい場合はSVGを使いましょう。

現在このサイトもメニューアイコンをSVGにしています。（2024/2/8）

SVGの基本的な使い方はこちら

あわせて読みたい

SWELLでSVGアニメーションを使うコツ！2通りの方法を解説 サイトやブログを作っているとき、アニメーションでページに動きがあると一気に見た目が華やかになりますよね。 今回はSVGアニメーションをSWELLで上手に使う方法を語り…

当サイトのグローバルナビに使用しているホームアイコンはこんな感じになっています。

<svg class="navi_menu" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 306.1741176 306.172757">
<a xlink:href="https://lapinweb.com/">
  <defs>
    <style>
      .cls-1 {
        fill: none;
        stroke: #3b3b3b;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-width: 19.4727886px;
      }
    </style>
  </defs>
  <g>
    <g id="home_btn">
      <circle id="circle" class="cls-1" cx="153.0870588" cy="153.0860366" r="143.3504953"/>
      <polyline class="cls-1" points="216.8866122 214.6420614 216.8866122 130.7673399 153.0870588 78.432665 89.2861376 130.7673399 89.2861376 214.6420614"/>
      <polyline class="cls-1" points="175.343974 214.6406936 175.343974 170.1257181 130.8288877 170.1257181 130.8288877 214.6406936"/>
    </g>
  </g>
</a>
</svg>

SVGの準備が出来たらブログパーツを作成します。

STEP

リッチカラムの挿入

STEP1は画像の場合と同じです。

STEP

SVGの配置

次にそれぞれのカラム項目にカスタムHTMLを追加し、準備したSVGのコードをコピペします。

STEP

追加CSSクラスをつける

画像の時と同じように、リッチカラムにクラスを付与します。

作成したメニューをヘッダに配置する

先ほど作成したグローバルナビが表示されるように設定していきます。

外観＞ウィジェット　のメニューを開き、「ヘッダ内部」のエリアにカスタムHTMLのウィジェットを挿入します。

「内容」は先ほど作成したブログパーツの呼び出しコードを入力してください。
これでヘッダに作成したメニューが表示されるようになりました！

ただ元々のメニューが邪魔になっているのと、メニューのデザインがちょっと汚いですね。次はこの部分を整えていきます。

既存のグローバルナビを非表示にする

外観＞メニュー　の画面を開きます。

「新しいメニューを作成しましょう」の文字をクリックすると新しいメニューが作成できるので、「空のグローバルナビ」という名前でメニューを作成しました。このとき「メニュー設定」で「グローバルナビ」にチェックを入れます。

メニューの中身は空のまま保存をしてください。

保存が完了したらブログを確認してみましょう。
元のテキストメニューが消え、画像で作ったグローバルナビのみが表示されていると思います！

ちーも

次が最後の手順ですよ～

スタイルを調整する

基本的にはコピペで大丈夫だと思いますが、使う画像のサイズによってご自身で調整を行ってください。

「ヘッダーを追従させる」設定を

body #header .header_img_menu .swell-block-column,
body #fix_header .header_img_menu .swell-block-column {
  width: auto;
  margin: auto 15px;
}
body #header .header_img_menu .swell-block-column:last-child,
body #fix_header .header_img_menu .swell-block-column:last-child {
  margin-right: 0;
}
body #header .header_img_menu figure,
body #fix_header .header_img_menu figure {
  width: auto;
}
body #header .header_img_menu img,
body #fix_header .header_img_menu img,
body #header .header_img_menu svg,
body #fix_header .header_img_menu svg {
  height: 40px; /*サイズ変更はここ（画像の高さ）*/
  width: auto;
}

body #header .header_img_menu .swell-block-column {
  width: auto;
  margin: auto 15px;
}
body #header .header_img_menu .swell-block-column:last-child {
  margin-right: 0;
}
body #header .header_img_menu figure {
  width: auto;
}
body #header .header_img_menu img,
body #header .header_img_menu svg {
  height: 40px; /*サイズ変更はここ（画像の高さ）*/
  width: auto;
}

ヘッダー追従を設定しているかどうかによってコードが異なるので２パターン用意しました。画像、SVG両対応です。
ヘッダー追従についてよくわからない方は、「している方向け」の方のコードで大丈夫です。

どちらもサイズ調整はコメントの部分を変更すればOKです。ご自身のロゴ画像サイズより小さくすると見栄えがいいのでおすすめです。

これで完成です！お疲れ様でした！

メニューにアイコンを挿入する方法

次に画像までは使わなくていいけどアイコンは入れたいという方向けに、カスタマイズ方法を書いていきます。
完成するとこんな感じ。

• 左側にアイコン
• 上にアイコン

さらにそれぞれCSSでのカスタマイズ例も載せています。
では始めてみましょう～。

こちらの方法ではドロップダウンメニューも使用可能ですが、グローバルナビをCSSでいじる場合はレイアウト崩れが起きる可能性があるのでご注意ください。（未検証）

事前準備

まずはSWELLでFont Awesome（アイコン）を使う為の設定を行います。すでに設定されている方は飛ばしてくださいね。

SWELL設定＞SWELL設定　の「Font Awesome」タブを開き、以下のように設定します。

これでアイコンを使うことが出来るようになります！

文字の左側にアイコン

さっそくグローバルナビにアイコンを使ってみたいと思います。
アイコンはショートコードを入力することで挿入することができます。例えば家のアイコンを挿入したい場合、

[icon class="fa-solid fa-house"]

こんな感じに入力することで、アイコンが表示されるようになります。→　

グローバルナビの文字の横にアイコンを挿入するには、先ほど  既存のグローバルナビを非表示にするで空のグローバルナビを作成したときと同じように、まず　外観＞メニュー　の画面を開きメニューを作成します。

左側の「メニュー項目を追加」からメニューを追加すると右側の「メニュー構造」に表示されるので、各メニューのナビゲーションラベルに先ほどのショートコードとお好きな文字（ここではHOME）を入力します。

「メニュー設定」の「グローバルナビ」にチェックを入れることをお忘れなく！

他のメニューも同様に設定します。
今回は４つのメニューに対してそれぞれ合うアイコンを選んでみました。

設定が完了するとこんな感じになります！

CSSカスタマイズ例

アイコンを少し大きくして色を変えてみました。これだけでちょっとかわいい感じになりますね。

#gnav .c-gnav i {
    color: #db7093;
    font-size: 1.2rem;
}

こちらはマウスを上に乗せたときだけ色が変わります。動きがあるデザインはサイトが豪華になるのでおすすめです。

#gnav .c-gnav a:hover i {
    color: #db7093;
    font-size: 1.4rem;
    transition: 0.5s
}

文字の上にアイコン

外観＞メニュー　の画面で、右上の「表示オプション」をクリックするとメニューが開きます。
その中の「説明」のチェックボックスをチェックしてください。

すると「メニュー構造」に説明を入れる欄が増えるので、こちらに文字（ここではHOME）を入力します。ナビゲーションラベルにはアイコンのショートコードのみにしてください。

するとアイコンが文字の上に表示されるようになります。
※文字が小さかったのでCSSで調整しています。

#gnav .c-gnav a .c-smallNavTitle {
    font-size:1rem;
}
#gnav .c-gnav a i {
    font-size:1.2rem;
}

ちーも

これは私的に結構お気に入りです

CSSカスタマイズ例

こちらはマウスを乗せた時のアニメーションを少し豪華にしてみました。
これもなかなかいい感じですね。

※背景はSWELLのカスタマイズ＞ヘッダー＞マウスホバーエフェクト　を背景グレーに設定しています。

#gnav .c-gnav a .c-smallNavTitle {
    font-size:1rem;
}
#gnav .c-gnav a:hover .c-smallNavTitle {
    color: #db7070;
    transition: 0.5s;
    margin-top: -1rem;
    font-size:1.2rem;
    display:block;
    font-weight: bold;
    z-index:999;
}
#gnav .c-gnav a i {
    font-size:1.2rem;
}
#gnav .c-gnav a:hover i {
    color: #b3b3b3;
    transition: 0.5s;
}

アイコンの探し方

アイコンはFont Awesomeの公式ページから好きなものを探すことが出来ます。好きなアイコンを表示したら、HTMLタグの赤枠で囲った部分をコピーして↓のショートコード内に貼り付けて使ってください。

[icon class="ここにいれてください"]

よく使いそうなアイコン

探すのがめんどくさい！という方向けに私が勝手にセレクトした、～使いやすそうなアイコン集～　を貼っておきます。
なんとそのままコピペで使えちゃう！らくちんです。

[icon class="fa-solid fa-house"]

[icon class="fas fa-book"]

[icon class="fa-sharp fa-solid fa-screwdriver-wrench"]

[icon class="fa-solid fa-envelope"]

[icon class="fa-solid fa-location-dot"]

[icon class="fa-solid fa-paper-plane"]

[icon class="fa-solid fa-cart-shopping"]

[icon class="fa-solid fa-magnifying-glass"]

[icon class="fa-brands fa-twitter"]

[icon class="fa-solid fa-download"]

[icon class="fa-solid fa-circle-user"]

[icon class="fa-solid fa-heart"]

[icon class="fa-solid fa-pen-nib"]

[icon class="fa-solid fa-truck-fast"]

[icon class="fa-solid fa-bell"]

[icon class="fa-solid fa-calendar-days"]

[icon class="fa-solid fa-gear"]

[icon class="fa-solid fa-bookmark"]

[icon class="fa-solid fa-feather"]

[icon class="fa-solid fa-camera"]

まとめ

今回はグローバルナビのメニューを画像にしたり、アイコンを使ってみたりしました。
アイディア次第でどんなメニューも作れそうですね！

ちーも

ぜひ色々と試してみてください。