2分割スライダー（ヘッダー）［ブロックエディターで部品再現］

今回の再現レイアウトデザインはTCDテーマ「BELIEVE」のデモサイトのファーストビューで採用されてる『2分割（フェード）スライダー』です。

パッと見た感じでは再現するとなるとかなり複雑そうだったので、複数の生成AIにいったん丸投げしてみました。
返ってきた答えは「swiper.js」などのスクリプトライブラリをカスタマイズするのが近道とか。

ということで提案された複数のコードの中から今回は使い勝手がよさそうで軽量そうな独自スクリプトを筆者の方でさらにカスタマイズしてなんとか完成させてみました。

いつも思うのですが、生成AIが生成するコードはそのままではまず動かないことがほとんどです。問題はそこからどうカスタマイズすれば使えるものに昇華できるかということ。
とはいっても筆者はスクリプトに関しては素人なので、いつも手探り状態。うまくいくのは全体の4割くらいでしょうか。

まあ今回はなんとかうまくいった方かと思います。

完成したデモサイトはこちらで公開してます。

上記デモサイトはSIRIUS2というサイト作成ツールに移植して作ったサイトですが、中身はほとんど変わってないのでワードプレスサイトでも同じ動きになります。

概要

今回のSWELLカスタマイズはメインビジュアル（ファーストビュー）の変更になります。このメインビジュアルの変更は通常のやり方だとかなりのスキルが必要になります。

しかしながらSWELLにはファーストビューをブログパーツで作成したコンテンツで差し替えられる機能があるのでその機能を使ってメインビジュアルを変更してみます。

画像

事前に用意する画像は左右2枚同時にフェードで変わる画像スライダーになるので、事前に４枚もしくは６枚の画像を用意してアップロードしておきます。
1回だけのスライド（切り換え）なら左右2枚×2で4枚、2回スライドさせるなら2枚×3で6枚。それ以上は長くなるのでやめといた方がいいでしょう。

あと画像サイズは統一にしておくのが好ましいです。たとえばデモサイトで使ってる画像はすべて1,600px×1,600pxです。

制限事項

今回の『2分割スライダー』ですが、実装に際してはいくつか制限があります。

• 切り換え（トランジション）形態はフェード固定。ほかのタイプも試しましたが今回のやり方ではうまくいきませんでした。
• 画像の表示時間は固定（1枚約8秒）。
  時間を増減すると様々な箇所の数値を計算し直す必要がでてくるのですが、今回のやり方だとこれが実に困難なため。（追記：1枚6秒ほどの短縮バージョンも用意してみました）
• 「swiper.js」などのスクリプトライブラリに精通している方は時間等の変更も簡単にできる可能性あり。ただし今回は未使用なので真偽不明。

手順-HTML＆スクリプト

HTML

まずはブログパーツを新規作成します。名称は適当で。
続いてメインビジュアルをブラウザ幅いっぱいで表示するために＜フルワイド＞ブロックを作成します。

＜フルワイド＞ブロックの「見出し」は削除して、そこに＜カスタムHTML＞ブロックを作成します。続けてそのままグループ化します。
グループ化しておくと（使う使わないは別にして）レイアウト崩れ防止や余白調整などなにかと便利です。

＜フルワイド＞ブロックを選択状態にしたらコンテンツ幅を「フルワイド」に、余白を「0」にします。

＜カスタムHTML＞ブロック内に以下のコードをコピー＆ペーストします。
（このあと説明しますが、コード内には画像用設定コード/テキスト用設定コード/スクリプトコードが内包されてます）

＜HTMLコード＞

<div class="bunkatsu-slider">
	<div class="bunkatsu-col bunkatsu-left">
		<div class="bunkatsu-slide active"><img src="" alt="イメージ画像" /></div>
		<div class="bunkatsu-slide"><img src="" alt="イメージ画像" /></div>
		<div class="bunkatsu-slide"><img src="" alt="イメージ画像" /></div>
	</div>
	<div class="bunkatsu-col bunkatsu-right">
		<div class="bunkatsu-slide active"><img src="" alt="イメージ画像" /></div>
		<div class="bunkatsu-slide"><img src="" alt="イメージ画像" /></div>
		<div class="bunkatsu-slide"><img src="" alt="イメージ画像" /></div>
	</div>
</div>
<div class="bunkatsu-copy">
	<p class="bunkatsu-title">サイトタイトル</p>
	<p class="bunkatsu-subtitle">説明文</p>
</div>
<script>
const leftSlides=document.querySelectorAll('.bunkatsu-left .bunkatsu-slide');const rightSlides=document.querySelectorAll('.bunkatsu-right .bunkatsu-slide');let current=0;function changeSlide(){leftSlides[current].classList.remove('active');rightSlides[current].classList.remove('active');current=(current+1)%leftSlides.length;leftSlides[current].classList.add('active');rightSlides[current].classList.add('active')}setInterval(changeSlide,8000)
</script>

続いて左側1枚目に表示させたい画像の画像パスを、下の画像の赤矢印の位置（※2個のダブルクォーテーションの間）にコピー＆ペーストします。やり方はこちらをご参照ください。
（※上のコードだと3行目）

①が左側に表示したい画像のコードでここでは（上から順に）3枚分の画像コードになってます。
②は右側に表示したい画像コード（3枚分）になります。

1回だけのスライドであれば薄オレンジ色の行ごと削除して2枚ずつの設定にします。

画像パスの取得方法ですが、管理画面の【メディア】→【ライブラリ】を開きます。
続いて1枚目の左に表示したい画像ならば当該画像を選択→画面が変わったら『URLをクリップボードにコピー』をクリックしてコピーしておきます。

先ほどの＜カスタムHTML＞に戻って「A」が左1枚目の画像パス設定用コードなので「A」の行の赤矢印部分にカーソルを当て、ペースト（Ctrl＋P）します。
（「B」が左2枚目、「C」が左3枚目）

ペーストするとこんな感じでURLが挿入されます。これで左1枚目の画像の設置が完了です。

2枚目画像は（先ほどのキャプチャ画像の）「B」の行の矢印部分に、コピーしたURLをペーストします。
②の右側画像の設定も同様です。

テキスト

ブラウザ画面中央にはテキストも表示できます。担当しているのは全コード内13～16行目までです。
すでに「サイトタイトル」と「説明文」というダミーテキストが入ってます。（適度に変更のこと）
（※テキストのみ変更可能で、それ以外のコードは変更不可）

<div class="bunkatsu-copy">
	<p class="bunkatsu-title">サイトタイトル</p>
	<p class="bunkatsu-subtitle">説明文</p>
</div>

「サイトタイトル」部分のみ必要で「説明文」は不要という場合は15行目を削除します。

”テキスト一切必要なし”という方は13～16行目までをごっそり削除します。

スクリプト

画像の2分割表示を受け持つスクリプトは通常は別ファイルとして提供することが多いのですが、今回はHTMLと抱き合わせで格納することにしました。全コード内17～19行目までがスクリプト本体です。
（※圧縮済みコード）

<script>
const leftSlides=document.querySelectorAll('.bunkatsu-left .bunkatsu-slide');const rightSlides=document.querySelectorAll('.bunkatsu-right .bunkatsu-slide');let current=0;function changeSlide(){leftSlides[current].classList.remove('active');rightSlides[current].classList.remove('active');current=(current+1)%leftSlides.length;leftSlides[current].classList.add('active');rightSlides[current].classList.add('active')}setInterval(changeSlide,8000)
</script>

いったんこの時点でブログパーツを保存（公開）します。
そのあとブログパーツ管理画面に戻ってショートコードをコピー（もしくは記憶）しておきます。

【外観】→【カスタマイズ】→【トップページ】→【メインビジュアル】と進んで、『スライド1』の「ブログパーツID」に先ほどコピーしたショートコードをペースト（もしくは直打ち）します。

そのあと「公開」をクリックしてサイトを更新→画像が表示されるか確認します。（上下に画像が表示されるかと）
表示されたら最後はレイアウト指定です。

手順-CSS

以下のスタイルをコピーして『追加CSS』か子テーマの『style.css』にペーストします。
（ブログパーツ自体には『カスタムCSS＆JS』のような機能がないため）

＜スタイル＞

.home .bunkatsu-slider {
	display: flex;
	height: 100vh;
	overflow: hidden;
}
.home .bunkatsu-col {
	width: 50%;
	position: relative;
	overflow: hidden;
}
.home .bunkatsu-slide {
	position: absolute;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: opacity 2s ease;
}
.home .bunkatsu-slide.active {
	opacity: 1;
	z-index: 2;
}
.home .bunkatsu-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform-origin: center center;
	transform: scale(1.12);
	position: relative;
	z-index: 1;
}
.home .bunkatsu-slide.active img {
	animation: zoom 10s linear forwards;
}
@keyframes zoom {
	from {
		transform: scale(1);
	}

	to {
		transform: scale(1.15);
	}
}

/*オーバーレイ*/
.home .bunkatsu-slide::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,0.3);
	background: rgba(0, 40, 120, 0.35);
	z-index: 2;
	pointer-events: none;
}

/*テキスト*/
.home .bunkatsu-copy {
	position: absolute;
	z-index: 10;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
	color: #fff;
}
.home .bunkatsu-copy .bunkatsu-title {
	font-size: 3.5em;
	font-weight: bold;
	line-height: 1.4;
	height: auto;
	margin-bottom: 0.7em;
}
.home .bunkatsu-copy .bunkatsu-subtitle{
	font-size: 1.5em;
}

/*スマホ用*/
@media (max-width: 640px) {
	.home .bunkatsu-slider {
		flex-direction: column;
	}
	.home .bunkatsu-col {
		width: 100%;
		height: 50vh;
	}
	.home .bunkatsu-copy {
		width: 90%;
		margin-inline: auto;
	}
	.home .bunkatsu-copy .bunkatsu-title {
		font-size: 2.2em;
	}
	.home .bunkatsu-copy .bunkatsu-subtitle {
		font-size: 1.2em;
	}
}

一応トップページのみでしか適用されない仕様にはしてあります。

全体の時間尺や切り換え時間などは変更不可ですが、テキストなど一部変更可能な箇所もあります。
（厳密には変更不可ではないですが、かなり面倒です）

テキストサイズ/色

テキストカラーは63行目の「#fff」を適当なカラーコードで置き換えます。

/*テキスト*/
.home .bunkatsu-copy {
	position: absolute;
	z-index: 10;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
	color: #fff;
}

”サイトタイトル”用のテキストサイズは66行目の「3.5」という数値を増減します。

.home .bunkatsu-copy .bunkatsu-title {
	font-size: 3.5em;
	font-weight: bold;

デフォルトで太字設定になってますが、標準に戻したい場合は67行をコメントアウトして無効化します。
（コメントアウト→『/*font-weight: bold;*/』）

.home .bunkatsu-copy .bunkatsu-title {
	font-size: 3.5em;
	font-weight: bold;

”説明文”用のテキストサイズは73行目の「1.5」という数値を増減します。
（※太字設定はなし）

.home .bunkatsu-copy .bunkatsu-subtitle{
	font-size: 1.5em;

/*スマホ用*/
@media (max-width: 640px) {
	.home .bunkatsu-slider {
		flex-direction: column;
	}
	.home .bunkatsu-col {
		width: 100%;
		height: 50vh;
	}
	.home .bunkatsu-copy {
		width: 90%;
		margin-inline: auto;
	}
	.home .bunkatsu-copy .bunkatsu-title {
		font-size: 2.2em;
	}
	.home .bunkatsu-copy .bunkatsu-subtitle {
		font-size: 1.2em;
	}
}

『追加CSS』に記載した場合はソース上ではそのまま表示されるのでいったん圧縮をかけておいた方がソース上はきれいになります。読み込み時間もほんのわずかですが短縮されます。
（”CSS圧縮”で検索してください）

オーバーレイ

デフォルトでは画像に薄い青系のオーバーレイがかかってます。
これを黒系にしたい時は50行目をコメントアウトして無効化します。
（コメントアウト→『/*background: rgba(0, 40, 120, 0.35);*/』）

/*オーバーレイ*/
.home .bunkatsu-slide::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,0.3);
	background: rgba(0, 40, 120, 0.35);

黒系のオーバーレイの濃度を変えたい場合は49行目の「0.3」の数値を増減します。
青系のオーバーレイの濃度を変えたい場合は50行目の「0.35」の数値を増減します。

オーバーレイが必要ない方は45～53行目を削除するかコメントアウトして無効化します。
コメントアウトは先頭と最後尾にコメントアウト記号を付けるだけで適用されます。（下のコード参照）

/*オーバーレイ*/
/*.home .bunkatsu-slide::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,0.3);
	background: rgba(0, 40, 120, 0.35);
	z-index: 2;
	pointer-events: none;
}*/

短縮バージョン

画像が切り替わるまで約6秒ほどの短縮バージョンも作ってみました。変更箇所は3ヵ所。

スクリプト

HTMLコード18行目の最後の「8000」を「6000」に変更。

<script>
const leftSlides=document.querySelectorAll('.bunkatsu-left .bunkatsu-slide');const rightSlides=document.querySelectorAll('.bunkatsu-right .bunkatsu-slide');let current=0;function changeSlide(){leftSlides[current].classList.remove('active');rightSlides[current].classList.remove('active');current=(current+1)%leftSlides.length;leftSlides[current].classList.add('active');rightSlides[current].classList.add('active')}setInterval(changeSlide,6000)
</script>

CSS

CSSコード22～33行目のうち、27行目の「1.12」を「1.11」に変更。
32行目の「10」を「8.2」に変更。

.home .bunkatsu-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform-origin: center center;
	transform: scale(1.11);
	position: relative;
	z-index: 1;
}
.home .bunkatsu-slide.active img {
	animation: zoom 8.2s linear forwards;
}

［ワードプレス6.8.3＆SWELL2.15.0で動作検証済み］