ヘッダーメディア(カスタムヘッダー)画像・動画の設定方法

coding

サイトのヘッダーに画像・動画を表示する「ヘッダーメディア」の設定方法について紹介します。

※yStandard v2.7.0以降で設定できる機能になります。

ヘッダーメディアの設定方法

ヘッダーメディア(カスタムヘッダー)の画像・動画はテーマカスタマイザーの「ヘッダーメディア」から設定が可能です。

ヘッダーメディアの設定方法

ヘッダーメディアの設定で画像や動画を設定することにより、TOPページを表示した際にサイトヘッダーの下に設定した画像を表示することができます。

TOPページに大きく画像を表示できるようになります

ヘッダーメディアの設定の各項目

ヘッダーメディアで設定出来る項目について解説します。

[ys]ヘッダーメディア用ショートコード

ヘッダーメディアショートコード

ヘッダーメディア表示エリアにショートコードを使った表示ができます。

画像スライダーやコンテンツスライダーの編集・ショートコードで利用できるプラグインと合わせて使うことで、よりリッチなTOPページが作れます。

スライダー作成プラグインとの合わせ技でリッチなTOPページを作る

ヘッダー動画

ヘッダーメディアで動画を使う

WordPressサイトに動画ファイル(.mp4)をアップロードするかYouTubeのURLを入力すると動画を表示することができます。

ヘッダー画像

ヘッダー画像を設定する

TOPページのヘッダーに表示する画像を選択します。

画像をアップロードするか、すでにアップロード済みの画像を選択します。

選択した画像の切り抜き画面が表示されるので、好みに応じて切り抜きエリアをドラッグして変更し、「画像を切り抜き」ボタンをクリックします。
アップロードした画像をそのまま使う場合は「切り抜かない」ボタンをクリックしてください、

画像の切り抜きが可能

ヘッダー画像には複数画像を設定し、表示する画像を選択することができます。

複数画像を設定し、表示する画像を選択できる

現在のヘッダー画像の下に表示されている「新規画像の追加」ボタンでヘッダー画像に設定する画像を選択します。

追加画像の選択が完了すると「アップロード済み」の画像に追加されます。
ヘッダー画像として表示したい画像をクリックすると「現在のヘッダー」に選択され、TOPページにも画像が表示されます。

「アップロード済みヘッダーをランダム表示」ボタンをクリックすると、アップロード済みの画像がページ読み込み時にランダムに選択されて表示されます。
(スライド表示等にはなりません。)

アップロード済みの画像の選択解除は、アップロード済み画像にカーソルを合わせると右上に表示されるバツボタンをクリックしてください。

[ys]ヘッダーメディアにサイトヘッダーを重ねる(PC)

チェックを入れた場合、PC表示でヘッダーメディアの上にサイトヘッダーが重なるようなレイアウトになります。

画像の上にヘッダーを重ねるレイアウトも出来る

[ys]ヘッダーメディアにサイトヘッダーを重ねる(PC):サイトヘッダー表示タイプ

ヘッダーメディアの上に重なるサイトヘッダーの表示タイプ(色)を「ダーク」・「ライト」から選択できます。

  • ダーク:黒系
  • ライト:白系

[ys]ヘッダーメディアにサイトヘッダーを重ねる(PC):サイトヘッダー不透明度

ヘッダーメディアの上に重なるサイトヘッダーの不透明度を0~100の間で設定します。

数値が小さいほどサイトヘッダーが透明になります。

[ys]ヘッダーメディアを全ページ表示する

yStandardではヘッダーメディアの設定はTOPページで表示することを基本として考えていますが、全ページにヘッダーメディアを表示したい場合はチェックを入れてください。
(yStandard独自のAMPページ生成機能で生成されたAMPページではヘッダーメディアは表示されません。)