【SWELL】アイコンを表示させる方法とFont Awesomeアイコンの使い方

どうやってSWELLでアイコンを表示させればいいの?

ブログを始めると、サイトデザインにもこだわりたくなりますよね?

とはいえWebデザインの知識がなくてどうしたら分からない。。。私も同じでした。初心者でも簡単にデザインを変更できる方法があります。テキストだけだとちょっと味気ないなと思ったら、メニューにアイコンを表示させてみましょう。

WordPressテーマ「SWELL」を使っている人向けの記事です。

本記事の内容
  • SWELLで簡単に使えるアイコン一覧
  • グローバルナビ(ヘッダーメニュー)にアイコンを表示させる方法
  • スマホ用固定フッターメニューにアイコンを表示させる方法
  • 【まとめ】メニューにアイコンを表示させてみて
目次

SWELLで簡単に使えるアイコン一覧

SWELLでは、標準で使用できるアイコンと、「Font Awesome」のアイコンの2種類が簡単に使用できるのでブログ初心者におすすめです。公式サイトにも設定方法がのっていますが、初心者は「SWELL設定から読み込む方法」が一番簡単です。

事前に「Font Awesome」を使用するために、SWELL設定を変更しておきましょう。

SWELLの詳しい使い方はこちら⇒https://swell-theme.com/

SWELLで使えるアイコン一覧

アイコンクラス名アイコンクラス名
icon-amazonicon-codepen
icon-facebookicon-feedly
icon-githubicon-googleplus
icon-hatebuicon-instagram
icon-lineicon-medium
icon-pinteresticon-pocket
icon-rssicon-tumblr
icon-twittericon-wordpress
icon-youtubeicon-swell
icon-phoneicon-info
icon-light-bulbicon-cart
icon-thumb_downicon-thumb_up
icon-personicon-mail
icon-downloadicon-megaphone
icon-penicon-more_arrow
icon-batsuicon-check
icon-postedicon-modified
icon-searchicon-close-thin
icon-menu-thinicon-alert
icon-hatenaicon-index
icon-arrow_drop_downicon-arrow_drop_up
icon-flagicon-settings
icon-chevron-small-downicon-chevron-small-left
icon-chevron-small-righticon-chevron-small-up
icon-bookicon-minus
icon-plusicon-lock-closed
icon-lock-openicon-quill
icon-homeicon-file-empty
icon-booksicon-file-picture
icon-file-text2icon-file-video
icon-file-musicicon-folder
icon-file-zipicon-bubble
icon-price-tagicon-quotes-left
icon-bubblesicon-link
icon-quotes-righticon-eye
icon-attachmenticon-star-empty
icon-bookmarksicon-star-full
icon-star-halficon-blocked
icon-heart
icon-share
公式サイトより引用

SWELL設定から読み込む方法

STEP
SWELL設定から「Font Awesome」タブ「CSSで読み込む」をチェック

「変更を保存」をおせば超簡単。下準備OKです。※デフォルトでは「読み込まない」になっています。

グローバルナビ(ヘッダーメニュー)にアイコンを表示させる方法

SWELL公式サイトにグローバルメニュー(ヘッダーメニュー)の設定方法があるので設定がまだの場合は設定をしましょう。

header-menu
STEP
グローバルナビメニューを選択

WordPress管理画面「外観」「メニュー」から「グローバルナビ」を選択

global-navi-1
STEP
ナビゲーションラベルにショートコードを入力

アイコンを呼び出すショートコードを、「メニュー名」の前に入力

例:SWELLアイコン

icon-swell-1
icon-swell-2

標準で使用できるアイコンでクラス名を確認し、入力するだけで反映されます。

スマホ用固定フッターメニューにアイコンを表示させる方法

SWELL公式サイトにスマホ用の固定フッターメニューの設定方法があるので設定がまだの場合は設定をしましょう。

footer-menu-1
STEP
スマホ用固定フッターメニューを選択

WordPress管理画面「外観」「メニュー」から「スマホ用固定フッター」を選択

footer-menu-2
STEP
表示オプションタブを開く

右上表示オプションタブを開き「説明」にチェック

クラス名を説明欄に入力してアイコンを表示させます。デフォルトでは説明欄は非表示となっているためまずは表示させましょう。

footer-menu-3
STEP
説明欄にクラス名を入力

スマホ用固定フッターメニューにアイコンを表示させる場合は、説明欄にクラス名を入力するだけでOK

例:SWELLアイコン

class-icon-swell

【まとめ】メニューにアイコンを表示させてみて

サイトのデザインを変えたいと思ってもWebデザインの知識がないブログ初心者にとっては、SWELLさえ入れておけば簡単に装飾ができるのでありがたい機能だと思います!

この記事では、SWELLでアイコンを表示させる方法についてご紹介しました。購入後アイコンを表示させたいと思っていた人や、SWELLを購入しようか検討しているブログ初心者の方にとって、少しでも参考になればと思います。

最後まで読んで頂きありがとうございました!

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!

コメント

コメントする

CAPTCHA

目次