| Embed HTML | GoogleマップのHTMLコードを埋め込む |
| Filter Grayscale | マップの色をカスタマイズ ON ：白黒マップを表示します OFF：カラーマップを表示します |
| Map Height | マップの高さをカスタマイズ、スマートフォンでは自動的に高さが調整されます。 |
現在、多くのサイトでは、FABs、バナー、AIチャットバナー、グローバルメニューなどのフローティングUIを採用しています。
灰色のエリアは フローティングUI です。
Green view はサイトの主要なコンテンツです。
サイトにこのようなUIが多すぎると、メインコンテンツが隠されてしまい、情報へのアクセスや閲覧が難しくなるため、ユーザーにとって使いにくいインターフェースとなります。特にスマートフォンでは、これらのUIが画面の約50%のGreen Viewを占めることがあり、それは非常に不適切で不便を引き起こします。
実際にスマートフォンでサイトにアクセスすると、Address BarやTab Barが追加されるため、残りのGreen Viewが非常に少なくなります。
スマートフォンでのユーザー行動に関するいくつかの研究に基づき、この機能は次のように問題を解決することができます：
通常、ユーザーがスクロールダウンすると、さらに情報を探したり、見たりしたい可能性があります。このとき、「Smart UI」機能が起動し、現在表示されているすべてのUIを画面外に押し出すことで、ユーザーがサイトの全コンテンツを妨げられることなく見ることができるようにします。
ユーザーがスクロールアップすると、別のコンテンツを探しているか、他の部分に移動したい可能性があります。この場合、「Smart UI」はUIを画面に引き戻し、ユーザーはサイト上の他のコンテンツに簡単にアクセスすることができます。
この機能は、画面からUIを押し出したり引き戻したりするだけで、非表示にはしないため、SEOには影響しません。
この機能は以下のUIに適用されます：
- Header Menu
- MV Banner, AI-Chat-Banner
- Fabs
この機能はサイトでデフォルトで有効になっていますが、この機能を使用したくない場合は、管理画面から無効にすることができます。
管理画面 ▶ Theme Settings ▶ UI Control ▶ Smart UI
このバージョンでは、ユーザーが入力したメールアドレスを確認するための新しいフィールドが追加されました。
「メールアドレス」フィールドと「Eメール確認」フィールドの内容が一致しない場合、
フォームは次のステップに進むことができません。
この2つのフィールドには誤入力を防ぐため、メールアドレスを手動で入力する必要があり、コピー＆ペーストはできません。
「お問い合わせ内容」フィールドに文字数カウント機能が追加されました。
これにより、ユーザーは入力可能な文字数を正確に把握することができます。
文字数の上限は1000文字で、ユーザーがテキストを入力すると残りの文字数が自動的に減少します。カウントが0になると、それ以上入力することはできません。
文字数の上限を増やしたい場合は、Devに連絡してください。
WPのカスタマイズモードにアクセスしてください。
カスタマイズ ▶ ウィジェット ▶ Floating Action Buttons
インターフェースは、各ボタンを簡単に区別できるように再設計されています。
| @Title | ボタンのタイトルを入力する。
Tips： PCとスマートフォンで異なるタイトルを表示したい場合は、以下の2つのタグを使用してください。PC： <span class=”pc-only”>PCタイトル</span> |
| @Active | ONにするとボタンが表示され、OFFにするとボタンがサイトから非表示になります。 |
| @ID | Add custom id for button. |
| @Class | Add custom class for button. |
@Type |
「LINK」 : ボタンをリンクとして設定し、ボタンをクリックするとそのリンク先に移動します。 |
| 「TEL」 : 電話番号にリンクするボタンを設定します。ボタンをクリックすると、その電話番号に通話が発信されます。 | |
| 「EMAIL」 : メールアドレスにリンクするボタンを設定します。ボタンをクリックすると、そのメールアドレスへのメール作成ウィンドウが開きます。 | |
| 「AI-CHAT」 : AIチャットへのリンクボタンを設定します。もしAIチャットをバナーとして表示したくない場合、このオプションを選択できます。ボタンをクリックすると、AIチャットのウィンドウが開きます。 もし AIチャットをバナーを設定している場合、この機能は使用できません。また、NOMOCa AI Chatへの API接続が完了していることを確認してください。 1ページにつき、AI-Chatを表示するための機能は1つだけ使用されるようにしてください。 |
|
| 「CUSTOM HTML」 : Add your custom code html, Your code will replace the button that you added. |
|
| @Add Icon | アイコンは、画像ライブラリから追加するか、コンピューターからアップロードするか、またはアイコンのURLを使用して追加することができます。 |
| @Icon size | アイコンのサイズをカスタマイズできます。 |
| @Add background color | ボタンの色を設定できます。HEXコードまたはRGBを使用して色を指定することができます。 |
| @URL | ボタンのリンクを入力する。 |
| @Phone number | 電話番号をボタンに入力してください。 スペース、ハイフン、またはその他の文字を追加しないでください。 入力前に、キーボードをローマ字入力に切り替えてください。 |
| @Email address | ボタンにメールアドレスを入力する。 |
| @Custom HTML | Add your custom code here. |
サイトとAPIを接続するcontent_copycheck_circle
サイトでAIチャットを使用するために最初に行うべきことは、サイトを「NOMOCa AI Chat」のAPIに接続することです。
管理画面 ▶ Theme Settings ▶ Webmaster Tools ▶ AI Chat
受け取った各「設定コード」ファイルの中で、「設定方法」には2つの重要な情報があります。それは、APIへのリンクのパスとIDです。
<script scr=”your-connection-to-api”></script>タグをAPIフィールドにコピーし、その後IDをIDフィールドにコピーして保存すれば、「NOMOCa AI Chat」への接続が完了します。
APIをコピーする際は、<script>タグで始まり、タグで終わる内容を正確にコピーしてください。
IDは“”内の内容だけをコピーし、“”やスペースをIDフィールドに入力しないでください。
間違った操作を行うと、AIチャットは動作しません。
AI-Chatバナーの設定content_copycheck_circle
以下の手順を実行する前に、サイトがAPIに接続されていることを確認してください。
WPのカスタマイズモードにアクセスしてください。
カスタマイズ ▶ ウィジェット ▶ AI-Chat Banner
| @Active | バナーの有効化または非表示 |
| @Close BTN | ユーザーがクリックするとバナーを非表示にできるボタンを追加します |
| @Only Home | ONにするとバナーはホームページにのみ表示されます。OFFの場合、バナーは全てのページに表示されます |
| @PC Banner | デスクトップ用画像バージョン |
| @SP Banner | スマートフォン用画像バージョン。PC版とスマートフォン版のバナーが同一でレイアウトに変更がなく、サイズだけが異なる場合は、PC版の画像を設定するだけで問題ありません。 |
| @Banner Width | バナーサイズの設定（入力後、自動的にデバイスごとに適したサイズに調整されます） |
| @Position | バナーの位置を設定し、画面の左側または右側に表示します。 |
| @Bottom | バナーの下部の余白をカスタマイズします。デフォルトでは、バナーは画面の下部に設定されています。 |
| @Left , @Right |
左または右の余白をカスタマイズします。@Positionで選択した位置に応じて、@Leftまたは@Rightのフィールドが表示されます。 |