※！ページ全体の編集点！※
タグ設定のHEADに
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script>
$(function(){
$("a[href^='#']").click(function() {
var speed = 1000; // スクロール速度(ミリ秒)
var href = $(this).attr("href");
var target = $(href == "#" || href == "" ? 'html' : href);
var position = target.offset().top;
$('html').animate({scrollTop:position}, speed, 'swing');
return false;
});
});
</script>
を追加し、アンカーリンク作動時のスクロール速度を設定する。
1.
2.
※編集点
・挿入したいYoutube動画から埋め込み用コードを取得、HTMLで挿入（参照：https://knowledge.squadbeyond.com/edit-page/basic-operation/outsource-server）
・ループ再生、自動再生させ、コントロールとショートカットキーによる操作を防ぐため、URLに以下のパラメータを追加
autoplay=1：自動再生
mute=1：ミュート再生（自動再生を許可させるため）
loop=1&playlist=動画ID：ループ再生には playlist に動画IDも必要
controls=0：コントロール非表示
enablejsapi=1：YouTube APIと連携するため
・上記のパラメータに合わせてJavascriptの該当部分を変更
・ユーザーによる再生、停止を防ぐために、iframe に CSS で pointer-events: none; を適用。さらにiframeの上に透明の div を重ねた↓
▼HTML
<div class="video-overlay"></div>
▼CSS
.video-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10;
background: transparent;
pointer-events: all;
}
を追加する。
・マージンに背景色を追加するために、ラッパーのクラス全体に<div class="margin-color-wrapper">を追加
・CSSに以下を追加し、背景色を変更
.margin-color-wrapper {
background-color: #AEA7BA;
padding: 40px;
box-sizing: border-box;
}
3.
※編集点
・背景画像を挿入
・背景画像のWidthを100%に変更
・メディアクエリを追加してSP幅で閲覧する際の背景画像を追加、ボタン位置の調整↓
▼HTML
<source media="(max-width: 768px)" srcset="SP背景画像.png">
▼CSS
@media screen and (max-width: 768px) {
.bg-button {
bottom: 5%;
}
.bg-button .btn {
font-size: 1em;
padding: 0.8em;
width: 85%;
}
}
4.
5.
※編集点
・CSSでボタンの背景色とホバー時の色を変更
・アンカーリンクの飛び元を設置<a href="#heading1">...</a>
6.
7.
※編集点
・SP幅でのみカルーセルを表示するために、HTMLの頭に
<div class="only-pc">
<img src="背景画像.png" alt="PC用画像" width="800" height="800" draggable="false" class="lazyload">
</div>
を追加し、背景画像と同じ色の画像を挿入
・カルーセルのクラス名を<div class="swiper js-carousel-creative swiper-container only-sp"> に変更
・カルーセルに画像を挿入
8.
9.
※編集点
・SP幅でのみカルーセルを表示するために、HTMLの頭に
<div class="only-pc">
<img src="背景画像.png" alt="PC用画像" width="800" height="800" draggable="false" class="lazyload">
</div>
を追加し、背景画像と同じ色の画像を挿入
・カルーセルのクラス名を<div class="swiper js-carousel-creative swiper-container only-sp"> に変更
・カルーセルに画像を挿入
10.
11.
12.
※編集点
・SP幅でのみカルーセルを表示するために、HTMLの頭に
<div class="only-pc">
<img src="背景画像.png" alt="PC用画像" width="800" height="800" draggable="false" class="lazyload">
</div>
を追加し、背景画像と同じ色の画像を挿入
・カルーセルのクラス名を<div class="swiper js-carousel-creative swiper-container only-sp"> に変更
・カルーセルに画像を挿入
13.
14.
※編集点
・CSSでボタンの背景色とホバー時の色を変更
・アンカーリンクの飛び元を設置<a href="#heading1">...</a>
15.
16.
17.
※編集点
・SP幅でのみカルーセルを表示するために、HTMLの頭に
<div class="only-pc">
<img src="背景画像.png" alt="PC用画像" width="800" height="800" draggable="false" class="lazyload">
</div>
を追加し、背景画像と同じ色の画像を挿入
・カルーセルのクラス名を<div class="swiper js-carousel-creative swiper-container only-sp"> に変更
・カルーセルに画像を挿入
18.
19.
20.
※編集点
・CSSでボタンの背景色とホバー時の色を変更
・アンカーリンクの飛び元を設置<a href="#heading1">...</a>
21.
※編集点
・アンカーリンクの飛び先を設置（<div id=heading1>...</div>）
※編集点
・beyondページ＞フォームからオリジナルのフォームを作成
・フォーム追加からbeyondページに追加
22.
※編集点
・ロゴ画像を挿入
・ナビゲーション部分を削除
Copyright © SIVAinc All rights reserved.