Grits JP | PhamDocs

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」に設定した場合、この機能は表示されません。