【CARAT専用】JINアイコンを使ったスマホスライドメニューカスタマイズ

今回のアップデート（Ver 1.1.6）で新しくスマホスライドメニューのデザインを追加しました。

JINでは独自にアイコンを設定することができますが、せっかくアイコンを追加しているのに小さくて見にくかったり、スライドできることに読者が気づかなかったりと勿体無い部分が少し多かったりします。

ということで今回はCARAT仕様にスライドメニューをカスタマイズしてみました。

JINのアイコンを使うことがカスタマイズの前提になっています。fontawesomeでの確認はしていないので予めご了承ください

Contents

スマホスライドメニューのデザイン設定方法

WordPressの管理画面より「外観」→「カスタマイズ」と飛ぶと、「サイトデザイン設定」という項目が見つかるかと思います。

サイトデザイン設定をスクロールしていくと、「【CARAT】スマホスライドメニューのデザイン」という項目が見つかるかと思います。

ここで好きなデザインに変更してください！

デフォルトデザインはその名の通り、今までのJINのデザインと同様のデザインです。

特にここにデザインを変える必要のない方は「デフォルト」を選択すると良いでしょう！

今回追加したデザインがこのスタイルになります。

アイコンをより大きく見やすくしながら、各リンクのタップ領域を大きくしています。これにより、タップしやすくなり読者にとってわかりやすい導線を引くことができます。

りょうた

カテゴリ一覧ページ等を表示させておくと分かりやすいね！

WordPressの管理画面より「外観」→「メニュー」へいき、スライドメニューの項目を表示させてください。

スライドメニューを表示できたら、メニューに設定している投稿や固定ページの中を開きます。

ここの概要（もしくは説明）というところにJINアイコンのコードを追加していきましょう！

アイコンを設定しないとデザインが崩れてしまうので全てのメニューにアイコンを設定するようにしてください。

りょうた

好きなアイコンを選んでわかりやすいスライドメニューを作成しよう！

上記の写真のようにたまに概要（説明）が表示されない方が多くいらっしゃいます。

りょうた

概要が表示されません…(´；ω；｀)っていうお問い合わせがかなり多かったよ！

そんな時は「表示オプション」というところを見直してみると解決できるかと思います。

同じメニューの設定画面の上の方に「表示オプション」という項目が見つかるかと思います。ここをクリックすると写真のような感じでメニューのページ内に表示する内容を設定する項目が見つかるかと思います。

ここの「概要（WordPressのバージョンによっては説明）」というチェックボックスがあるのでここにチェックを入れた状態で確認してみると、問題なく設定できるようになるかと思います。

WordPressテーマ「JIN」専用デザインプラグイン『CARAT』

「CARAT」は大人可愛いを追求した女性向けデザインプラグインです。

WordPressテーマ「JIN」の機能性と「CARAT」のデザインでより読み手に感動を与えるプラグインを作りました。

「自分のブログが好き」

そんな人が1人でも増えてくれたらと心から願っています。