SIM-P（Slide-in menu plugin）の基本機能の紹介
SIM-Pとは何？
SIM-P は、Cocoon を“ブログ”ではなく “ホームページ”として使いたい方のために開発した、モバイル導線特化の UI 再設計プラグインです。
CTA（行動導線）をノーコードで設定できる ことが最大の特徴で、
スマートフォン向けの見せ方やメニュー動作を、管理画面から簡単に整えることができます。
SIM-Pの特徴
WordPress ではオリジナリティを出そうとすると「テーマ」に注目しがちですが、
テーマは“服”のように見た目を整える役割が中心で、機能そのものが大きく変わるわけではありません。
Cocoon もレスポンシブ対応はしていますが、元々は PC 向けのブログテーマ（と私は考えています）。
現在のスマホ中心の時代では、モバイル前提とは言いにくくなってきました。
最近は STUDIO や Googleサイト などの新しいサービスも増え、
それらと比べると Cocoon の UI には少し古さを感じる場面もあります。
それでも Cocoon は、無料とは思えない完成度と構造の美しさを持つ素晴らしいテーマです。
私自身、7 年近く使い続けてきました。
だからこそ、
「ブログだけでなく、ホームページとしても使える Cocoon」
を目指して、スマホ導線と CTA を強化し、
誰でもノーコードで使えるように設計したのが SIM-P です。
SIM-Pにできること
➀スライドインメニュー化
スマホでも使いやすい、今どきの“横から開くメニュー”を実現できます。
➁メニュー内はウィジェットで変更可能
スライドインメニュー内のナビゲーションやロゴは、
外観→ウィジェット内に「スライドインメニュー」とう項目ができているので、好きなコンテンツをいれると出てきます。
➂管理画面でCTAの設定
ダッシュボードに「SIM-P」というメニューを作ってあるので、それぞれ対応してる部分を埋めたら終了。
（詳しい説明は後ほど。）
SIM-Pの設定方法
➀SIM-P起動
SIM-Pをインストールして有効化すると、管理画面に［SIM-P］のメニューがあると思います。
そこをポチっとしてください。
すると、こんな感じの管理画面が出てきます。（画面は開発中のものなので若干違う可能性あります）
各パーツの説明
モーダル
モーダル：モーダル（modal）とは、画面上のユーザーの操作を一時的に止めて注目を集めるためのウィンドウなどを指すそうです。
この場合だとメニュー本体の白い部分で、メニューMODE（モード）ということですね。
幅：白い部分の幅ですね。
スマホで使うなら300～320px（ピクセル）推奨
色：モーダルの色です。（カラーピッカー）から選んでお使いください。
透過率：色の透過率です。100が全く透けず、0が透明になります。
※px（ピクセル）は、画面上の点の大きさを表す単位です。
※写真は開発中の為1が不透明、0が透明。0.5で半分
モーダル外暗転
メニューを開くと背景が黒の50％でマスキングされて、メニューに視線を集めます。
メニューモードは✖ボタンか暗転部をタッチ（PCはクリック）すると解除されます。
ハンバーガー
この三本線みたいなマークこれがいわゆるハンバーガーマークメニューを開くときに使われます。
✖ボタン
メニューを閉じるボタンです。
（メニュー外の暗転した部分をタッチしてもメニューは閉じます。）
ここでちょっと簡単に用語説明
TOP（トップ）
上端から何ピクセル空けるかを指定します。
ぴったりくっつけたいときは 0、100px 空けたいときは 100 と入力します。
RIGHT（ライト）
右端から何ピクセル空けるかを指定します。
LEFT（レフト）
左端から何ピクセル空けるかを指定します。
BOTTOM（ボトム）
下端から何ピクセル空けるかを指定します。
WIDTH（ウィズ／幅）
要素の横幅を指定します。
数値の後に単位（px, %, vwなど）を付けて入力します。
HEIGHT（ハイト／高さ）
要素の高さを指定します。
数値の後に単位（px, %, vhなど）を付けて入力します。
以下はホームページの見た目（位置やサイズ）を決めるためのCSS（スタイル指定）用語です。
CSS（シー・エス・エス） とは “Cascading Style Sheets” の略で、ホームページの レイアウトやデザインを指定するための言語 です。
専門的な知識がなくても、「上・右・左・下・幅・高さ」という意味で覚えておけば大丈夫ですが、最初はびっくりすると思うので、
今後のプラグインの設定画面では、ＣＳＳの知識がなくても設定できるようにしていくつもりですが、今回のリリースには改良が間に合わなかったので簡単に解説しておきます。
CTAリボン
CTAリボンの各設定項目。文言とカラーも設定できます。
リボンをクリックするとメニューが開いてCTAバナーが展開されます。
CATバナー
CTAバナーの各設定と文言、リンク先が設定できます。
電話番号が入っていれば、電場番号のリンクを優先するようにしてます。
※リンクURLを使いたい場合は、電話番号を空欄にしておいてください。
標準ロゴと標準ナビ／カスタムロゴ
標準ロゴ／標準ナビをONにすると標準ロゴと標準ナビが表示されます。
カスタムロゴONにするとカスタムロゴが表示されます。
カスタムロゴの設定
モーダル内のメニューの設定方法
➀好きなメニューを自分で作成
➁ダッシュボードのメニューに【外観】→【ウィジェット】を選択
➂スライドインメニューの項目に【ナビゲーションメニュー】→自分で作成したメニューを選択。
➃表の画面に戻りメニューを開いたときに表示されていれば完成
疑問点などありましたら、お問い合わせ頂ければと思います。