自分で組み立てるテンプレート

deco-cracker1

クラッカー画像を先にDLし、imagesに入れて下さい。動画を準備すれば入れ替えも。

html

css

js

deco-kazaritext

装飾用のテキスト。背景パーツとセットで使うと統一感が出ます。

<h2>deco-kazaritext-parts</h2>
<p>大きなテキストの装飾です。背景色がついたsectionの開始タグの直前に入れて下さい。</p>

</section>

<div class="deco-kazaritext-parts">Why Choose Us</div>
<section class="bg-parts bg1-parts">
<h2>deco-kazaritext-parts</h2>
<p>デフォルト。</p>
</section>

<div class="deco-kazaritext-parts primary-parts c">Why Choose Us</div>
<section class="bg-parts bg1-primary-parts">
<h2>deco-kazaritext-parts primary-parts c</h2>
<p>primary色。最後の「c」はテキストをセンタリングする指定です。</p>
</section>

<div class="deco-kazaritext-parts light-parts r">Why Choose Us</div>
<section class="bg-parts bg1-light-parts">
<h2>deco-kazaritext-parts light-parts r</h2>
<p>light色。最後の「r」はテキストを右寄せする指定です。</p>
</section>

<div class="deco-kazaritext-parts accent-parts">Why Choose Us</div>
<section class="bg-parts bg1-accent-parts">
<h2>deco-kazaritext-parts accent-parts</h2>
<p>accent色。</p>
</section>

<div class="deco-kazaritext-parts accent-parts">Why Choose Us</div>
<section class="bg-parts bg1-parts">
<h2>別々の色を組み合わせてもOK</h2>
<p>それぞれ独立した指定なので、好きに組み合わせて下さい。</p>
</section>

html

/*大きなテキストの飾り文字
---------------------------------------------------------------------------*/
/*共通*/
.deco-kazaritext-parts {
	font-family: var(--accent-font), var(--base-font);	/*theme.cssのaccent-fontに指定したフォントを読み込む。読み込めなければbase-fontで指定したフォントを読み込む。*/
	line-height: 1;
	font-size: 8vw;	/*文字サイズ。画面幅100% = 100vwです。*/
	margin-bottom: -6.5vw;	/*文字の配置場所。本来の場所より上にずらす。*/
	position: relative;z-index: -1;	/*背景色と重なった部分が上に出ないように。もし上に出したいならこの１行を削除。*/
}

/*画面幅500px以下の追加指定*/
	@media (max-width:500px) {

.deco-kazaritext-parts {
		margin-bottom: -3.5vw;	/*文字の配置場所の微調整。*/
	}

}/*追加指定ここまで*/

/*primary*/
.deco-kazaritext-parts.primary-parts {
	color: var(--primary-color);	/*文字色。theme.cssのprimary-colorを読み込みます。*/
}
/*light*/
.deco-kazaritext-parts.light-parts {
	color: var(--light-color);	/*文字色。theme.cssのlight-colorを読み込みます。*/
}
/*accent*/
.deco-kazaritext-parts.accent-parts {
	color: var(--accent-color);	/*文字色。theme.cssのaccent-colorを読み込みます。*/
}

/*bg1-parts
---------------------------------------------------------------------------*/
.bg1-parts {
	background: var(--bg-inverse-color);	/*文字色。theme.cssのbg-inverse-colorを読み込みます。*/
	color: var(--bg-color);		/*背景色。theme.cssのbg-colorを読み込みます。*/
}

/*bg1-primary
---------------------------------------------------------------------------*/
.bg1-primary-parts {
	background: var(--primary-color);		/*背景色。theme.cssのprimary-colorを読み込みます。*/
	color: var(--primary-inverse-color);	/*文字色。theme.cssのprimary-inverse-colorを読み込みます。*/
}

/*bg1-light
---------------------------------------------------------------------------*/
.bg1-light-parts {
	background: var(--light-color);		/*背景色。theme.cssのlight-colorを読み込みます。*/
	color: var(--light-inverse-color);	/*背景色。theme.cssのlight-inverse-colorを読み込みます。*/
}

/*bg1-accent
---------------------------------------------------------------------------*/
.bg1-accent-parts {
	background: var(--accent-color);		/*背景色。theme.cssのaccent-colorを読み込みます。*/
	color: var(--accent-inverse-color);	/*背景色。theme.cssのaccent-inverse-colorを読み込みます。*/
}

/*bg-parts（bg1-primary-parts、bg1-light-parts、bg1-accent-partsとセットで使います）
---------------------------------------------------------------------------*/
.bg-parts {
	padding-top: var(--content-space-l);		/*ボックス内の上に空ける余白。theme.cssのcontent-space-lを読み込みます。*/
	padding-bottom: var(--content-space-l);	/*ボックス内の下に空ける余白。theme.cssのcontent-space-lを読み込みます。*/
}

/*背景色が続く場合に隙間を空けない*/
.bg-parts + .bg-parts {
	margin-top: calc(-1 * var(--content-space-l)) !important;
}

css

deco-slideimg1

サンプル画像を先にDLし、imagesに入れて下さい。deco-slideimg2をテキスト画像にしたタイプ。

<h2>deco-slideimg1-parts</h2>
<ul>
<li>※こちらを試す際は、<a href="ttps://template-party.com/parts-new/deco/deco-slideimg1/images.zip">サンプル画像を先にDL</a>し、imagesに入れて下さい。</li>
<li>「deco-slideimg1-parts」には必ず「４枚以上」の画像を配置して下さい。</li>
<li>「rtl-parts」は右から左へ移動します。「ltr-parts」は左から右へ移動します。</li>
<li>速度調整は、jsの「var animationTime = (divCount / 2) * 50 + 's';」の行の「50」の数字です。大きいほどゆっくりになります。</li>
</ul>

<p class="c">幅の異なる画像を配置すると、サイズが変わってしまうので注意。</p>
<div class="deco-slideimg1-parts">
<div class="img-parts rtl-parts">
<div><a href="#"><img src="images/1.png" alt=""></a></div>
<div><a href="#"><img src="images/2.png" alt=""></a></div>
<div><a href="#"><img src="images/1.png" alt=""></a></div>
<div><a href="#"><img src="images/2.png" alt=""></a></div>
</div>
</div>

<p class="c">幅いっぱい使いたい場合は、bleed-x-partsを追加する。</p>
<div class="deco-slideimg1-parts bleed-x-parts">
<div class="img-parts rtl-parts">
<div><a href="#"><img src="images/1.png" alt=""></a></div>
<div><a href="#"><img src="images/1.png" alt=""></a></div>
<div><a href="#"><img src="images/1.png" alt=""></a></div>
<div><a href="#"><img src="images/1.png" alt=""></a></div>
</div>
</div>

</section>

html

css

//===============================================================
// サムネイルスライドショー
//===============================================================
$(document).ready(function() {
    // 各 .img-parts を個別に処理
    $('.img-parts').each(function() {
        var $imgParts = $(this);
        var $divs = $imgParts.children('div');
        var divCount = $divs.length;

// 各 div の幅を計算
        var divWidth = 100 / (divCount * 2);

// サムネイルの枚数に応じてアニメーション時間と幅を計算
        var animationTime = (divCount / 2) * 50 + 's';
        var slideWidth = (divCount / 2) * 200 + '%';

// 各 div に幅を設定
        $divs.css({
            'flex': '0 0 ' + divWidth + '%',
            'width': divWidth + '%'
        });

// .img-parts に animation と width を設定
        $imgParts.css({
            'animation-duration': animationTime,
            'width': slideWidth
        });

// 初期ロード時に子要素を複製して追加
        $divs.clone().appendTo($imgParts);

// サムネイルにマウスが乗った時にアニメーションを一時停止
        $imgParts.on('mouseenter', function() {
            $(this).css('animation-play-state', 'paused');
        });

// サムネイルからマウスが離れた時にアニメーションを再開
        $imgParts.on('mouseleave', function() {
            $(this).css('animation-play-state', 'running');
        });
    });
});

js

deco-slideimg2

サムネイルが横スライドするタイプのスライドショーです。

<h2>deco-slideimg2-parts</h2>
<ul>
<li>「deco-slideimg2-parts」には必ず「４枚以上」の画像を配置して下さい。</li>
<li>「rtl-parts」は右から左へ移動します。「ltr-parts」は左から右へ移動します。</li>
<li>速度調整は、jsの「var animationTime = (divCount / 4) * 40 + 's';」の行の「40」の数字です。大きいほどゆっくりになります。</li>
</ul>

<p class="c">幅いっぱい使いたい場合は、bleed-x-partsを追加する。</p>
<div class="deco-slideimg2-parts bleed-x-parts">
<div class="img-parts rtl-parts">
<div><a href="#"><img src="images/1s.jpg" alt=""></a></div>
<div><a href="#"><img src="images/2s.jpg" alt=""></a></div>
<div><a href="#"><img src="images/3s.jpg" alt=""></a></div>
<div><a href="#"><img src="images/1s.jpg" alt=""></a></div>
<div><a href="#"><img src="images/2s.jpg" alt=""></a></div>
<div><a href="#"><img src="images/3s.jpg" alt=""></a></div>
</div>
</div>

</section>

html

css

//===============================================================
// サムネイルスライドショー
//===============================================================
$(document).ready(function() {
    // 各 .img-parts を個別に処理
    $('.deco-slideimg2-parts .img-parts').each(function() {
        var $imgParts = $(this);
        var $divs = $imgParts.children('div');
        var divCount = $divs.length;

// 各 div の幅を計算
        var divWidth = 100 / (divCount * 2);

// サムネイルの枚数に応じてアニメーション時間と幅を計算
        var animationTime = (divCount / 4) * 40 + 's';
        var slideWidth = (divCount / 4) * 200 + '%';

// 各 div に幅を設定
        $divs.css({
            'flex': '0 0 ' + divWidth + '%',
            'width': divWidth + '%'
        });

// .img-parts に animation と width を設定
        $imgParts.css({
            'animation-duration': animationTime,
            'width': slideWidth
        });

// 初期ロード時に子要素を複製して追加
        $divs.clone().appendTo($imgParts);

// サムネイルにマウスが乗った時にアニメーションを一時停止
        $imgParts.on('mouseenter', function() {
            $(this).css('animation-play-state', 'paused');
        });

// サムネイルからマウスが離れた時にアニメーションを再開
        $imgParts.on('mouseleave', function() {
            $(this).css('animation-play-state', 'running');
        });
    });
});

js

deco-slideimg2-circle

deco-slideimg2の円形タイプです。

<h2>deco-slideimg2-circle-parts</h2>
<ul>
<li>「deco-slideimg2-circle-parts」には必ず「４枚以上」の画像を配置して下さい。</li>
<li>「rtl-parts」は右から左へ移動します。「ltr-parts」は左から右へ移動します。</li>
<li>速度調整は、jsの「var animationTime = (divCount / 4) * 40 + 's';」の行の「40」の数字です。大きいほどゆっくりになります。</li>
</ul>

<p class="c">幅いっぱい使いたい場合は、bleed-x-partsを追加する。</p>
<div class="deco-slideimg2-circle-parts bleed-x-parts">
<div class="img-parts rtl-parts">
<div><a href="#"><img src="images/1s.jpg" alt=""></a></div>
<div><a href="#"><img src="images/2s.jpg" alt=""></a></div>
<div><a href="#"><img src="images/3s.jpg" alt=""></a></div>
<div><a href="#"><img src="images/1s.jpg" alt=""></a></div>
<div><a href="#"><img src="images/2s.jpg" alt=""></a></div>
<div><a href="#"><img src="images/3s.jpg" alt=""></a></div>
</div>
</div>

</section>

html

/*サムネイルスライドショー
---------------------------------------------------------------------------*/
/*スライドショー全体を囲むブロック*/
.deco-slideimg2-circle-parts {
	overflow-x: hidden;
}

/*スライドショーが２段続く場合に、上下間に1文字分のスペースを空ける。*/
.deco-slideimg2-circle-parts + .deco-slideimg2-circle-parts {
	margin-top: 1rem;
}

/*画像たちを囲むブロック*/
.deco-slideimg2-circle-parts .img-parts {
	display: flex;
	overflow: hidden;
}

/*画像1個あたり*/
.deco-slideimg2-circle-parts .img-parts > div {
	padding: 0 0.5rem;	/*左右に0.5文字分の余白*/
}
.deco-slideimg2-circle-parts .img-parts > div > a {
	display: block;
	aspect-ratio: 1 / 1;	/*正方形にする*/
	border-radius: 50%;		/*円形にする*/
	overflow: hidden;
}
.deco-slideimg2-circle-parts .img-parts img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*右から左へ、左から右へ、のアニメーション*/
.deco-slideimg2-circle-parts .rtl-parts, .deco-slideimg2-circle-parts .ltr-parts {
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

.deco-slideimg2-circle-parts .rtl-parts {animation-name: slide-rtl-parts;}
.deco-slideimg2-circle-parts .ltr-parts {animation-name: slide-ltr-parts;}

@keyframes slide-rtl-parts {
0% {transform: translateX(0);}
100% {transform: translateX(-50%);}
}

@keyframes slide-ltr-parts {
0% {transform: translateX(-50%);}
100% {transform: translateX(0);}
}

css

//===============================================================
// サムネイルスライドショー
//===============================================================
$(document).ready(function() {
    // 各 .img-parts を個別に処理
    $('.deco-slideimg2-circle-parts .img-parts').each(function() {
        var $imgParts = $(this);
        var $divs = $imgParts.children('div');
        var divCount = $divs.length;

// 各 div の幅を計算
        var divWidth = 100 / (divCount * 2);

// サムネイルの枚数に応じてアニメーション時間と幅を計算
        var animationTime = (divCount / 4) * 40 + 's';
        var slideWidth = (divCount / 4) * 200 + '%';

// 各 div に幅を設定
        $divs.css({
            'flex': '0 0 ' + divWidth + '%',
            'width': divWidth + '%'
        });

// .img-parts に animation と width を設定
        $imgParts.css({
            'animation-duration': animationTime,
            'width': slideWidth
        });

// 初期ロード時に子要素を複製して追加
        $divs.clone().appendTo($imgParts);

// サムネイルにマウスが乗った時にアニメーションを一時停止
        $imgParts.on('mouseenter', function() {
            $(this).css('animation-play-state', 'paused');
        });

// サムネイルからマウスが離れた時にアニメーションを再開
        $imgParts.on('mouseleave', function() {
            $(this).css('animation-play-state', 'running');
        });
    });
});

js

deco-slideimg3

deco-slideimg2の段違いレイアウトです。

<h2>deco-slideimg3-parts</h2>
<ul>
<li>「deco-slideimg3-parts」には必ず「４枚以上」の画像を配置して下さい。</li>
<li>「rtl-parts」は右から左へ移動します。「ltr-parts」は左から右へ移動します。</li>
<li>速度調整は、jsの「var animationTime = (divCount / 4) * 40 + 's';」の行の「40」の数字です。大きいほどゆっくりになります。</li>
</ul>

<p class="c">幅いっぱい使いたい場合は、bleed-x-partsを追加する。</p>
<div class="deco-slideimg3-parts bleed-x-parts">
<div class="img-parts rtl-parts">
<div><a href="#"><img src="images/1s.jpg" alt=""></a></div>
<div><a href="#"><img src="images/2s.jpg" alt=""></a></div>
<div><a href="#"><img src="images/3s.jpg" alt=""></a></div>
<div><a href="#"><img src="images/1s.jpg" alt=""></a></div>
<div><a href="#"><img src="images/2s.jpg" alt=""></a></div>
<div><a href="#"><img src="images/3s.jpg" alt=""></a></div>
</div>
</div>

</section>

html

/*サムネイルスライドショー
---------------------------------------------------------------------------*/
/*スライドショー全体を囲むブロック*/
.deco-slideimg3-parts {
	overflow-x: hidden;
}

/*スライドショーが２段続く場合に、上下間に1文字分のスペースを空ける。*/
.deco-slideimg3-parts + .deco-slideimg3-parts {
	margin-top: 1rem;
}

/*画像たちを囲むブロック*/
.deco-slideimg3-parts .img-parts {
	display: flex;
	overflow: hidden;
}

/*段違いに配置（偶数版目だけ上に２文字分のスペースをとる）*/
.deco-slideimg3-parts .img-parts div:nth-of-type(even) {
	margin-top: 2rem;
}

/*画像1個あたり*/
.deco-slideimg3-parts .img-parts > div {
	padding: 0 0.5rem;	/*左右で合計1remぶんの見た目余白*/
}

/*右から左へ、左から右へ、のアニメーション*/
.deco-slideimg3-parts .rtl-parts, .deco-slideimg3-parts .ltr-parts {
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

.deco-slideimg3-parts .rtl-parts {animation-name: slide-rtl-parts;}
.deco-slideimg3-parts .ltr-parts {animation-name: slide-ltr-parts;}

@keyframes slide-rtl-parts {
0% {transform: translateX(0);}
100% {transform: translateX(-50%);}
}

@keyframes slide-ltr-parts {
0% {transform: translateX(-50%);}
100% {transform: translateX(0);}
}

css

//===============================================================
// サムネイルスライドショー
//===============================================================
$(document).ready(function() {
    // 各 .img-parts を個別に処理
    $('.deco-slideimg3-parts .img-parts').each(function() {
        var $imgParts = $(this);
        var $divs = $imgParts.children('div');
        var divCount = $divs.length;

// 各 div の幅を計算
        var divWidth = 100 / (divCount * 2);

// サムネイルの枚数に応じてアニメーション時間と幅を計算
        var animationTime = (divCount / 4) * 40 + 's';
        var slideWidth = (divCount / 4) * 200 + '%';

// 各 div に幅を設定
        $divs.css({
            'flex': '0 0 ' + divWidth + '%',
            'width': divWidth + '%'
        });

// .img-parts に animation と width を設定
        $imgParts.css({
            'animation-duration': animationTime,
            'width': slideWidth
        });

// 初期ロード時に子要素を複製して追加
        $divs.clone().appendTo($imgParts);

// サムネイルにマウスが乗った時にアニメーションを一時停止
        $imgParts.on('mouseenter', function() {
            $(this).css('animation-play-state', 'paused');
        });

// サムネイルからマウスが離れた時にアニメーションを再開
        $imgParts.on('mouseleave', function() {
            $(this).css('animation-play-state', 'running');
        });
    });
});

js

deco-slideimg3-circle

deco-slideimg3-circleの円形タイプです。

<h2>deco-slideimg3-circle-parts</h2>
<ul>
<li>「deco-slideimg3-circle-parts」には必ず「４枚以上」の画像を配置して下さい。</li>
<li>「rtl-parts」は右から左へ移動します。「ltr-parts」は左から右へ移動します。</li>
<li>速度調整は、jsの「var animationTime = (divCount / 4) * 40 + 's';」の行の「40」の数字です。大きいほどゆっくりになります。</li>
</ul>

<p class="c">幅いっぱい使いたい場合は、bleed-x-partsを追加する。</p>
<div class="deco-slideimg3-circle-parts bleed-x-parts">
<div class="img-parts rtl-parts">
<div><a href="#"><img src="images/1s.jpg" alt=""></a></div>
<div><a href="#"><img src="images/2s.jpg" alt=""></a></div>
<div><a href="#"><img src="images/3s.jpg" alt=""></a></div>
<div><a href="#"><img src="images/1s.jpg" alt=""></a></div>
<div><a href="#"><img src="images/2s.jpg" alt=""></a></div>
<div><a href="#"><img src="images/3s.jpg" alt=""></a></div>
</div>
</div>

</section>

html

/*サムネイルスライドショー
---------------------------------------------------------------------------*/
/*スライドショー全体を囲むブロック*/
.deco-slideimg3-circle-parts {
	overflow-x: hidden;
}

/*スライドショーが２段続く場合に、上下間に1文字分のスペースを空ける。*/
.deco-slideimg3-circle-parts + .deco-slideimg3-circle-parts {
	margin-top: 1rem;
}

/*画像たちを囲むブロック*/
.deco-slideimg3-circle-parts .img-parts {
	display: flex;
	overflow: hidden;
}

/*段違いに配置（偶数版目だけ上に２文字分のスペースをとる）*/
.deco-slideimg3-circle-parts .img-parts div:nth-of-type(even) {
	margin-top: 2rem;
}

/*画像1個あたり*/
.deco-slideimg3-circle-parts .img-parts > div {
	padding: 0 0.5rem;	/*左右に0.5文字分の余白*/
}
.deco-slideimg3-circle-parts .img-parts > div > a {
	display: block;
	aspect-ratio: 1 / 1;	/*正方形にする*/
	border-radius: 50%;		/*円形にする*/
	overflow: hidden;
}
.deco-slideimg3-circle-parts .img-parts img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*右から左へ、左から右へ、のアニメーション*/
.deco-slideimg3-circle-parts .rtl-parts, .deco-slideimg3-circle-parts .ltr-parts {
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

.deco-slideimg3-circle-parts .rtl-parts {animation-name: slide-rtl-parts;}
.deco-slideimg3-circle-parts .ltr-parts {animation-name: slide-ltr-parts;}

@keyframes slide-rtl-parts {
0% {transform: translateX(0);}
100% {transform: translateX(-50%);}
}

@keyframes slide-ltr-parts {
0% {transform: translateX(-50%);}
100% {transform: translateX(0);}
}

css

//===============================================================
// サムネイルスライドショー
//===============================================================
$(document).ready(function() {
    // 各 .img-parts を個別に処理
    $('.deco-slideimg3-circle-parts .img-parts').each(function() {
        var $imgParts = $(this);
        var $divs = $imgParts.children('div');
        var divCount = $divs.length;

// 各 div の幅を計算
        var divWidth = 100 / (divCount * 2);

// サムネイルの枚数に応じてアニメーション時間と幅を計算
        var animationTime = (divCount / 4) * 40 + 's';
        var slideWidth = (divCount / 4) * 200 + '%';

// 各 div に幅を設定
        $divs.css({
            'flex': '0 0 ' + divWidth + '%',
            'width': divWidth + '%'
        });

// .img-parts に animation と width を設定
        $imgParts.css({
            'animation-duration': animationTime,
            'width': slideWidth
        });

// 初期ロード時に子要素を複製して追加
        $divs.clone().appendTo($imgParts);

// サムネイルにマウスが乗った時にアニメーションを一時停止
        $imgParts.on('mouseenter', function() {
            $(this).css('animation-play-state', 'paused');
        });

// サムネイルからマウスが離れた時にアニメーションを再開
        $imgParts.on('mouseleave', function() {
            $(this).css('animation-play-state', 'running');
        });
    });
});

js

deco-slidetext1

テキストを直接htmlに置いたものを横スライドさせたタイプ。

html

css

js

deco-spin1

svg画像を先にDLし、imagesに入れて下さい。円形にテキスト(svg)が回転する装飾用のアニメーション。

html

css

装飾用パーツ

装飾用パーツ

装飾用パーツ一覧

deco-cracker1

deco-kazaritext

deco-slideimg1

deco-slideimg2

deco-slideimg2-circle

deco-slideimg3

deco-slideimg3-circle

deco-slidetext1

deco-spin1

自分で作る
テンプレート

下準備

パーツ選択

旧パーツコーナー

下準備

パーツ選択

旧パーツコーナー

装飾用パーツ

装飾用パーツ

装飾用パーツ一覧

deco-cracker1

deco-kazaritext

deco-slideimg1

deco-slideimg2

deco-slideimg2-circle

deco-slideimg3

deco-slideimg3-circle

deco-slidetext1

deco-spin1

自分で作るテンプレート

下準備

パーツ選択

旧パーツコーナー

下準備

パーツ選択

旧パーツコーナー

自分で作る
テンプレート