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

4月お申し込み分よりライセンス料金変更のお知らせ

その他のパーツ

cracker1

クラッカーアニメーションです。動画を準備して頂ければ入れ替えもできます。

html

css

popup2

3秒後にポップアップ表示します。表示させるまでの秒数はjsで、レイアウトはcssで調整できます。

html

css

popup3

3秒後にポップアップ表示します。表示させるまでの秒数はjsで、レイアウトはcssで調整できます。

html

css

sns1

Font Awesomeを使用したSNSアイコンです。

<h2>others-sns1（SNSアイコン）</h2>
<p>制作時点でFont Awesomeにあった主なSNSアイコンを揃えました。<br>
使いたいものだけ残し、残りは削除して下さい。サイズや色はcssで調整できます。<br>
アイコンをセンタリングしたい場合は、html側の「sns1-parts」の部分を「sns1-parts center」に書き換えて下さい。<br>
<a href="https://template-party.com/tips/tips20211126_font_awesome.html">Font Awesomeの詳しい使い方はこちら。</a></p>

</section>

html

css

yoko-scroll

手動で横スクロールするタイプのボックスです。

<h2>others-yoko-scroll</h2>

<div class="list-parts">
<figure><img src="images/1.jpg" alt=""></figure>
<h4>サンプル見出し。</h4>
<p class="text-parts">サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。</p>
</div>

<div class="list-parts">
<figure><img src="images/2.jpg" alt=""></figure>
<h4>サンプル見出し。</h4>
<p class="text-parts">サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。</p>
</div>

<div class="list-parts">
<figure><img src="images/3.jpg" alt=""></figure>
<h4>サンプル見出し。</h4>
<p class="text-parts">サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。</p>
</div>

<div class="list-parts">
<figure><img src="images/1.jpg" alt=""></figure>
<h4>サンプル見出し。</h4>
<p class="text-parts">サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。</p>
</div>

<div class="list-parts">
<figure><img src="images/2.jpg" alt=""></figure>
<h4>サンプル見出し。</h4>
<p class="text-parts">サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。</p>
</div>

<div class="list-parts">
<figure><img src="images/3.jpg" alt=""></figure>
<h4>サンプル見出し。</h4>
<p class="text-parts">サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。</p>
</div>

</div>

</section>

html

/*list-yoko-scroll-parts
---------------------------------------------------------------------------*/
.list-yoko-scroll-parts * {margin: 0; padding: 0;}

/*横スクロールブロック全体*/
.list-yoko-scroll-parts {
	display: flex;
	overflow-x: auto;
	scrollbar-width: none;	/* Firefox用 */
	scroll-snap-type: x mandatory; /* スナップスクロールを有効にする */
}
.list-yoko-scroll-parts::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Edge用 */
}

/*ブロック内の１個あたり*/
.list-yoko-scroll-parts .list-parts {
	width: 60%;		/*ブロック１個の幅。お好みで変更して下さい。*/
	flex-shrink: 0;
	scroll-snap-align: start;
	padding-right: 1rem;		/*ブロック内の右側に余白。1文字分。*/
	position: relative;
	display: flex;
	flex-direction: column;
}

/*画面幅600px以上の追加指定*/
	@media screen and (min-width:600px) {

/*ブロック内の１個あたり*/
	.list-yoko-scroll-parts .list-parts {
		width: 28%;		/*ブロック１個の幅。お好みで変更して下さい。*/
		padding-right: 2rem;	/*ブロック内の右側に余白。２文字分。*/
	}

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

/*テキストブロック*/
.list-yoko-scroll-parts .list-parts .text-parts {
	flex: 1;
	font-size: 0.85rem;	/*文字サイズ85%*/
	line-height: 1.5;	/*行間*/
}

css

bg-slideup1

※１カラム専用
スクロール量と少しずれて背景画像が動きます。※画像は必ず縦長のものを用意して下さい。

<h2>others-bg-slideup</h2>

<ul class="disc">
<li>背景画像は「縦長」のものを準備して下さい。高さがテキスト量より少ない場合、移動しないので注意して下さい。</li>
<li>準備された背景画像の高さにより、スライド速度も変化します。（より高さがある方が早くなる）</li>
<li>外側の余白をなくしたい場合は<a href="https://template-party.com/parts/manual.html">こちらのマニュアル</a>をご覧下さい。</li>
</ul>

<div class="image-parts"></div>
<div class="text-parts">
<p>ここにテキストを入れます。サンプルテキスト。テキストの量に応じて背景画像の高さも変わります。ここにテキストを入れます。サンプルテキスト。テキストの量に応じて背景画像の高さも変わります。ここにテキストを入れます。</p>
</div>

</div>

<div class="image-parts"></div>
<div class="text-parts">
<p>reverseを追加すると大きな端末で左右配置が逆になります。お好みで。</p>
</div>

</div>

</section>

html

css

//===============================================================
// 背景画像が少しずつ上に移動する
//===============================================================
$(document).ready(function() {
    // 初期設定：背景画像の位置を設定
    updateParallax();

// スクロール時にパララックス効果を更新
    $(window).on('scroll', function() {
        updateParallax();
    });

function updateParallax() {
        var scrollTop = $(window).scrollTop();
        var windowHeight = $(window).height();

$('.image-parts').each(function() {
            var $this = $(this);
            var offsetTop = $this.offset().top;
            var height = $this.outerHeight();

// 要素がビューポート内にあるか確認
            if (offsetTop + height > scrollTop && offsetTop < scrollTop + windowHeight) {
                // 要素のビューポート内での位置を計算
                var percentScrolled = (scrollTop + windowHeight - offsetTop) / (windowHeight + height);
                percentScrolled = percentScrolled > 1 ? 1 : percentScrolled < 0 ? 0 : percentScrolled;

// 背景位置を調整（0%から100%へ）
                var yPos = (percentScrolled * 100);
                $this.css('background-position', 'center ' + yPos + '%');
            }
        });
    }
});

bg-slideup2

※１カラム専用
スクロール量と少しずれて背景画像が動きます。※画像は必ず縦長のものを用意して下さい。

html

css

// スクロール時にパララックス効果を更新
    $(window).on('scroll', function() {
        updateParallax();
    });

function updateParallax() {
        var scrollTop = $(window).scrollTop();
        var windowHeight = $(window).height();

$('.bg-slideup2-parts').each(function() {
            var $this = $(this);
            var offsetTop = $this.offset().top;
            var height = $this.outerHeight();

iframe1

YouTubeをiframe表示。

html

css

openclose1

FAQ用などに使える汎用的な開閉ブロック。

html

css

openclose2

FAQ用などに使える汎用的な開閉ブロック。開閉でアイコンが入れ替わるタイプ。

html

css

thumbnail-changer1

複数のサムネイルが並んでいて、クリックすると、上の大きな画像に入れ替わるパーツ。詳細ページなどに。

html

css

icon1

アイコン類。文字情報は直接html側で変更して下さい。

html

css

その他のパーツ

cracker1

popup2

popup3

sns1

yoko-scroll

bg-slideup1

bg-slideup2

iframe1

openclose1

openclose2

thumbnail-changer1

icon1

自分で作る
テンプレート

下準備

パーツ選択

パーツの使い方

下準備

パーツ選択

パーツの使い方

その他のパーツ

cracker1

popup2

popup3

sns1

yoko-scroll

bg-slideup1

bg-slideup2

iframe1

openclose1

openclose2

thumbnail-changer1

icon1

自分で作るテンプレート

下準備

パーツ選択

パーツの使い方

下準備

パーツ選択

パーツの使い方

自分で作る
テンプレート