かんたんデザイン編集機能では、複数の画像やファイルをまとめてアップロードすることができます。
今回は、テーマ 「Fusion Corporate」をベースにし、メインイメージをスライドショーに変更して活用する方法について紹介します。
実際にスライドショーを実装したデモサイトも用意しましたので、あわせてご覧ください。
スライドショーの利用方法
まず、実際に実装したスライドショーの使い方を説明します。
スライドショー画像の変更は、メインイメージの左上、もしくは右側の設定パネルから行うことができます。
表示されたウィンドウに、スライドショーで利用したい複数の画像をドラッグ＆ドロップします（アップロードボタンをクリックし、ファイル選択ダイアログから選択することも可能です）。
画像がまとめてアップロードされますので、スライドショーで利用したい画像を選択します。
並び順もドラッグで変更できるため、スライドショーで表示する順番を自由にコントロールできます。
※ 更新ボタンを押した直後、かんたんデザイン編集画面にうまく反映されない場合がありますが、データ自体は保存されています。その際はブラウザをリロード（再読み込み）してください。
最後に「サイトに適用」ボタンを押せば、実際のウェブサイトに反映されます。
デザインテーマ「Fusion Corporate」へのスライドショー実装手順
スライドショーを実現するには、次の3つの作業が必要です。
- かんたんデザイン編集の実装部分の変更
- スライドショー（Swiper）のライブラリとスクリプトの読み込み
- 専用CSSの追加
かんたんデザイン編集の基本的な仕様については、マニュアルもあわせてご覧ください。
かんたんデザイン編集 - マニュアル | MovableType.net
メインページのかんたんデザイン編集の部分の実装の変更
メインイメージの部分は、インデックス・テンプレートの「メインページ」に記述されています。
まず、4 - 14行目に記述されている、mt:SetVarBlock のブロックを削除します。
次に、40行目あたりにある <picture class="theme-hero-pic MTSE-hero-pic"> に、swiper のクラスを追加します。
変更後：<picture class="theme-hero-pic MTSE-hero-pic swiper">
続いて、41〜49行目に記述されている mt:Var タグの部分を、次のコードに変更します。
<mt:Var
name="theme_hero_pic"
editor:label="スライドショー画像"
editor:type="list"
editor:resource:type="image"
editor:update:attribute="src"
editor:update:selector=".MTSE-hero-pic img"
editor:if:empty="$theme_hero_pic_empty_template"
editor:update:fetch="1"
>今回の実装のポイントは、editor:type を list にし、editor:resource:type を image にすることです。これにより、リストから画像を選択し並び替えることができるようになります。
次に、そのすぐ下にある <mt:Var name="theme_hero_pic_template"> を次のコードに置き換えます。
<div class="swiper-wrapper">
<mt:Assets ids="$theme_hero_pic">
<div class="swiper-slide">
<img
class="d-block mx-auto"
src="<$mt:AssetURL$>"
alt=""
width="<$mt:AssetProperty property="image_width"$>"
height="<$mt:AssetProperty property="image_height"$>"
decoding="async"
fetchpriority="high"
>
</div>
</mt:Assets>
</div>これにより、かんたんデザイン編集画面で選択・並び替えた画像が、その順序のまま出力されるようになります。
スライドショーのライブラリとスクリプトを追加
head タグ内に、スライドショー用のライブラリ（Swiper）の読み込みと実行スクリプトを追加します。「Fusion Corporate」では、テンプレート・モジュールの「メタ情報」を編集します。
「メタ情報」テンプレートの一番最後に、次のコードを追加してください。
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<script>
window.addEventListener('DOMContentLoaded', () => {
const swiper = new Swiper('.theme-hero-pic', {
loop: true, // 最後の画像の次に最初の画像に戻る（無限ループ）
speed: 1000, // 切り替わるスピード（1秒）
autoplay: {
delay: 3000, // 3秒ごとに自動切り替え
disableOnInteraction: false, // ユーザーが触っても自動再生を止めない
},
// 元の構造がpictureタグなので、明示的にクラスを指定して認識させます
wrapperClass: 'swiper-wrapper',
slideClass: 'swiper-slide',
});
});
</script>※スライドが切り替わる時間などの設定は、必要に応じて数値を変更してください。
CSS の追加
最後に、スライドショーの表示を整えるためのCSSを追加します。
インデックス・テンプレートの theme.css を編集し、テンプレートの一番下に次のスタイルを追加してください。
/* スライドショーの外枠（pictureタグ）の設定 */
.theme-hero-pic.swiper {
display: block;
width: 100%;
overflow: hidden; /* はみ出た画像を隠す */
}
/* 各スライド内の画像サイズを綺麗にフィットさせる */
.theme-hero-pic .swiper-slide img {
width: 100%;
height: auto;
max-height: 60vh; /* 縦幅が長くなりすぎないように調整（お好みで変更してください） */
object-fit: cover; /* 領域に合わせて画像を綺麗にトリミング */
}
.theme-hero-body {
z-index: 10 !important;
}以上で実装は完了です！
ぜひ、かんたんデザイン編集機能をサイト運営に活用していただければと思います。
