メインビジュアルを設定する

メインビジュアルは、トップページで一番大きく表示されるメイン画像のことです。

メインビジュアルに設定できる画像には推奨サイズがあります。これより小さいと設定に進めないため、あらかじめご用意ください。

<使用画像の推奨サイズ>
PC表示用:2000×700 ピクセル
スマートフォン表示用:750×1400 ピクセル

実際の表示イメージ

図1:トップページで表示されるメインの画像「メインビジュアル」
図1:トップページで表示されるメインの画像「メインビジュアル」

画像の上にキャッチコピーなど、任意の文字を入れることができます。これらの文字は自動翻訳の対象となります。
複数枚の画像を設定し、スライドショーにすることも可能です。

また、画像の直下にニュースが表示されている黒い部分があります。
「News ティッカー」と呼ばれる機能で、News ティッカーを表示するかどうかもここから設定します。

News ティッカー
新着情報(ニュース)へのリンクです。
自社の新着情報一覧とは別に、シンプルに最新情報を見せるのに便利です。

設定手順

準備

①管理画面の左側のメニュー「サイト設定」から設定していきます。

「サイト設定」にカーソルを合わせると、いくつかのメニューが表示されるので「メインビジュアル設定」をクリックします。

図2:「サイト設定」から「メインビジュアル設定」を選ぶ

②メインビジュアル設定の画面が開きます。

複数枚画像のスライドショーを使用する」から、スライドショーを利用するかを決めます。
Newsティッカーを表示する」では、Newsティッカーを使用するかを決めます。

希望に応じて、ボタンをクリックしましょう。

図3:設定は自由に切り替えられる

画像を設定する

③画像を設定していきます。
PC表示用、スマートフォン表示用にそれぞれ設定します。今はテスト用の画像が入っているので、この画像を変更してみましょう。

設定されている画像を一旦削除します。
設定されている画像にカーソルを合わせると、画像の右上にアイコンが表示されるので「×」のアイコンをクリックします。

図4:設定済みの画像を「×」アイコンで削除
図4:設定済みの画像を「×」アイコンで削除

④テスト用画像が削除されたので、任意の画像を設定します。
画像を追加する」ボタンをクリックします。

図5:新たに画像を設定する
図5:新たに画像を設定する

⑤画像一覧(メディアライブラリ)が開くので、使用したい画像を選びます。まだ一覧にない場合は、画像をアップロードします。
画像を選んだら、右下の「Select」ボタンをクリックします。

※画像のアップロード方法は、こちらをご参照ください。

※推奨サイズより小さい画像は選択できません。

図6:推奨サイズ以上の画像だけ選択できる
図6:推奨サイズ以上の画像だけ選択できる

⑥これで、画像が1つ 仮決定されました。
次に、画像の上に表示される文字を設定してみましょう。

画像の上にキャッチコピーを表示する

<設定手順

①設定した画像にカーソルをのせます。画像の右上にアイコンが表示されるので、鉛筆のアイコンをクリックします。

図7:ペンのアイコンをクリック
図7:ペンのアイコンをクリック

②「キャプション」には、画像に載せたいメインの文字(大きい文字)を入力します。「説明」にはサブの文字(小さい文字)を入力します。サブの文字は空欄でもOKです。

文字を入力したら、画面の右下「画像を更新する」ボタンをクリックします。

図8:「キャプション」と「説明」から入力
図8:「キャプション」と「説明」から入力

ここで設定しなくても、あらかじめ文字の入った画像を作成すればいいのでは?

あらかじめ文字が入った画像は、自動翻訳の対象にならないというデメリットがあります。また、文字を変更したいとき画像から作り直さなければならないので手間もかかります。

メインビジュアルに設定する画像には、なるべく文字を入れないことをおすすめします。

画像にリンクを設定する

<設定方法>

設定した画像の下から「リンク先URL」を指定することができます。

図9:リンク先URLとして設定する
図9:リンク先URLとして設定する

外部サイトのURLを設定すると、サイト訪問者がすぐに自社サイトを離脱してしまいます。サイト訪問者の滞在時間を伸ばすためには、自社サイト内へのリンクをおすすめします。

[例]
△:メインビジュアルに展示会サイトへのURLを設定
◎:メインビジュアルに自社の「新着情報」のURLを設定(新着情報の記事内で展示会サイトを紹介)

公開

スライドショーを利用する場合は、2枚目以降の画像設定も必要になります。「スライド②」~ を同様の手順で設定します。

設定が終わったら、画面右側の「Update」ボタンをクリックします。これで、今までの内容が実際のサイトに反映されます。

図10:「Update」ボタンをクリックして公開
図10:「Update」ボタンをクリックして公開