今回のアップデート(Ver 1.1.6)で新しくスマホスライドメニューのデザインを追加しました。
JINでは独自にアイコンを設定することができますが、せっかくアイコンを追加しているのに小さくて見にくかったり、スライドできることに読者が気づかなかったりと勿体無い部分が少し多かったりします。
ということで今回はCARAT仕様にスライドメニューをカスタマイズしてみました。
JINのアイコンを使うことがカスタマイズの前提になっています。fontawesomeでの確認はしていないので予めご了承ください
スマホスライドメニューのデザイン設定方法
WordPressの管理画面から「外観」→「カスタマイズ」へ

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

サイトデザイン設定をスクロールしていくと、「【CARAT】スマホスライドメニューのデザイン」という項目が見つかるかと思います。
ここで好きなデザインに変更してください!
デザインについて
デフォルトデザイン
デフォルトデザインはその名の通り、今までのJINのデザインと同様のデザインです。
特にここにデザインを変える必要のない方は「デフォルト」を選択すると良いでしょう!
CARATスタイル1

今回追加したデザインがこのスタイルになります。
アイコンをより大きく見やすくしながら、各リンクのタップ領域を大きくしています。これにより、タップしやすくなり読者にとってわかりやすい導線を引くことができます。
CARATスタイルの設定方法
管理画面より「外観」→「メニューへ」

WordPressの管理画面より「外観」→「メニュー」へいき、スライドメニューの項目を表示させてください。
概要(説明)にJINのアイコンを追加する

スライドメニューを表示できたら、メニューに設定している投稿や固定ページの中を開きます。
ここの概要(もしくは説明)というところにJINアイコンのコードを追加していきましょう!
アイコンを設定しないとデザインが崩れてしまうので全てのメニューにアイコンを設定するようにしてください。
概要(説明)が表示されない人へ

上記の写真のようにたまに概要(説明)が表示されない方が多くいらっしゃいます。
そんな時は「表示オプション」というところを見直してみると解決できるかと思います。
表示オプションの設定を見直してみる

同じメニューの設定画面の上の方に「表示オプション」という項目が見つかるかと思います。ここをクリックすると写真のような感じでメニューのページ内に表示する内容を設定する項目が見つかるかと思います。
ここの「概要(WordPressのバージョンによっては説明)」というチェックボックスがあるのでここにチェックを入れた状態で確認してみると、問題なく設定できるようになるかと思います。

「CARAT」は大人可愛いを追求した女性向けデザインプラグインです。
WordPressテーマ「JIN」の機能性と「CARAT」のデザインでより読み手に感動を与えるプラグインを作りました。
「自分のブログが好き」
そんな人が1人でも増えてくれたらと心から願っています。