ライティング力が爆上がりしたライティング講座はこちら Click

SWELLのグローバルナビにアイコンをつけてみよう【SWELLカスタマイズ】

※当サイトはアフィリエイトリンクを含みます。記事内容は公平さを心がけています。
初心者さん

SWELLでグローバルナビにアイコンを付けたいけど……どうすればいいの!?

こんな悩みはありませんか?

最近JINからSWELLへ移行した私。
まだまだ手探り状態ですが、SWELLのカスタマイズについて少しずつ学んでいることを備忘録として残しておきます。

「SWELLのグローバルナビにアイコンを付けてかわいくしたい!」という人は、ぜひ参考にしてくださいね。

\ ブログ更新がめちゃくちゃ楽しくなるよ! /

SWELLのダウンロード方法やJINからの移行方法については、こちらの記事で詳しく紹介しています。

この記事を書いた人
さとち

海外在住の40代・男児2人のママ

40代で未経験からWebライターに挑戦。回り道をしてようやく自分のペースで働けるライティング力を手に入れる

Webライター×ワードプレスブログでお金&自由な時間を手に入れる情報を発信中

目次

SWELLのグローバルメニューにアイコンをつけたい!

グローバルナビとは、ブログやサイトの一番上に表示されるメニューのこと。

このブログでは、SWELLに移行した直後はこんな感じでした↓

さとち

文字が並んでいるだけでちょっと寂しい……

以前、JINを使っていたときにはこんな感じ……↓

JINのかわいらしい雰囲気が好きだったので、SWELLでももうちょっとかわいくしたい!
……というわけで、グローバルナビにアイコンをつけてみることにしました。

SWELLのグローバルナビにアイコンをつける手順3ステップ

SWELLのグローバルメニューにアイコンをつける手順は、以下の3ステップ。

  1. 「外観」⇒「メニュー」ページへいく
  2. 「グローバルナビゲーション(グローバルナビ)」を選ぶ
  3. 「ナビゲーションラベル」に好きなアイコンコードを追加する

順番に見ていきましょう!

「外観」⇒「メニュー」ページへいく

左のメニューから「外観」⇒「メニュー」をクリック。
メニューのページへいきましょう。

2. 「グローバルナビゲーション(グローバルナビ)」を選ぶ

「編集するメニューを選択:」から「グローバルナビゲーション(グローバルナビ)」を選び「選択」をクリック。

3. 「ナビゲーションラベル」に好きなアイコンコードを追加する

アイコンを入れたいメニューの「▼」をクリックすると、メニューの詳細を設定できます。

ナビゲーションラベルに書かれているメニュー(ここでは「Webライター」)の左端にアイコンタグを入れ「メニューを保存」すればOK!

アイコンタグはになります。
XXXXの部分に入れたいアイコンの名前を入れればOK!

※たとえば、ペンのアイコンを入れたい場合は「XXXX」の部分に「icon-pen」と入れましょう。
SWELLで使えるアイコン一覧については公式サイトをご覧ください♪

「レビュー」で見てみると……

メニューの左端にアイコンがはいりました。やった~!

グローバルナビにアイコンを入れたらかわいくなった!

すべてのメニューにアイコンを入れたものがこちら↓

文字だけだったときと比べると、少しかわいらしくなりました♪

とっても簡単なので「SWELLのグローバルナビにアイコンを入れたい!」という人はぜひ参考にしてくださいね。

\ ブログ更新がめちゃくちゃ楽しくなるよ! /

この記事を書いた人

海外在住の40代主婦。男児2人のママ。未経験から遠い回り道をして、自分で稼げるライティング力を手に入れました。現在はWebライター&WordPressブログで毎月収入を得ています。
いろんな理由で在宅ワークを探している人に、Webライター&ブログで自由な時間と収入を得る方法を発信中!
好きなものはお酒・おいしいもの・旅行・レストラン巡り♪

目次