- 開発費1億円・期間8年間!あなたがやりたい事が全てできる超高機能!
- ステップ配信が送信数無制限!
- シナリオ別リッチメニューテンプレート+アイコン754種類進呈
- 友だち自動増加システム(独自ASP機能)搭載!もちろん無料
- 上記機能が全て無料!以下のボタンよりアカウント登録!他ツールからの乗り換えも可能
【SWELLワードプレステーマ】スマホ開閉メニュー(スライドメニュー)にアイコンを表示させる設定方法 〜初心者向け〜
本記事ではWordPressテーマSWELLのスマホ開閉メニュー(スマホ用スライドメニュー)にアイコンを表示させる設定方法をご紹介します。
手順通り進めていってみてくださいね。
リンク先 : https://swell-theme.com
当ブログはSWELLのブロックエディタで作成しています。
ブログ初心者さんがSWELLを購入したものの、何からカスタマイズしていったらいいのか分からないという方のために、とりあえず先に見栄えを良くして「ブログを書く」というモチベーションを保つためにSWELL設定の主要ポイントをお伝えしています!
Him
超初心者さんに向けて書いているので、分からない専門用語は一切省きます。安心して読み進めてみてくださいね。
記事の内容
スマホ開閉メニューとは?
スマホの角に配置されているのハンバーガーメニューアイコンをクリックすると表示されます。
SWELLではスマホ開閉メニューと呼ばれていますが、JINやAFFINGERなどの他テーマではスマホスライドメニューと呼ばれているようで、私も以前はJIN、アフィンガーなどを使っていたのでスライドメニューという名称で認識していました。
昔はハンバーガーメニューという言葉も使っていた記憶がありますが、今はあまり使われていないのかもしれません。
スマホ開閉メニューにはアイコンをつけたいが、グローバルナビメニューにはアイコンを表示させたくない人向けの設定方法
グローバルナビとはここ
スマホではアイコンをつけたいんだけど、パソコンでは文字だけですっきりさせたい!
まずは【グローバルナビ】とは別に【スマホ開閉メニュー】を作る必要がある
これまで私は、グローバルナビにメニューを作ったときに、わざわざスマホ開閉メニューを作りませんでした。
何故なら、グローバルナビにメニューを作っただけで、スマホ開閉メニューにも自動的に同じものが反映されて表示されていたからです。
画像のようにグローバルナビを作ったときに、チェックをグローバルナビのみで、スマホ開閉メニュー内に入れてなくても、自動的に【スマホ開閉メニュー内】にはまったく同じメニュー内容が表示されています。
グローバルナビとスマホ開閉メニュー、同じものを表示させたい方には自動的に表示されるので楽かもしれません。
外観→メニュー
新しいメニューを作成しましょう。をクリックし、メニュー名にはわかりやすいものをつけ、【スマホ開閉メニュー内】にチェックを入れたら、右下のメニューを作成をクリックします。
このとき、スマホ用ヘッダーにも自動的にチェックが入ってしまう場合は、スマホ用ヘッダーのチェックを外して、右下のメニューを保存をクリックしてください。
スマホ用ヘッダーにも同じようにアイコンをつけたメニューを表示させたい場合は、チェックはそのままでいいですが、私はスマホのヘッダーにはメニューを表示させたくないので、【スマホ開閉メニュー】のみを独立させて作成しました。
メニューの中身は、グローバルナビで作っていたものと同じものをスマホ開閉メニュー内に作りました。
少し手間ですが、アイコンを表示させたい箇所とさせたくない箇所があるので仕方ありません。
アイコンを表示させるには?
スマホ開閉メニューの編集画面にて
ナビゲーションラベルの部分に、画像のように入力します。
[icon class="アイコンクラス名"] のアイコンクラス名の部分に、icon-homeと入力すれば、家の形のアイコンが表示されます。
[icon class="icon-home"] と書いてスペースをあけてHOMEと書いています。
アイコンとHOMEの部分にスペースがあった方が見栄えが良かったので、私は半角2つ分あけています。
SWELL標準で使えるアイコンのリストはこちらのSWELL公式サイトに載っているので、好きなものをコピペして使います。
SWELLで使えるアイコンの一覧 | WordPressテーマ SWELL
ここでは、SWELLでフォントファイルとして読み込んでいるアイコンを一覧で紹介しています。 SWELLで標準で使用できるアイコンフォントは、IcoMoonで作成しています。 Font …
SWELL公式サイトにショートコードのことも書かれているのであわせてご参照ください。
アイコンを簡単に呼び出せるショートコードの使い方 | WordPressテーマ SWELL
SWELLでは、数種類のアイコンをフォントとして読み込んでいます。(例: / / ) このページでは、これらのアイコンを文中で簡単に呼び出すためのショートコードの使い方を…
SWELLで使えるアイコンの一覧に載っていないアイコンを使いたい場合
最初にSWELL側の設定が必要になってきます。
ダッシュボード→SWELL設定→設定ページへ
Font Awesomeの読み込み方でCSSで読み込むにチェックを入れて変更を保存。
他にも使い方はあるようですが、私はこの方法が一番簡単なのでこれで使っています。
こちらもSWELL公式サイトに使い方が載っています。
SWELLで「Font Awesome」のアイコンを使う方法 | WordPressテーマ SWELL
このページでは、WordPressテーマ SWELLで「Font Awesome」のアイコンを使う方法について解説していきます。 ① Font Awesomeファイルを読み込ませよう まずは、Font Awesom…
SWELL標準のアイコン欄には載ってないので、Font Awesome公式サイトに行き、検索窓からDogなどで検索すると犬の肉球のアイコンが出てくるので、そのアイコンのクラス名をコピペします。
それを、前述のスマホ開閉メニュー編集画面に入力します。
スマホ開閉メニューの編集画面にて
[icon class="アイコンクラス名"] のアイコンクラス名の部分に、fas fa-pawと入力すれば、肉球の形のアイコンが表示されます。
[icon class="fas fa-paw"] と書いてスペースをあけて犬と書いています。
スマホでメニューを開いたときに、アイコンがあるとぱっと見何に関して書かれてあるか認識しやすいので読者ファーストにもなりますよね♪
以上、WordPressテーマSWELLのスマホ開閉メニュー(スライドメニュー)にアイコンを表示させる設定方法でした!
その他のSWELL設定関連記事
一度挫折した初心者ブロガーが【SWELL ワードプレステーマ】にたどり着いた経緯
こんな疑問やお悩みにお応えします! ブログ初心者におすすめのワードプレス有料テーマSWELLが気になる。初心者目線からの決め手が欲しい! Himです♪@himlog_com 初心者…
リンク先 : https://swell-theme.com
当ブログはSWELLのブロックエディタで作成しています。
@himlog_com