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

その他のパーツ

calender1

カレンダーです。カレンダーの設定はjsで、レイアウトはcssで調整できます。

html

/*カレンダー
---------------------------------------------------------------------------*/
/*カレンダーブロック全体*/
#calendar1-parts {
	margin-bottom: 1rem;	/*下に1文字分空ける。「定休日」と書いてある一番下のブロックとの間の余白です。*/
}

/*カレンダーテーブル*/
.calendar1-parts {
	width: 100%;
}

/*年・月を表示しているブロック*/
.calendar1-parts caption {
	font-weight: bold;	/*太字*/
	margin-bottom: 5px;	/*下に空けるスペース*/
}

/*前月、次月の矢印アイコン（Font Awesome使用。アイコン自体はjsで直接指定しています。）*/
.calendar1-parts caption i {
	opacity: 0;	/*リンクがないので、透明にしておく*/
	margin: 0 1rem;	/*上下、左右へ空けるスペース*/
}

/*前月、次月の矢印アイコンでリンクがある場合の追加設定*/
.calendar1-parts caption a i {
	opacity: 1;		/*色を100%出す*/
	color: #999;	/*文字色*/
}

/*カレンダー内のth(曜日)とtd(日付)*/
.calendar1-parts th, .calendar1-parts td {
	border: 1px solid #ccc;	/*テーブルの枠線の幅、線種、色*/
	text-align: center;		/*テキストをセンタリング*/
	padding: 5px;			/*ボックス内の余白*/
}

/*th(曜日)の上書き*/
.calendar1-parts th {
	background: #f0f0f0;	/*背景色*/
}

/*祝日*/
.calendar1-parts .holiday-parts {
	color: #FF0000;	/*文字色*/
}

/*日曜日*/
.calendar1-parts .sunday-parts {
	color: #FF0000;	/*文字色*/
}

/*定休日*/
.calendar1-parts .store-weekly-parts {
	background: #DDEEFF;	/*背景色*/
}

/*定休日（カレンダーブロックの外で使う場合）*/
.store-weekly-list-parts {
	background: #DDEEFF;	/*背景色*/
	display: inline-block;
	width: 20px;
	height: 20px;
	border: 1px solid #ccc;
	transform: translateY(0.3rem);
	margin-right: 5px;
}

/*特別な日（特定の日に色をつけたい場合に使用します。）*/
.calendar1-parts .store-specific-parts {
	background: #EEFFDD;	/*背景色*/
}

/*特別な日（カレンダーブロックの外で使う場合）*/
.store-specific-list-parts {
	background: #EEFFDD;	/*背景色*/
	display: inline-block;
	width: 20px;
	height: 20px;
	border: 1px solid #ccc;
	transform: translateY(0.3rem);
	margin-right: 5px;
}

css

//===============================================================
// カレンダー
//===============================================================
$(function() {
  // リンクで移動可能な期間（例：2025年～2026年）
  const minYear = 2025;
  const maxYear = 2026;
  
  // 祝日（年ごとに指定）削除、追加できます。
  const holidays = {
    "2025": {
      "01-01": true, // 元日
      "01-13": true, // 成人の日（年によって変動するので毎年確認して下さい）
      "02-11": true, // 建国記念の日
      "02-23": true, // 天皇誕生日
      "02-24": true, // 祝日法第3条第2項による休日
      "03-20": true, // 春分の日（年によって前後するので毎年確認して下さい）
      "04-29": true, // 昭和の日
      "05-03": true, // 憲法記念日
      "05-04": true, // みどりの日
      "05-05": true, // こどもの日
      "05-06": true, // 祝日法第3条第2項による休日
      "07-21": true, // 海の日（年によって変動するので毎年確認して下さい）
      "08-11": true, // 山の日
      "09-15": true, // 敬老の日（年によって変動するので毎年確認して下さい）
      "09-23": true, // 秋分の日（年によって前後するので毎年確認して下さい）
      "10-13": true, // スポーツの日（年によって変動するので毎年確認して下さい）
      "11-03": true, // 文化の日
      "11-23": true, // 勤労感謝の日
      "11-24": true, // 祝日法第3条第2項による休日
    },
    "2026": {
      "01-01": true, // 元日
      "01-12": true, // 成人の日（年によって変動するので毎年確認して下さい）
      "02-11": true, // 建国記念の日
      "02-23": true, // 天皇誕生日
      "03-20": true, // 春分の日（年によって前後するので毎年確認して下さい）
      "04-29": true, // 昭和の日
      "05-03": true, // 憲法記念日
      "05-04": true, // みどりの日
      "05-05": true, // こどもの日
      "05-06": true, // 祝日法第3条第2項による休日
      "07-20": true, // 海の日（年によって変動するので毎年確認して下さい）
      "08-11": true, // 山の日
      "09-21": true, // 敬老の日（年によって変動するので毎年確認して下さい）
      "09-22": true, // 祝日法第3条第2項による休日
      "09-23": true, // 秋分の日（年によって前後するので毎年確認して下さい）
      "10-12": true, // スポーツの日（年によって変動するので毎年確認して下さい）
      "11-03": true, // 文化の日
      "11-23": true, // 勤労感謝の日
    },
  };

// 毎週指定された定休日（曜日番号：0(日)～6(土)）削除、追加できます。
  const storeClosedWeekDays = {
    3: true, // 水曜日を定休日に設定した例
  };

// 特別な日（年ごとに指定）削除、追加できます。
  const storeClosedDates = {
    "2025": {
      "07-04": true,
      "12-10": true,
    },
    "2026": {
      "01-26": true,
    },
  };

// 毎週の定休日を、営業日にしたい場合の設定。定休日カラーがリセットされ平常日になります。
  const storeOpenDates = {
    "2025": {
      "04-23": true,
    },
    "2026": {
      "01-07": true,
    }
  };

// 現在の年月（グローバル変数として管理）
  const today = new Date();
  let currentYear = today.getFullYear();
  let currentMonth = today.getMonth(); // 0～11
  
  // 範囲外の場合は、設定範囲内に補正
  if(currentYear < minYear){
    currentYear = minYear;
    currentMonth = 0;
  } else if(currentYear > maxYear){
    currentYear = maxYear;
    currentMonth = 11;
  }

// カレンダー描画用の関数
  function renderCalendar(year, month) {
    // 対象年の祝日、特別な日、営業日オーバーライドのオブジェクト
    const currentHolidays = holidays[year] || {};
    const currentStoreClosedDates = storeClosedDates[year] || {};
    const currentStoreOpenDates = storeOpenDates[year] || {};
    
    // 曜日の名称（日本語）
    const weekDays = ["日", "月", "火", "水", "木", "金", "土"];
    
    // 当月初日・最終日
    const firstDay = new Date(year, month, 1);
    const lastDay = new Date(year, month + 1, 0);
    const numDays = lastDay.getDate();
    const startDay = firstDay.getDay();
    
    let html = "<table class='calendar1-parts'>";
    
    // キャプションに前月・翌月のリンクを配置
    html += "<caption>";
    // 前月の計算
    const prevMonth = (month === 0) ? 11 : month - 1;
    const prevYear = (month === 0) ? year - 1 : year;
    if(prevYear >= minYear) {
      html += "<a href='#' id='prevMonth'><i class=\"fa-solid fa-angles-left\"></i></a>";
    } else {
      html += "<i class=\"fa-solid fa-angles-left\"></i>";
    }
    html += year + "年 " + (month + 1) + "月";
    // 翌月の計算
    const nextMonth = (month === 11) ? 0 : month + 1;
    const nextYear = (month === 11) ? year + 1 : year;
    if(nextYear <= maxYear) {
      html += "<a href='#' id='nextMonth'><i class=\"fa-solid fa-angles-right\"></i></a>";
    } else {
      html += "<i class=\"fa-solid fa-angles-right\"></i>";
    }
    html += "</caption>";
    
    // 曜日ヘッダー
    html += "<tr>";
    for (let i = 0; i < weekDays.length; i++){
      html += "<th>" + weekDays[i] + "</th>";
    }
    html += "</tr>";
    
    // 日付セルの生成
    let day = 1;
    for (let i = 0; i < 6; i++){
      html += "<tr>";
      for (let j = 0; j < 7; j++){
        if(i === 0 && j < startDay) {
          html += "<td></td>";
        } else if(day > numDays) {
          html += "<td></td>";
        } else {
          const m = ("0" + (month + 1)).slice(-2);
          const d = ("0" + day).slice(-2);
          const key = m + "-" + d;
          
          if(currentStoreClosedDates[key]){
            html += "<td class='store-specific-parts'>" + day + "</td>";
          } else if(currentStoreOpenDates[key]){
            if(currentHolidays[key]){
              html += "<td class='holiday-parts'>" + day + "</td>";
            } else if(j === 0){
              html += "<td class='sunday-parts'>" + day + "</td>";
            } else if(j === 6){
              html += "<td class='saturday-parts'>" + day + "</td>";
            } else {
              html += "<td>" + day + "</td>";
            }
          } else if(storeClosedWeekDays[j]){
            // 毎週指定された定休日
            html += "<td class='store-weekly-parts'>" + day + "</td>";
          } else if(currentHolidays[key]){
            // 祝日
            html += "<td class='holiday-parts'>" + day + "</td>";
          } else if(j === 0) {
            // 日曜日
            html += "<td class='sunday-parts'>" + day + "</td>";
          } else if(j === 6) {
            // 土曜日
            html += "<td class='saturday-parts'>" + day + "</td>";
          } else {
            html += "<td>" + day + "</td>";
          }
          day++;
        }
      }
      html += "</tr>";
      if(day > numDays) break;
    }
    html += "</table>";
    
    // カレンダー領域に出力
    $("#calendar1-parts").html(html);
    
    // 前月リンクのクリックイベント
    $("#prevMonth").click(function(e){
      e.preventDefault();
      if(prevYear < minYear) return;
      currentYear = prevYear;
      currentMonth = prevMonth;
      renderCalendar(currentYear, currentMonth);
    });
    
    // 翌月リンクのクリックイベント
    $("#nextMonth").click(function(e){
      e.preventDefault();
      if(nextYear > maxYear) return;
      currentYear = nextYear;
      currentMonth = nextMonth;
      renderCalendar(currentYear, currentMonth);
    });
  }
  
  // 初期描画
  renderCalendar(currentYear, currentMonth);
});

animation-spin1

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

html

css

japan-map1

日本地図。

<h2>others-japan-map1</h2>
<ul>
<li>昔、１度だけ使った日本地図です。もったいないのでパーツに追加しました。色変更はcssでできます。</li>
</ul>

</ul>

</section>

html

/*日本地図
---------------------------------------------------------------------------*/
/*地図全体を囲むブロック*/
#japan-map1-parts {
	margin: 0;padding: 0;list-style: none;
	position: relative;
	font-size: 12px;	/*文字サイズ*/
	line-height: 1;		/*行間を狭く*/
	height: 800px;		/*ブロックの高さ*/
}

/*１つあたりの県の共通設定*/
#japan-map1-parts a {
	text-decoration: none;position: absolute;text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 7.5%;	/*幅*/
	height: 7%;		/*高さ*/
	color: #000;	/*文字色*/
	box-shadow: 2px 2px 3px rgba(0,0,0,0.2);	/*ボックスの影。右へ、下へ、ぼかす幅、0,0,0は黒の事で0.2は色が20%出た状態*/
	border-radius: 5px;	/*角を少しだけ丸く*/
}

/*マウスオン時にボックスの影を消す*/
#japan-map1-parts a:hover {
	box-shadow: none;
}

/*九州ブロック-------------------------------*/
#japan-map1-parts .kyusyu a {background: #f4c9e3;}

#japan-map1-parts .okinawa {left: 1%;bottom: 0px;}
#japan-map1-parts .kagoshima {left: 1%;bottom: 12%;width: 15.5% !important;}
#japan-map1-parts .kumamoto {left: 1%;bottom: 20%;}
#japan-map1-parts .miyazaki {left: 9%;bottom: 20%;}
#japan-map1-parts .nagasaki {left: 1%;bottom: 28%;}
#japan-map1-parts .oita {left: 9%;bottom: 28%;}
#japan-map1-parts .saga {left: 1%;bottom: 36%;}
#japan-map1-parts .fukuoka {left: 9%;bottom: 36%;}

/*四国ブロック-------------------------------*/
#japan-map1-parts .shikoku a {background: #dec3f4;}

#japan-map1-parts .kochi {left: 19%;bottom: 12%;}
#japan-map1-parts .ehime {left: 27%;bottom: 12%;}
#japan-map1-parts .kagawa {left: 19%;bottom: 20%;}
#japan-map1-parts .tokushima {left: 27%;bottom: 20%;}

/*中国ブロック-------------------------------*/
#japan-map1-parts .cyugoku a {background: #f4c7c3;}

#japan-map1-parts .yamaguchi {left: 19%;bottom: 30%;height: 15% !important;}
#japan-map1-parts .hiroshima {left: 27%;bottom: 30%;}
#japan-map1-parts .okayama {left: 35%;bottom: 30%;}
#japan-map1-parts .shimane {left: 27%;bottom: 38%;}
#japan-map1-parts .tottori {left: 35%;bottom: 38%;}

/*関西ブロック-------------------------------*/
#japan-map1-parts .kansai a {background: #f7daba;}

#japan-map1-parts .hyogo {left: 43%;bottom: 30%;height: 15% !important;}
#japan-map1-parts .kyoto {left: 51%;bottom: 38%;}
#japan-map1-parts .shiga {left: 59%;bottom: 38%;}
#japan-map1-parts .osaka {left: 51%;bottom: 30%;}
#japan-map1-parts .nara {left: 59%;bottom: 30%;}
#japan-map1-parts .mie {left: 59%;bottom: 22%;}
#japan-map1-parts .wakayama {left: 51%;bottom: 22%;}

/*中部ブロック-------------------------------*/
#japan-map1-parts .tyubu a {background: #f7f1ad;}

#japan-map1-parts .fukui {left: 59%;bottom: 46%;}
#japan-map1-parts .ishikawa {left: 59%;bottom: 54%;}
#japan-map1-parts .toyama {left: 67%;bottom: 46%;}
#japan-map1-parts .gifu {left: 67%;bottom: 38%;}
#japan-map1-parts .aichi {left: 67%;bottom: 30%;}
#japan-map1-parts .nigata {left: 67%;bottom: 54%;width: 15.5% !important;}
#japan-map1-parts .nagano {left: 75%;bottom: 46%;}
#japan-map1-parts .yamanashi {left: 75%;bottom: 38%;}
#japan-map1-parts .shizuoka {left: 75%;bottom: 30%;}

/*関東ブロック-------------------------------*/
#japan-map1-parts .kanto a {background: #cbefcf;}

#japan-map1-parts .kanagawa {left: 83%;bottom: 30%;}
#japan-map1-parts .tokyo {left: 83%;bottom: 38%;}
#japan-map1-parts .saitama {left: 83%;bottom: 46%;}
#japan-map1-parts .gunma {left: 91%;bottom: 46%;}
#japan-map1-parts .tochigi {left: 91%;bottom: 38%;}
#japan-map1-parts .ibaraki {left: 91%;bottom: 30%;}
#japan-map1-parts .chiba {left: 91%;bottom: 22%;}

/*東北ブロック-------------------------------*/
#japan-map1-parts .tohoku a {background: #bae6f7;}

#japan-map1-parts .fukushima {left: 83%;bottom: 54%;width: 15.5% !important;}
#japan-map1-parts .yamagata {left: 83%;bottom: 62%;}
#japan-map1-parts .miyagi {left: 91%;bottom: 62%;}
#japan-map1-parts .akita {left: 83%;bottom: 70%;}
#japan-map1-parts .iwate {left: 91%;bottom: 70%;}
#japan-map1-parts .aomori {left: 83%;bottom: 78%; width: 15.5% !important;}

/*北海道ブロック-------------------------------*/
#japan-map1-parts .hokkaido a {background: #b9c6f9;}

#japan-map1-parts .hokkaido a {left: 83%;bottom: 86%;width: 15.5% !important;height: 10% !important;}

css

cracker1

クラッカー画像を先にDKし、imagesに入れておいて下さい。動画を準備して頂ければ入れ替えもできます。

html

css

popup1

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

html

/*ポップアップ
---------------------------------------------------------------------------*/
#popup1-parts * {margin: 0;padding: 0;}

/*オーバーレイ効果（背後の画面を暗転させる場合）使う場合、ポップアップウィンドウの他に「popup1-overlay-parts」の１行が必要です。*/
#popup1-overlay-parts {
	display: none;
	position: fixed;z-index: 1000;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.5); /*ポップアップ外の色。0,0,0は黒のことで0.5は色が50%出た状態。*/
}

/*ポップアップウィンドウ*/
#popup1-parts {
	display: none;
	font-size: 0.9rem;	/*文字サイズ90%*/
	padding: 1rem 2rem;	/*上下、左右の余白*/
	position: fixed;z-index: 1001;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 500px;		/*幅*/
	max-height: 50vh;	/*最大の高さ。画面の50%。*/
	overflow: auto;
	background: rgba(0,0,0,0.7);	/*背景色。0,0,0は黒のことで0.7は色が70%出た状態。*/
	color: #fff;					/*文字色*/
	border: 1px solid #333;			/*枠線の幅、線種、色*/
}

/*閉じるボタン*/
#popup1-parts .close-btn-parts {
	display: block;
	width: 50px;		/*ボタンの幅*/
	line-height: 50px;	/*ボタンの高さ*/
	text-align: center;
	position: absolute;
	right: 0px;	/*ボックスの配置場所指定。rightなので右から0px。*/
	top: 0px;	/*ボックスの配置場所指定。topなので上から0px。*/
	background: #ff0000;	/*背景色*/
	color: #fff;			/*文字色*/
	cursor: pointer;
}

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

その他のパーツ

calender1

animation-spin1

japan-map1

cracker1

popup1

popup2

popup3

sns1

yoko-scroll

bg-slideup1

bg-slideup2

iframe1

openclose1

openclose2

thumbnail-changer1

icon1

自分で作る
テンプレート

下準備

パーツ選択

パーツの使い方

下準備

パーツ選択

パーツの使い方

その他のパーツ

calender1

animation-spin1

japan-map1

cracker1

popup1

popup2

popup3

sns1

yoko-scroll

bg-slideup1

bg-slideup2

iframe1

openclose1

openclose2

thumbnail-changer1

icon1

自分で作るテンプレート

下準備

パーツ選択

パーツの使い方

下準備

パーツ選択

パーツの使い方

自分で作る
テンプレート