Grits JP | PhamDocs

AI-Chatを設定する(Beta_v1)

phamcuong96

schedule2024.12.18

AI-Chat Feature Grits JP Grits-Themes-2.1

サイトと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のフィールドが表示されます。

Main Visual Setting (CURRENT PAGE)

phamcuong96

schedule2024.12.18

Feature Grits JP Grits-Themes-2.1 Main Visual

管理画面　▶　固定ページ、投稿

Main Visual Setting（CURRENT PAGE）の設定は、現在編集しているページまたは投稿にのみ適用されます。
編集が行われていない場合、デフォルト設定が適用されます。

デフォルト設定と異なるMVに変更したい場合は、変更したい設定を選択してください。その後、該当の機能が表示されます。

例：ページAでMVをデフォルトの画像ではなく、動画プレイヤーに変更したい場合を考えてみましょう。

設定操作は、デフォルト設定と同じ方法で行います。

Edit Mode	Modeの設定手順
Edit Height	Heightの設定手順
Edit Mask	Maskの設定手順
Edit H2 Title	H2 Titleの設定手順

Add Contents (HTML)

Your custom HTML code will replace the CATCH layer and be displayed as the outermost layer.

Main Visual Default Setting (ALL PAGES)設定する

phamcuong96

schedule2024.12.17

Feature Grits JP Grits-Themes-2.1 Main Visual

管理画面　▶　Theme Settings　▶　Theme General Settings

「Main Visual Default Setting (ALL PAGES)」の設定は、サイト全体に適用されます。

Modecontent_copycheck_circle

Color

色のみのMain Visualを設定することができます。

HEXまたはRGBのカラ―コードを使用し、色の濃淡をカスタマイズすることも可能です。

Image

1つの画像を使用してMVを設定します。

異なるデバイスに最適化するため、1つの画像には3つのバージョンを追加できます。
もし異なるバージョンの画像をお持ちで、それを設定したい場合は、Desktop、Laptops、Smartphoneの項目に従って設定してください。

画像のサイズについては、可能であれば推奨サイズ（recommended）に合わせて準備してください。

Desktopバージョンは必須ですが、残りの2つのバージョンは必要ない場合、省略できます。

Carousel

MVを複数の画像を表示するためのCAROUSELとして設定します。

CAROUSELに追加したい各画像は1つのスライドとして扱われ、表示したい画像の数に応じてスライドを追加してください。
例えば、3つの画像を追加したい場合は、3つのスライドを追加します。

各スライドに画像を設定する方法は、「MODE Image」の設定と似ています。

CAROUSELには、さらに2つの設定オプションがあります：

「Fade」：スライド間の切り替え効果を変更します。
「Speed」：次のスライドに移動する速度を調整します。

「Fade」OFF

「Fade」ON

「Speed」2000ms (milliseconds)

「Speed」の数値が小さいほど、スライドの切り替え速度が速くなります。

Videos

MVをビデオプレーヤーとして設定します。

DesktopとSmartphone用に2つのバージョンのビデオを追加できます。
追加可能なビデオ形式は以下の通りです：MP4、WebM、Ogg、AVI、FLV、MKV、MPEG（推奨はMP4です）。

ビデオのサイズについては、以下の設定を推奨します：

Desktop: フルHD 1920 x 1080
Smartphone: フルHD 1080 x 1920

Desktopバージョンは必須です。もしSmartphone用のバージョンが必要ない場合は、省略できます。

Heightcontent_copycheck_circle

MVの高さを設定します。

MVの高さを設定するための3つのオプションがあります：

「DEFAULT」	初期デザインに基づいて高さが自動的に設定されます。
「PIXEL」 (px)	画面上の1つのドットを表す単位です。
「VIEWPORT HEIGHT」 (vh)	ブラウザウィンドウの高さの1%に相当する単位です。

Maskcontent_copycheck_circle

MVは3つの独立したレイヤーが重なり合う構成で設計されています。

「MODE」	一番内側のレイヤーで、MVのモード（画像、動画など）を設定します。
「MASK」	MODEとCATCHの間にある半透明のレイヤーで、色をカスタマイズできます。このレイヤーはデフォルトでは非表示で、アクティブ化することで表示されます。
「CATCH」	一番外側のレイヤーで、テキストコンテンツを含みます。

場合によっては、MODEレイヤーの画像や動画が高いコントラストを持つことで、明るすぎたり、CATCHレイヤーのテキストと色調が近くなることがあります。これにより、CATCHのテキストが見えづらく、読みにくくなることがあります。

この問題を解決するために、「MASK」機能を使用して適切な色を追加し、MODEレイヤーにオーバーレイすることで、テキストを際立たせながら、背景の画像や動画を引き続き表示できます。

以下は具体的な例です：

このMVでは、テキストが非常に見えづらく、読みにくくなっています。

ここでは、MASKに黒色 RGB(0,0,0) を設定し、透明度を 0.4 にすることでテキストを際立たせています。
さらに、背景画像や動画に対してテキストを強調できる色を自由に選択することも可能です。

透明度を下げないと、MASKの設定した色がMODEレイヤーを完全に覆い隠してしまいます。
この機能をMVの背景色（background color）の設定に使用しないでください。MVに色のみを設定したい場合は、「MODE Color」をご利用ください。
「MODE」を「Color」に設定した場合、この機能は表示されません。