セルフルの上級者機能に追加された「カスタムCSS」「カスタムJS」
この機能を利用した裏技をこのブログでは紹介しています🤗
目次
完成図
サイトデザインが「Solid」の場合の完成図はこちら。
こちらのように↓、スクロールにしたときにコンテンツをしたからふわっと表示させます。
対応しているサイトデザイン※
「Solid」「More」
※サイトデザインとは、セルフルの管理画面左にある「サイト設定」に入った画面の一番上「サイトデザイン」で選択しているデザインのことです。
変更方法
１：サイト設定に以下２つのコードを入れる
■フリースペース（上級者）：headタグ内
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">※すでに何かタグが入っている場合はその下に入れてください
■フリースペース（上級者）：bodyタグ内 ①
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>※すでに何かタグが入っている場合はその下に入れてください
２：カスタムCSSに以下のコードを入れる
「上級者設定」の中にある「カスタムCSS」をクリックしたページに、以下のコードを貼り付けます。
/* -------- コンテンツを下からふわっと表示させるアニメーションの移動距離 -------- */
*[data-aos=fade-up] {
transform: translateY(24px);/* 移動距離を指定 */
transition-property: transform, opacity;
opacity: 0;
}
*[data-aos=fade-up].aos-animate {
transform: translateY(0px);
opacity: 1;
}３：カスタムJSに以下のコードを入れる
「上級者設定」の中にある「カスタムJS」をクリックしたページに、以下のコードを貼り付けます。
// コンテンツを下からふわっと表示させるアニメーション
const aosAnimation = 'fade-up';
const aosDuration = 800; // 表示にかける時間（ミリ秒）
$('h2.style-title').attr('data-aos', aosAnimation); // 中見出し
$('h3.style-title').attr('data-aos', aosAnimation); // 小見出し
$('h4.style-title').attr('data-aos', aosAnimation); // 極小見出し
$('.text-block').attr('data-aos', aosAnimation); // 本文
$('.img-block').attr('data-aos', aosAnimation); // 画像
$('.imgs-block').attr('data-aos', aosAnimation); // 画像（複数）
$('.text-img-block').attr('data-aos', aosAnimation); // 本文+画像
$('.list-block').attr('data-aos', aosAnimation); // リスト
$('.slide-block').attr('data-aos', aosAnimation); // スライドショー
$('.html-block').attr('data-aos', aosAnimation); // HTML
$('#content-footer').attr('data-aos', aosAnimation); // コンテントフッター
$('footer').attr('data-aos', aosAnimation); // フッター
AOS.init({duration:aosDuration,once:true});
