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

フォローする
ソーシャルキャスト
オウルキャスト

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


初期状態ではサイトのメインビジュアル部分に [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>
この記事は役に立ちましたか?
1人中1人がこの記事が役に立ったと言っています