Main Visual Setting (CURRENT PAGE)

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

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)設定する

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

H2 Titlecontent_copycheck_circle

MV内のページタイトルH2の色と文字揃えをカスタマイズできます。