メインビジュアルのスライドショーを差し替える

このテーマのメインビジュアルのスライドショーは、「バナー(Banner)」モジュールとjQueryのライブラリ「Slick.js」を使用しています。a-blog cmsの公式テーマ「Site2016」とある程度互換性があります。

スライド用の画像を用意する

スライドに使用する画像を用意してください。テーマの推薦サイズは以下の通りです。ワイド画面とモバイル画面では、表示される範囲が異なることにご注意ください。

  • 1200ピクセルx800ピクセル以上
  • 被写体の重要な要素が画像の右側50%以内に収まっているもの

メインビジュアルの編集画面を表示する


a-blog cmsにログインしている状態で、メインビジュアルにカーソルを置くと、右上に「モジュール設定」へのリンクが表示されるのでクリックしてください。

バナーモジュールの編集画面となります。表示順・最大件数の設定と、各スライドの設定ができます。



各スライドの設定

画像画像をアップロードします(※1)
URLこのテーマでは使用できません
代替テキスト使用しません(※2)
属性1スライドの見出し
属性2スライドのキャプション
新規ページこのテーマでは使用できません
公開日時このスライドを表示する期間(※3)

※1 バナーモジュールでは、メディア機能を使用することはできません。
※2 このテーマはCSSのカスタマイズを容易にするため、画像を背景として配置しています。このため、代替テキストを指定することはできません。
※3 指定した期間を過ぎると、自動的に非表示となります。表示順をランダムにしていた場合は選択されなくなります。

Site2016から移行する場合

Site2016とは、以下の点が異なっています。

モジュールIDが異なる
管理ページ内「モジュールID」一覧にある「top_image」を「banner_top_mainvisual」に変更してください。
リンクが反映されない
リンク先は反映されません(上位版で改良予定です)。
縦横比が異なる
Site2016よりもかなり横長となっています。

オリジナルのメインビジュアルを作成する場合

オリジナルのメインビジュアルを作成する、もしくはHTML直書きとする場合は、下記のファイルを編集してください。

/include/module/banner_top_mainvisual.html

メインビジュアルのサンプルコードは下記の通りです。

<div class="mainvisual">
	<div class="mainvisual-contents js-slick">

		<div class="mainvisual-slide">
			<div class="mainvisual-slide-box">
				<div class="container">
					<div class="mainvisual-slide-contents">
						<h2 class="mainvisual-slide-title">見出し1</h2>
						<p class="mainvisual-slide-body">キャプション1</p>
					</div><!-- /.mainvisual-slide-contents -->
				</div><!-- /.container -->
			</div><!-- /.mainvisual-slide-box -->
			<div class="mainvisual-slide-cover" style="background-image: url(背景画像のURL1);"></div>
		</div><!-- /.mainvisual-slide -->

		<div class="mainvisual-slide">
			<div class="mainvisual-slide-box">
				<div class="container">
					<div class="mainvisual-slide-contents">
						<h2 class="mainvisual-slide-title">見出し2</h2>
						<p class="mainvisual-slide-body">キャプション2</p>
					</div><!-- /.mainvisual-slide-contents -->
				</div><!-- /.container -->
			</div><!-- /.mainvisual-slide-box -->
			<div class="mainvisual-slide-cover" style="background-image: url(背景画像のURL2);"></div>
		</div><!-- /.mainvisual-slide -->

		<div class="mainvisual-slide">
			<div class="mainvisual-slide-box">
				<div class="container">
					<div class="mainvisual-slide-contents">
						<h2 class="mainvisual-slide-title">見出し3</h2>
						<p class="mainvisual-slide-body">キャプション3</p>
					</div><!-- /.mainvisual-slide-contents -->
				</div><!-- /.container -->
			</div><!-- /.mainvisual-slide-box -->
			<div class="mainvisual-slide-cover" style="background-image: url(背景画像のURL3);"></div>
		</div><!-- /.mainvisual-slide -->

	</div><!-- /.mainvisual-contents -->
</div><!-- /.mainvisual -->