『図解』SWELL メニューのフォントサイズを変更する方法

あなたにお伝えしたいこと
  1. メニューのフォントサイズを大きくする
  2. メニューにアイコンを表示する
注意
  1. 利用しているテーマはSWELLです
  2. CSSの設定を変更するため自己責任にてお願いいたします
目次

SWELL メニューのフォントサイズを大きくする

デフォルトのフォントサイズではスマホで表示すると小さくて見づらいです
SWELLでは「外観」>「カスタマイズ」>「追加CSS」に設定を追加することで簡単にフォントサイズを変更できます

変更前

メニューの文字が小さくて見づらいです泣

変更後

文字が大きくなって押しやすくなりました♪

STEP
追加CSS画面を開きます

「外観」>「カスタマイズ」>「追加CSS」を開きます

STEP
下記のコードを追加します
追加CSS

.p-spHeadMenu .menu-item {
font-size:17px;
}

STEP
スマホで表示させながらフォントサイズを調整します

下記の赤字箇所を調整するとメニューのフォントサイズが変化します

CSS

.p-spHeadMenu .menu-item {
font-size:17px;
}

 SWELL公式サイト

SWELL メニューにアイコン(FontAwesome)を表示する

メニューにアイコンをつけてオシャレにする方法です
好きなアイコンをFontAwesomeで検索して利用することができます

先にSWELLでFontAwesomeが利用できるように設定をお願いします

グローバルメニューをまだ設定されていない場合は下記の記事に沿って設定をお願いします

STEP
「外観」>「メニュー」を開く

グローバルナビを設定しているメニュー名を選択します

STEP
グローバルナビを設定しているメニューを選択します
STEP
メニューの先頭にアイコンを設定します

ナビゲーションラベルにメニュー名が表示されています
メニュー名の前にFontAwesomeでアイコンを追加します

ここでは「」チャートエリアのアイコンを「投資」の前に表示させます

ナビゲーションラベルに下記のコードを記載します

ナビゲーションラベル

<i class=”fas fa-chart-area”></i>投資

実際の設定画面
SWELL 設定画面
STEP
スマホで表示を確認します

しっかりと「」チャートエリアのアイコンが「投資」の前に表示されてますね

 

SWELLの設定方法まとめ

さとしんさんのSWELL設定まとめ記事にわかりやすくまとまっています
設定方法を公式マニュアルから網羅されていて、わかりやすいです

目次
閉じる