メインビジュアルの変更方法

ソーシャルキャスト

オウルキャスト

この方法はデフォルトのテンプレートを利用している場合に限った説明になります。
テンプレートの編集が難しい場合、サポートへお問い合わせ下さい。ご要望を伺い作業を承ることも可能です（有償作業となります）。

---

初期状態ではサイトのメインビジュアル部分に [MV001]-[MV005] という仮の画像が設定されています。 この画像を任意の画像に変更する方法をご案内します。

1.メインビジュアルに使用する画像を用意する

画像のサイズについては以下をご覧ください。
メインビジュアルに使う画像サイズの指定を知りたい

2.メインビジュアルに使用する画像をサーバにアップロードする

FTPSでメインビジュアルに使用する画像ファイルをアップロードしてください。
ファイルのアップロード方法については下記をご確認ください。
テンプレートで利用する画像などのファイルアップロード方法

ディレクトリ直下にアップロードした場合、URLは以下の通りになります。

https://{契約時にご案内したホスト名}/file_upload/{アップロードしたファイル名}

例）main01.pngの画像をアップロードした場合、

https://{契約時にご案内したホスト名}/file_upload/main01.png

3.デザインテンプレートを変更する

管理画面の デザイン管理 -> テンプレート から下記のテンプレートを選択して編集します。

PC版テンプレート

「パーツテンプレート/メインビジュアル」を編集します。

• 下記部分のimgタグのsrcを任意の値に変更してください（赤字）
  • 値は画像のパスを指定してください
    例：/file_upload/image1.jpg
    例：/file_upload/images/image1.jpg
• 画像にリンクを設定する場合aタグのhrefを任意の値に変更してください（青字）
  • リンクが不要な場合はaタグ自体を削除してください。（紫字）
• div.js-mv-slide > divのブロックを増減させることによって画像点数のコントロールが可能です

<div class="box-mv-slide">
　<div class="js-mv-slide">
　　<div>
　　　<a href="https://socialcast.jp/" target="_blank"><img src="{{asset('/images/mv_01.jpg')}}" alt="" style="max-width: 100vw;"></a>
　　</div>
　　<div>
　　　<img src="{{asset('/images/mv_02.jpg')}}" alt="" style="max-width: 100vw;">
　　</div>
　　<div>
　　　<img src="{{asset('/images/mv_03.jpg')}}" alt="" style="max-width: 100vw;">
　　</div>
　　<div>
　　　<img src="{{asset('/images/mv_04.jpg')}}" alt="" style="max-width: 100vw;">
　　</div>
　　<div>
　　　<img src="{{asset('/images/mv_05.jpg')}}" alt="" style="max-width: 100vw;">
　　</div>
　</div>
</div>

スマートフォン版テンプレート

「パーツテンプレート/メインビジュアル」を編集します。

• 下記部分のimgタグのsrcを任意の値に変更してください（赤字）
  • 値は画像のパスを指定してください
    例：/file_upload/image1.jpg
    例：/file_upload/images/image1.jpg
• 画像にリンクを設定する場合aタグのhrefを任意の値に変更してください（青字）
  • リンクが不要な場合はaタグ自体を削除してください。（紫字）
• div.js-mv-slide > divのブロックを増減させることによって画像点数のコントロールが可能です

<div class="box-mv-slide">
　<div class="js-mv-slide">
　　<div>
　　　<a href="https://socialcast.jp/" target="_blank"><img src="{{asset('/images/mv_01.jpg')}}" alt="" style="max-width: 100vw;"></a>
　　</div>
　　<div>
　　　<img src="{{asset('/images/mv_02.jpg')}}" alt="" style="max-width: 100vw;">
　　</div>
　　<div>
　　　<img src="{{asset('/images/mv_03.jpg')}}" alt="" style="max-width: 100vw;">
　　</div>
　　<div>
　　　<img src="{{asset('/images/mv_04.jpg')}}" alt="" style="max-width: 100vw;">
　　</div>
　　<div>
　　　<img src="{{asset('/images/mv_05.jpg')}}" alt="" style="max-width: 100vw;">
　　</div>
　</div>
</div>