Skip to content

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

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

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

テンプレート変更手順

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

PC版テンプレート

  • パーツテンプレート/メインビジュアル
    • 下記部分のimgタグのsrcを任意の値に変更してください
    • 画像のアップロードには「ファイルアップロード」をご利用ください
    • div.js-mv-slide > divのブロックを増減させることによって画像点数のコントロールが可能です
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<div class="box-mv-slide">
    <div class="js-mv-slide">
        <div>
            <a href="https://socialcast.jp/" target="_blank"><img src="/images/mv_01.jpg" alt="" style="max-width: 100vw;"></a>
        </div>
        <div>
            <a href="https://learning.socialcast.jp/"><img src="/images/mv_02.jpg" alt="" style="max-width: 100vw;"></a>
        </div>
        <div>
            <img src="/images/mv_03.jpg" alt="" style="max-width: 100vw;">
        </div>
        <div>
            <img src="/images/mv_04.jpg" alt="" style="max-width: 100vw;">
        </div>
        <div>
            <img src="/images/mv_05.jpg" alt="" style="max-width: 100vw;">
        </div>
    </div>
</div>

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

  • パーツテンプレート/メインビジュアル
    • 下記部分のimgタグのsrcを任意の値に変更してください
    • 画像のアップロードには「ファイルアップロード」をご利用ください
    • div.js-mv-slide > divのブロックを増減させることによって画像点数のコントロールが可能です
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<div class="box-mv-slide">
    <div class="js-mv-slide">
        <div>
            <a href="https://socialcast.jp/" target="_blank"><img src="/images/mv_01.jpg" alt="" style="max-width: 100vw;"></a>
        </div>
        <div>
            <a href="https://learning.socialcast.jp/"><img src="/images/mv_02.jpg" alt="" style="max-width: 100vw;"></a>
        </div>
        <div>
            <img src="/images/mv_03.jpg" alt="" style="max-width: 100vw;">
        </div>
        <div>
            <img src="/images/mv_04.jpg" alt="" style="max-width: 100vw;">
        </div>
        <div>
            <img src="/images/mv_05.jpg" alt="" style="max-width: 100vw;">
        </div>
    </div>
</div>