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

others-imagemap1

マップ画像を先にDLし、
imagesフォルダ内に入れてからプレビューして下さい。地図の上の任意の場所にアイコンを重ねたタイプ。

<p class="c"><a href="https://template-party.com/parts-new/others/others-imagemap1/map.zip">マップ画像を先にDL</a>し、<br>
imagesフォルダ内に入れてからプレビューして下さい。</p>

<h2>others-imagemap1-parts</h2>

<p>マップもピンの位置もも全てhtml側に直接指定が入っています。<br>
ピンの位置は、styleという後の数値になります。top（上からの配置）とleft（左からの配置）のみ使って下さい。bottomやrightを使うと場所がずれます。</p>

<div class="pin-item-parts" style="top: 40%; left: 40%;">
<i class="fa-solid fa-location-dot"></i>
<span class="pin-label-parts">#03 ショッピング</span>
</div>

</div>

</section>

html

/*others-imagemap1（イメージマップ風）
---------------------------------------------------------------------------*/
/*マップ全体を囲むブロック*/
.others-imagemap1-parts {
	position: relative;
	width: 100%;
	line-height: 1.2;
}

/*地図イラスト*/
.others-imagemap1-parts .base-image-parts {
	width: 100%;
	height: auto;
	display: block;
}

/*ピン（アイコンマーク）の配置の基準設定と、ピンデザイン*/
.others-imagemap1-parts .pin-item-parts {
	position: absolute;
	transform: translate(-50%, -50%);
	text-decoration: none;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

/*ピン（アイコンマーク）*/
.others-imagemap1-parts i {
	font-size: clamp(10px, 4vw, 30px);	/*文字サイズ。最小10px、最大30px、それ以外は4vw。*/
	text-shadow: 
		2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, /* 白いフチ */
		3px 3px 5px rgba(0,0,0,0.5); /* 影 */
	transition: transform 0.2s;
	color: #ff0000;	/*アイコン色*/
}

/*ラベル（テキスト）*/
.others-imagemap1-parts .pin-label-parts {
	background: #fff;	/*背景色*/
	color: #333;		/*文字色*/
	border: 2px solid #333;	/*枠線の幅、線種、色*/
	padding: 4px 8px;	/*ラベル内の余白。上下、左右に。*/
	border-radius: 4px;	/*角を少しだけ丸くする*/
	font-size: clamp(10px, 1.2vw, 20px);	/*文字サイズ。最小10px、最大20px、それ以外は1.2vw。*/
	font-weight: bold;	/*太字に*/
	white-space: nowrap; /* 文字を折り返さない */
}

/* ホバー時の動き（PC用） */
.others-imagemap1-parts .pin-item-parts:hover i {
	transform: scale(1.2) translateY(-5px); /* ちょっと大きくなって浮く */
}

css

others-calender1

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

html

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

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

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

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

/*前月、次月の矢印アイコンでリンクがある場合の追加設定*/
.others-calendar1-parts caption a i {
	opacity: 1;		/*色を100%出す*/
	color: var(--bg-inverse-color);	/*文字色。theme.cssのbg-inverse-colorを読み込みます。*/
}

/*カレンダー内のth(曜日)とtd(日付)*/
.others-calendar1-parts th, .others-calendar1-parts td {
	border: 1px solid var(--border-color);	/*テーブルの枠線の幅、線種、var以降は色の指定でtheme.cssのborder-colorを読み込みます。*/
	text-align: center;		/*テキストをセンタリング*/
	padding: 5px;			/*ボックス内の余白*/
}

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

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

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

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

/*定休日（カレンダーブロックの外で使う場合）*/
.others-calendar1-weekly-parts {
	background: #DDEEFF;	/*背景色*/
	display: inline-block;
	width: 20px;
	height: 20px;
	border: 1px solid var(--border-color);	/*枠線の幅、線種、var以降は色の指定でtheme.cssのborder-colorを読み込みます。*/
	transform: translateY(0.3rem);
	margin-right: 5px;
}

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

/*特別な日（カレンダーブロックの外で使う場合）*/
.others-calendar1-specific-parts {
	background: #EEFFDD;	/*背景色*/
	display: inline-block;
	width: 20px;
	height: 20px;
	border: 1px solid var(--border-color);	/*枠線の幅、線種、var以降は色の指定でtheme.cssのborder-colorを読み込みます。*/
	transform: translateY(0.3rem);
	margin-right: 5px;
}

css

//===============================================================
// カレンダー（2026年〜2027年）
//===============================================================
$(function() {
  // リンクで移動可能な期間（例：2026年～2027年）
  const minYear = 2026;
  const maxYear = 2027;
  
  // 祝日（年ごとに指定）削除、追加できます。
  // ※2026/2027 は内閣府の「国民の祝日・休日」一覧に合わせています。
  const holidays = {
    "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条第3項による休日）
      "09-23": true, // 秋分の日
      "10-12": true, // スポーツの日
      "11-03": true, // 文化の日
      "11-23": true, // 勤労感謝の日
    },
    "2027": {
      "01-01": true, // 元日
      "01-11": true, // 成人の日
      "02-11": true, // 建国記念の日
      "02-23": true, // 天皇誕生日
      "03-21": true, // 春分の日
      "03-22": true, // 休日（祝日法第3条第2項による休日）
      "04-29": true, // 昭和の日
      "05-03": true, // 憲法記念日
      "05-04": true, // みどりの日
      "05-05": true, // こどもの日
      "07-19": true, // 海の日
      "08-11": true, // 山の日
      "09-20": true, // 敬老の日
      "09-23": true, // 秋分の日
      "10-11": true, // スポーツの日
      "11-03": true, // 文化の日
      "11-23": true, // 勤労感謝の日
    },
  };

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

// 特別な日（年ごとに指定）削除、追加できます。（例として3つ入れてあります）
  const storeClosedDates = {
    "2026": {
      "01-26": true,
      "06-18": true,
    },
    "2027": {
      "06-15": true,
    },
  };

// 毎週の定休日を、営業日にしたい場合の設定。（例として3つ入れてあります）
  // ※定休日カラーがリセットされ、平常日扱いになります。
  const storeOpenDates = {
    "2026": {
      "01-07": true, // 水曜を営業日にする例
    },
    "2027": {
      "03-03": true, // 水曜を営業日にする例
      "12-29": 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='others-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>";
    
    // カレンダー領域に出力
    $("#others-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);
});

js

others-bg-slideup-movie1

スクロール量と少しずれて背景動画が動きます。

<h2>others-bg-slideup-movie1</h2>
<p>スクロールとともに動画が少し上にずれていくパララックス。<br>
微調整はjsで行うことができます。</p>

</section>

<h2>others-bg-slideup-movie1</h2>
<p>動画の色そのまま。</p>

</section>

<h2>others-bg-slideup-movie1 overlay</h2>
<p>動画に半透明の黒を重ね、上にテキスト配置。</p>

<div class="others-bg-slideup-movie1 overlay">
<video class="scrollfx-move bgVideo" autoplay muted loop playsinline preload="metadata">
  <source src="images/movie.mp4" media="(max-width: 800px)" type="video/mp4">
  <source src="images/movie.mp4" type="video/mp4">
</video>
<div class="text">
<h2 class="c">タイトル</h2>
<p class="c">ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。</p>
</div>
</div>

</section>

<h2>others-bg-slideup-movie1 bleed-x-parts</h2>
<p>幅いっぱい確保したい場合は、others-bg-slideup-movie1にbleed-x-partsを追加して下さい。</p>

</section>

<h2>others-bg-slideup-movie1 overlay bleed-x-parts</h2>
<p>上のオーバーレイタイプ。</p>

<div class="others-bg-slideup-movie1 overlay bleed-x-parts">
<video class="scrollfx-move bgVideo" autoplay muted loop playsinline preload="metadata">
  <source src="images/movie.mp4" media="(max-width: 800px)" type="video/mp4">
  <source src="images/movie.mp4" type="video/mp4">
</video>
<div class="text">
<h2 class="c">タイトル</h2>
<p class="c">ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。</p>
</div>
</div>

</section>

html

/*画像・動画がupするパララックス
---------------------------------------------------------------------------*/
/*ブロック全体*/
.others-bg-slideup-movie1 {
	position: relative;
	height: 30rem;	/*高さ。30文字分。pxやアスペクト比でもOK。*/
	overflow: hidden;
}

/*画像・動画を暗くしたい場合はhtml側に.overlayを追加する*/
.others-bg-slideup-movie1.overlay::before {
	content: "";
	position: absolute;z-index: 1;
	inset: 0;
	background-color: rgba(0,0,0,0.5);	/*重ねる色。0,0,0は黒のことで0.5は色が50%出た状態。*/
}

/*動かすための設定。設定本体は、jsの「▼ここだけ調整（全ブロック共通）」の数行で調整できます。*/
.scrollfx-move {
	--fx-extra: 240px;	/*JSでまとめて上書き*/
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	width: 100%;
	height: calc(100% + var(--fx-extra));
	object-fit: cover;
	will-change: transform;
	transform: translate3d(0,-50%,0);
}

/* テキストを天地左右中央 */
.others-bg-slideup-movie1 .text {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	z-index: 2;
	padding: 1rem 10vw;	/*ボックス内の余白。上下に１文字分、左右にウィンドウ幅の10%ずつ。*/
	color: #fff;	/*文字色*/
	font-size: 0.9rem;	/*文字サイズ90%*/
}

css

//===============================================================
// 画像・動画アップのパララックス
//===============================================================
(() => {
  "use strict";

const reduceMotion = window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
  if (reduceMotion) return;

/* =========================================================
    ▼ここだけ調整（全ブロック共通）
  ========================================================= */
  const maxMove     = 80;   // px：上下に動く最大量（大きいほど動く）
  const speed       = 1;    // 倍率：0.7で弱め、1.3で強め
  const dir         = 1;    // 1=通常 / -1=逆方向
  const extraHeight = 240;  // px：黒背景が見える時に増やす（目安：maxMove*2より大きく）
  /* ========================================================= */

const boxes = Array.from(document.querySelectorAll(".others-bg-slideup-movie1"));
  if (!boxes.length) return;

if (!items.length) return;

const clamp01 = n => (n < 0 ? 0 : (n > 1 ? 1 : n));

let vh = window.innerHeight || 0;
  let ticking = false;

function measure(){
    vh = window.innerHeight || 0;
    const scrollY = window.pageYOffset || document.documentElement.scrollTop || 0;

items.forEach(item => {
      const r = item.box.getBoundingClientRect();
      item.top = r.top + scrollY;
      item.height = r.height || 0;
    });

requestTick();
  }

function update(){
    ticking = false;

const scrollY = window.pageYOffset || document.documentElement.scrollTop || 0;
    const viewBottom = scrollY + vh;

items.forEach(item => {
      const denom = (vh + item.height) || 1;
      const p = clamp01((viewBottom - item.top) / denom); // 0..1
      const t = (p - 0.5) * 2; // -1..+1
      const y = t * maxMove * speed * dir;

item.move.style.transform = `translate3d(0, calc(-50% + ${y.toFixed(2)}px), 0)`;
    });
  }

function requestTick(){
    if (ticking) return;
    ticking = true;
    requestAnimationFrame(update);
  }

window.addEventListener("scroll", requestTick, { passive: true });

let resizeTimer = 0;
  window.addEventListener("resize", () => {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(measure, 100);
  });

window.addEventListener("load", measure);
})();

js

others-bg-slideup1

スクロール量と少しずれて背景画像が動きます。

<h2>others-bg-slideup1</h2>
<p>スクロールとともに画像が少し上にずれていくパララックス。<br>
微調整はjsで行うことができます。</p>

</section>

<h2>others-bg-slideup1</h2>
<p>画像の色そのまま。</p>

</section>

<h2>others-bg-slideup1 overlay</h2>
<p>画像に半透明の黒を重ね、上にテキスト配置。</p>

<div class="others-bg-slideup1 overlay">
<img src="images/1.jpg" alt="" class="scrollfx-move">
<div class="text">
<h2 class="c">タイトル</h2>
<p class="c">ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。</p>
</div>
</div>

</section>

<h2>others-bg-slideup1 bleed-x-parts</h2>
<p>幅いっぱい確保したい場合は、others-bg-slideup1にbleed-x-partsを追加して下さい。</p>

</section>

<h2>others-bg-slideup1 overlay bleed-x-parts</h2>
<p>上のオーバーレイタイプ。</p>

<div class="others-bg-slideup1 overlay bleed-x-parts">
<img src="images/1.jpg" alt="" class="scrollfx-move">
<div class="text">
<h2 class="c">タイトル</h2>
<p class="c">ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。</p>
</div>
</div>

</section>

html

/*画像・動画がupするパララックス
---------------------------------------------------------------------------*/
/*ブロック全体*/
.others-bg-slideup1 {
	position: relative;
	height: 30rem;	/*高さ。30文字分。pxやアスペクト比でもOK。*/
	overflow: hidden;
}

/*画像・動画を暗くしたい場合はhtml側に.overlayを追加する*/
.others-bg-slideup1.overlay::before {
	content: "";
	position: absolute;z-index: 1;
	inset: 0;
	background-color: rgba(0,0,0,0.5);	/*重ねる色。0,0,0は黒のことで0.5は色が50%出た状態。*/
}

/*動かすための設定。設定本体は、jsの「▼ここだけ調整（全ブロック共通）」の数行で調整できます。*/
.scrollfx-move {
	--fx-extra: 240px;	/*JSでまとめて上書き*/
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	width: 100%;
	height: calc(100% + var(--fx-extra));
	object-fit: cover;
	will-change: transform;
	transform: translate3d(0,-50%,0);
}

/* テキストを天地左右中央 */
.others-bg-slideup1 .text {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	z-index: 2;
	padding: 1rem 10vw;	/*ボックス内の余白。上下に１文字分、左右にウィンドウ幅の10%ずつ。*/
	color: #fff;	/*文字色*/
	font-size: 0.9rem;	/*文字サイズ90%*/
}

css

//===============================================================
// 画像・動画アップのパララックス
//===============================================================
(() => {
  "use strict";

const reduceMotion = window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
  if (reduceMotion) return;

/* =========================================================
    ▼ここだけ調整（全ブロック共通）
  ========================================================= */
  const maxMove     = 80;   // px：上下に動く最大量（大きいほど動く）
  const speed       = 1;    // 倍率：0.7で弱め、1.3で強め
  const dir         = 1;    // 1=通常 / -1=逆方向
  const extraHeight = 240;  // px：黒背景が見える時に増やす（目安：maxMove*2より大きく）
  /* ========================================================= */

const boxes = Array.from(document.querySelectorAll(".others-bg-slideup1"));
  if (!boxes.length) return;

if (!items.length) return;

const clamp01 = n => (n < 0 ? 0 : (n > 1 ? 1 : n));

let vh = window.innerHeight || 0;
  let ticking = false;

function measure(){
    vh = window.innerHeight || 0;
    const scrollY = window.pageYOffset || document.documentElement.scrollTop || 0;

items.forEach(item => {
      const r = item.box.getBoundingClientRect();
      item.top = r.top + scrollY;
      item.height = r.height || 0;
    });

requestTick();
  }

function update(){
    ticking = false;

const scrollY = window.pageYOffset || document.documentElement.scrollTop || 0;
    const viewBottom = scrollY + vh;

items.forEach(item => {
      const denom = (vh + item.height) || 1;
      const p = clamp01((viewBottom - item.top) / denom); // 0..1
      const t = (p - 0.5) * 2; // -1..+1
      const y = t * maxMove * speed * dir;

item.move.style.transform = `translate3d(0, calc(-50% + ${y.toFixed(2)}px), 0)`;
    });
  }

function requestTick(){
    if (ticking) return;
    ticking = true;
    requestAnimationFrame(update);
  }

window.addEventListener("scroll", requestTick, { passive: true });

let resizeTimer = 0;
  window.addEventListener("resize", () => {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(measure, 100);
  });

window.addEventListener("load", measure);
})();

js

others-c2-1

section内で使う2カラムボックス。

html

css

others-free1

汎用的なレイアウト。

<h2 class="c">others-free1-parts</h2>
<p class="c">使いたいブロックの「list-parts」をコピペしてください。外側の「others-free1-parts」は必須です。<br>画面幅500px以下では全て１カラムになります。</p>

<div class="text-parts text-01-parts inview">
	<h4>タイトル</h4>
	<p>美味しさと品質にこだわった、選りすぐりのグルメをセレクトしました。
	贅沢な和牛や新鮮なシーフード、農家直送の旬の野菜、心ときめくスイーツまで。
	特別な日のおもてなしにも、日々の食卓を豊かにする一品にも最適です。</p>
	<p>お気に入りの味を見つけて、もっと楽しく、もっと美味しい食の時間を始めませんか？<br>
	あなたの毎日を特別にする、とっておきのグルメをお届けします。</p>
	</div>

</div>

<div class="text-parts text-01-parts inview">
	<h4>reverse-partsを追加すると左右逆になります</h4>
	<p>美味しさと品質にこだわった、選りすぐりのグルメをセレクトしました。
	贅沢な和牛や新鮮なシーフード、農家直送の旬の野菜、心ときめくスイーツまで。
	特別な日のおもてなしにも、日々の食卓を豊かにする一品にも最適です。</p>
	<p>お気に入りの味を見つけて、もっと楽しく、もっと美味しい食の時間を始めませんか？<br>
	あなたの毎日を特別にする、とっておきのグルメをお届けします。</p>
	</div>

</div>

<div class="text-parts text-01-parts inview">
	<h4>imgにshadow-partsをつけると薄い影がつきます</h4>
	<p>美味しさと品質にこだわった、選りすぐりのグルメをセレクトしました。
	贅沢な和牛や新鮮なシーフード、農家直送の旬の野菜、心ときめくスイーツまで。
	特別な日のおもてなしにも、日々の食卓を豊かにする一品にも最適です。</p>
	<p>お気に入りの味を見つけて、もっと楽しく、もっと美味しい食の時間を始めませんか？<br>
	あなたの毎日を特別にする、とっておきのグルメをお届けします。</p>
	</div>

</div>

<div class="text-parts text-02-parts inview ">
	<h4>画像の外側ボックスに「bleed-left-parts」を追加すると、画面左に寄ります。</h4>
	<p>美味しさと品質にこだわった、選りすぐりのグルメをセレクトしました。
	贅沢な和牛や新鮮なシーフード、農家直送の旬の野菜、心ときめくスイーツまで。
	特別な日のおもてなしにも、日々の食卓を豊かにする一品にも最適です。</p>
	<p>お気に入りの味を見つけて、もっと楽しく、もっと美味しい食の時間を始めませんか？<br>
	あなたの毎日を特別にする、とっておきのグルメをお届けします。</p>
	</div>

</div>

<div class="text-parts text-02-parts inview">
	<h4>画像の外側ボックスに「bleed-right-parts」を追加すると、画面右に寄ります。</h4>
	<p>美味しさと品質にこだわった、選りすぐりのグルメをセレクトしました。
	贅沢な和牛や新鮮なシーフード、農家直送の旬の野菜、心ときめくスイーツまで。
	特別な日のおもてなしにも、日々の食卓を豊かにする一品にも最適です。</p>
	<p>お気に入りの味を見つけて、もっと楽しく、もっと美味しい食の時間を始めませんか？<br>
	あなたの毎日を特別にする、とっておきのグルメをお届けします。</p>
	</div>

</div>

</div>

</div>

</div>

</section>

html

/*others-free1-parts（色々なレイアウト用）
---------------------------------------------------------------------------*/
/*ボックス内のh4*/
.others-free1-parts h4{
	margin: 0;
	font-size: 1.1rem;
}

/*画像の影をつける場合*/
.shadow-parts {
	box-shadow: 4vw 4vw rgba(0,0,0,0.05);	/*右へ、下へ、0,0,0は黒のことで0.05は5%だけ色が出た状態。*/
}

/*画像と文字を囲むブロック*/
.others-free1-parts .list-parts {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr)); /* 12等分 */
	gap: 5vw; /*要素間の隙間。画面幅100% = 100vwです。お好みで。*/
	margin-bottom: 5vw;	/*下に空けるスペース。お好みで。*/
	grid-auto-flow: dense;
}
.others-free1-parts .list-parts:last-child {
  margin-bottom: 0;	/*最後のブロックの下マージンをなくす*/
}

/*imageとtextの設定*/
.others-free1-parts .image-parts,
.others-free1-parts .text-parts {
	align-self: center;
	position: relative;
}

/*imageのみの設定*/
.others-free1-parts .image-parts {
	grid-column: 1 / -1;
}

/*textのみの設定*/
.others-free1-parts .text-parts {
	grid-column: 1 / -1;
}

/*image-wide（横長で使う場合）*/
.others-free1-parts .image-wide-parts {
	grid-column: 1 / -1;
}

/*image-01-parts*/
.others-free1-parts .image-01-parts {
	grid-column: 8 / -1;
}
/*.text-01-parts*/
.others-free1-parts .text-01-parts {
	grid-column: 1 / 8;
}
/*image-01-parts（左右入れ替え用）*/
.others-free1-parts .list-parts.reverse-parts .image-01-parts {
	grid-column: 1 / 6;
}
/*text-01-parts（左右入れ替え用）*/
.others-free1-parts .list-parts.reverse-parts .text-01-parts {
	grid-column: 6 / -1;
}

/*image-02-parts*/
.others-free1-parts .image-02-parts {
	grid-column: 1 / 10;
}
/*text-02*/
.others-free1-parts .text-02-parts {
	grid-column: 1 / 10;
}
/*image-02-parts（左右入れ替え用）*/
.others-free1-parts .list-parts.reverse-parts .image-02-parts {
	grid-column: 4 / -1;
}
/*text-02（左右入れ替え用）*/
.others-free1-parts .list-parts.reverse-parts .text-02-parts {
	grid-column: 4 / -1;
}

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

/*画像と文字を囲むブロック*/
	.others-free1-parts .list-parts {
		display: block;
		margin-bottom: 3rem;
	}
	
	}/*追加指定ここまで*/

css

others-iframe1

アスペクト比固定でGoogle MapをiFrameで埋め込む。YouTube動画にも。

html

css

others-map1

日本地図。

<h2>others-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

others-masonry1

サムネイルがレンガ状に隙間なく積み重なるレイアウト。ご利用の際はこちらをお読み下さい。

<h2>others-maronry1-parts</h2>
<p><a href="https://template-party.com/parts-new/others/others-masonry1/manual.html">使い方マニュアルと、素材のダウンロードはこちらから。</a></p>
<p>画像の他、動画も配置できますが、容量が大きいとページの表示がガタつくので注意して下さい。<br>
素材を追加する場合は、既存の画像または動画のブロックをコピペし、ファイル名だけ入れ替えればOKです。<br>
「data-caption」はクリック時に画像下に表示されるテキストです。</p>

<div class="masonry1-size-parts"></div>

</div>

</section>

html

/*Masonry
---------------------------------------------------------------------------*/
/*サムネを囲んでいるブロック全体*/
.others-maronry1-parts {
  animation: opa1 0.2s 0.4s both;  /*0.4秒待機後、0.2秒かけてフェードイン*/
}

/* カラム幅：PC 4列 */
.others-maronry1-parts .masonry1-size-parts,
.others-maronry1-parts .list-parts {
  width: calc(25% - 16px);
}

.others-maronry1-parts .list-parts {
  margin-bottom: 16px;
}

/* レスポンシブ：1000px 未満で 3列 */
@media (max-width: 1000px) {
  .others-maronry1-parts .masonry1-size-parts,
  .others-maronry1-parts .list-parts {
    width: calc(33.333% - 16px);
  }
}

/* レスポンシブ：500px 未満で 2列 */
@media (max-width: 500px) {
  .others-maronry1-parts .masonry1-size-parts,
  .others-maronry1-parts .list-parts {
    width: calc(50% - 16px);
  }
}

/* 中身共通 */
.others-maronry1-parts .list-parts a {
  display: block;
  text-decoration: none;
  color: inherit;
}

.others-maronry1-parts .list-parts img,
.others-maronry1-parts .list-parts video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}

/* 画像・動画に軽いホバー演出 */
.others-maronry1-parts .list-parts img,
.others-maronry1-parts .media-wrapper {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.others-maronry1-parts .list-parts a:hover img,
.others-maronry1-parts .list-parts a:hover .media-wrapper {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

/* 動画サムネ用ラッパー */
.others-maronry1-parts .media-wrapper {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
}

/* サムネ動画 */
.others-maronry1-parts .thumb-video {
  display: block;
  width: 100%;
  height: auto;
}

/* 「▶」アイコン */
.others-maronry1-parts .video-badge {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: #ff0000;  /*背景色*/
  color: #fff;  /*文字色*/
  font-size: 12px;  /*アイコンのサイズ*/
  width: 28px;  /*アイコンの幅*/
  line-height: 28px;  /*高さ*/
  text-align: center;
  border-radius: 100px;  /*円形にする*/
  pointer-events: none;
}

css

//===============================================================
// Masonry + Fancybox + 動画ホバー処理
//===============================================================
$(function () {
  var $grid = $('.others-maronry1-parts');

if (!$grid.length) return;

// iOSで頑固にサムネが出ない場合の「強制描画」処理
  $grid.find('.thumb-video').each(function () {
    var v = this;

// 1. 属性の強制セット（これがないとJSでの操作が拒否されることがあります）
    $(v).attr({
      'muted': true,       // 必須：音ありだと自動再生とみなされブロックされる
      'playsinline': true, // 必須：全画面にならずに再生する
      'preload': 'metadata'
    });
    
    // 2. 「一瞬だけ再生して、即止める」
    // これを行うと、iOSは必ず映像データを読み込み、描画します。
    var playPromise = v.play();

if (playPromise !== undefined) {
      playPromise.then(function() {
        // 再生成功（＝読み込み開始）直後にここに来ます
        v.pause();           // 即停止
        v.currentTime = 0.1; // 0.1秒地点を表示
        
        // 動画の高さが確定したはずなので、Masonryレイアウトを再計算
        // （これをしないと動画と次の要素が重なることがあります）
        setTimeout(function(){
            if ($grid.data('masonry')) {
                $grid.masonry('layout');
            }
        }, 100);

}).catch(function(error) {
        // 省電力モードなどで自動再生が完全にブロックされた場合はここに来ます
        console.log('Autoplay was prevented:', error);
      });
    }
  });

// 画像(img)の読み込み完了を待ってから Masonry 初期化
  // ※ videoタグはこのimagesLoadedでは感知されないため、上のJS内で layout を呼んでいます
  $grid.imagesLoaded(function () {
    $grid.masonry({
      itemSelector: '.list-parts',
      columnWidth: '.masonry1-size-parts',
      percentPosition: true,
      gutter: 16
    });
  });

// 画像が1枚ずつ読み込まれたときもレイアウト調整
  $grid.imagesLoaded().progress(function () {
    $grid.masonry('layout');
  });

// Fancybox 初期化
  $('[data-fancybox]').fancybox({
    loop: true,
    smallBtn: true,
    toolbar: false
  });

// マウスホバー時の挙動
  $grid.on('mouseenter', '.is-video video', function () {
    this.play();
  });

$grid.on('mouseleave', '.is-video video', function () {
    this.pause();
  });
});

js

others-openclose1

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

html

css

js

others-openclose2

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

html

/*openclose2
---------------------------------------------------------------------------*/
/*質問*/
.others-openclose2-parts {
	display: flex;
	align-items: flex-start;
	border-radius: 3px;		/*角を少しだけ丸く*/
	margin-bottom: 1rem;	/*下に空けるスペース。質問ブロック同士の余白です。*/
	background: var(--bg-color);	/*背景色。theme.cssのbg-colorを読み込みます。*/
	color: var(--bg-inverse-color);	/*文字色。theme.cssのbg-inverse-colorを読み込みます。*/
	border: 1px solid var(--border-color);	/*枠線の幅、線種、var以降は色の指定でtheme.cssのborder-colorを読み込みます。*/
	padding: 1rem;		/*ブロック内の余白。１文字分。*/
	cursor: pointer;	/*カーソルの形状。リンクと同じスタイルにしてクリックできると認識してもらう。*/
}

/*アイコン（閉じている場合）*/
.others-openclose2-parts::before {
	font-family: "Font Awesome 6 Free";
	content: "\f13a";	/*アイコン画像の指定*/
	font-weight: bold;
	margin-right: 1rem;	/*右側に空けるスペース*/
	flex-shrink: 0;
	color: var(--primary-color);	/*アイコンの色。theme.cssのprimary-colorを読み込みます。*/
	transform: scale(1.5);	/*アイコンのサイズ1.4倍*/
}

/*アイコン（開いている場合）*/
.others-openclose2-parts.active::before {
	content: "\f057";	/*開いている時のアイコン画像*/
	color: #ff0000;		/*アイコンの色*/
}

/*回答*/
.others-openclose2-parts + * {
	padding: 0 1rem 1rem 3rem;	/*ボックス内の余白。上、右、下、左への順番。*/
}

css

js

others-overlay1

マウスオンで黒のオーバーレイが上スライドして消えるタイプ。

<h2 class="c">others-overlay1-parts</h2>

<div class="list-parts image1-parts">
<a href="#">
<div class="text-parts">
<h4>Contact<span>お問い合わせ</span></h4>
<p>ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。</p>
</div>
</a>
</div>

<div class="list-parts image2-parts">
<a href="#">
<div class="text-parts">
<h4>Online Shop<span>オンラインショップ</span></h4>
<p>ここに説明を入れます。サンプルテキスト。</p>
</div>
</a>
</div>

</div>

</section>

<p class="c">左右の余白をなくしたい場合は、<br>
others-overlay1-parts に<span class="color-check">bleed-x-parts</span>を追加して下さい。</p>

<div class="list-parts image1-parts">
<a href="#">
<div class="text-parts">
<h4>Contact<span>お問い合わせ</span></h4>
<p>ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。</p>
</div>
</a>
</div>

<div class="list-parts image2-parts">
<a href="#">
<div class="text-parts">
<h4>Online Shop<span>オンラインショップ</span></h4>
</div>
</a>
</div>

</div>

</section>

html

/*others-overlay1-parts
---------------------------------------------------------------------------*/
/*２つのボックスを囲むブロック*/
.others-overlay1-parts {
	display: flex;
}
.others-overlay1-parts a {
	text-decoration: none;
	display: block;
}

/*ボックス１個あたり*/
.others-overlay1-parts .list-parts {
	flex: 1;
	text-align: center;
	position: relative;
	overflow-y: hidden;
}

/*テキストブロック*/
.others-overlay1-parts .text-parts {
	position: relative;z-index: 1;
	color: #fff;
	padding: 2rem;
}

/*h4見出し*/
.others-overlay1-parts .text-parts h4 {
	font-family: var(--accent-font), var(--base-font);	/*theme.cssのaccent-fontに指定したフォントを読み込む。読み込めなければbase-fontで指定したフォントを読み込む。*/
	font-size: min(56px, 5vw);	/*基本は5vwで、最大56pxまで*/
	font-weight: normal;	/*デフォルトの太字を標準に*/
	letter-spacing: 0.05em;	/*文字間隔を少しだけ広く*/
}

/*h4見出し内のspan（小さな文字）*/
.others-overlay1-parts .text-parts h4 span {
	display: block;
	font-size: 0.8rem;	/*文字サイズ80%*/
}

/*段落（p）*/
.others-overlay1-parts .text-parts p {
	font-size: 0.85rem;	/*文字サイズ85%*/
}

/*1つ目（左）の背景画像*/
.others-overlay1-parts .image1-parts {
	background: url("../images/1.jpg") no-repeat center center / cover;
}

/*2つ目（右）の背景画像*/
.others-overlay1-parts .image2-parts {
	background: url("../images/2.jpg") no-repeat center center / cover;
}

/*マウスオン用のアニメーション*/
.others-overlay1-parts .list-parts::before {
	content: "";position: absolute;inset: 0;
	background: rgba(0,0,0,0.6);		/*写真に重ねておく半透明の黒い色。0,0,0は黒のことで0.6は色が60%出た状態。*/
	transition: transform 0.3s 0.1s;	/*アニメーションの速度（0.3秒）と待機時間（0.1秒）。*/
}
.others-overlay1-parts .list-parts:hover::before {
	transform: translateY(100%);	/*マウスオンで半透明の黒を枠外へ出す。-100%にすると逆に移動します。*/
}

css

others-overlay2

マウスオンで黒のオーバーレイが横スライドして消えるタイプ。

<h2 class="c">others-overlay2-parts</h2>

<div class="list-parts image1-parts">
<div class="text-parts">
<h4>Contact<span>お問い合わせ</span></h4>
<p>ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。</p>
<p class="btn-parts"><a href="#">View More</a></p>
</div>
</div>

<div class="list-parts image2-parts reverse">
<div class="text-parts">
<h4>Online Shop<span>オンラインショップ</span></h4>
<p>ボックスにreverseを追加すると、このように逆配置になります。<br>
ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。</p>
<p class="btn-parts"><a href="#">View More</a></p>
</div>
</div>

</div>

</section>

<p class="c">左右の余白をなくしたい場合は、<br>
others-overlay2-parts に<span class="color-check">bleed-x-parts</span>を追加して下さい。</p>

<div class="list-parts image1-parts">
<div class="text-parts">
<h4>Contact<span>お問い合わせ</span></h4>
<p>ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。</p>
<p class="btn-parts"><a href="#">View More</a></p>
</div>
</div>

<div class="list-parts image2-parts reverse">
<div class="text-parts">
<h4>Online Shop<span>オンラインショップ</span></h4>
<p>ボックスにreverseを追加すると、このように逆配置になります。<br>
ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。</p>
<p class="btn-parts"><a href="#">View More</a></p>
</div>
</div>

</div>

</section>

html

/*others-overlay2-parts
---------------------------------------------------------------------------*/
/*ボックス１個あたり*/
.others-overlay2-parts .list-parts {
	position: relative;
	overflow: hidden;
	margin-bottom: 1px;	/*下に1pxのスペース*/
}

/*テキストブロック*/
.others-overlay2-parts .text-parts {
	position: relative;z-index: 1;
	color: #fff;	/*文字色*/
	text-shadow: 2px 2px 2px rgba(0,0,0,0.5);	/*文字の影。右へ、下へ、ぼかす量、0,0,0は黒のことで0.5は色が50%出た状態。*/
	padding: 5vw;	/*余白。画面はば100% = 100vwです。*/
	width: 50%;	/*幅*/
}

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

/*テキストブロック*/
	.others-overlay2-parts .text-parts {
		width: 100%;	/*幅*/
	}

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

/*逆向き（テキスト右配置）*/
.others-overlay2-parts .list-parts.reverse .text-parts {
	margin-left: auto;
}

/*h4見出し*/
.others-overlay2-parts .text-parts h4 {
	font-family: var(--accent-font), var(--base-font);	/*theme.cssのaccent-fontに指定したフォントを読み込む。読み込めなければbase-fontで指定したフォントを読み込む。*/
	font-size: min(56px, 5vw);	/*基本は5vwで、最大56pxまで*/
	font-weight: normal;	/*デフォルトの太字を標準に*/
	margin-top: 0;
	margin-bottom: 2rem;
}

/*h4見出し内のspan（小さな文字）*/
.others-overlay2-parts .text-parts h4 span {
	display: block;
	font-size: 0.8rem;	/*文字サイズ80%*/
}

/*段落（p）*/
.others-overlay2-parts .text-parts p {
	font-size: 0.85rem;	/*文字サイズ85%*/
}

/*1つ目（左）の背景画像*/
.others-overlay2-parts .image1-parts {
	background: url("../images/1.jpg") no-repeat center center / cover;
}

/*2つ目（右）の背景画像*/
.others-overlay2-parts .image2-parts {
	background: url("../images/3.jpg") no-repeat center center / cover;
}

/*ボタン*/
.others-overlay2-parts .btn-parts a {
	display: block;text-decoration: none;
	background: rgba(0,0,0,0.5);	/*背景色。0,0,0は黒のことで0.5は色が50%出た状態。*/
	color: #fff;	/*文字色*/
	padding: 0.5rem;	/*ボタン内の余白。0.5文字分。*/
	text-align: center;	/*テキストをセンタリング*/
	border: 1px solid #fff;	/*枠線の幅、線種、色*/
}
/*ボタンのマウスオン時*/
.others-overlay2-parts .btn-parts a:hover {
	background: rgba(0,0,0,0.8);	/*背景色。0,0,0は黒のことで0.8は色が80%出た状態。*/
	letter-spacing: 0.1em;	/*文字間隔を少しだけ広げる*/
}

/*マウスオン用のアニメーション*/
.others-overlay2-parts .list-parts::before {
	content: "";position: absolute;inset: 0;
	background: rgba(0,0,0,0.6);		/*写真に重ねておく半透明の黒い色。0,0,0は黒のことで0.6は色が60%出た状態。*/
	transition: transform 0.3s 0.1s;	/*アニメーションの速度（0.3秒）と待機時間（0.1秒）。*/
}
.others-overlay2-parts .list-parts:hover::before {
	transform: translateX(100%);	/*マウスオンで半透明の黒を右側へ出す*/
}
.others-overlay2-parts .list-parts.reverse:hover::before {
	transform: translateX(-100%);	/*マウスオンで半透明の黒を左側へ出す*/
}

css

others-popup1

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

html

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

/*オーバーレイ効果（背後の画面を暗転させる場合）使う場合、ポップアップウィンドウの他に「others-popup1-overlay-parts」の１行が必要です。*/
#others-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%出た状態。*/
}

/*ポップアップウィンドウ*/
#others-popup1-parts {
	margin: 0;
	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;			/*枠線の幅、線種、色*/
}

/*閉じるボタン*/
#others-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

js

others-popup2

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

html

css

js

others-popup3

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

html

css

js

others-search1

javascriptを使った簡易検索。

<div class="list-parts" data-keyword="清水寺 きよみずでら 寺院 舞台 世界遺産">
<figure><img src="images/1.jpg" alt=""></figure>
<div class="text-parts">
<h4>清水寺</h4>
<p>「清水の舞台」で有名。古都京都の風情と、四季折々の絶景を一望できます。</p>
</div>
</div>

<div class="list-parts" data-keyword="伏見稲荷大社 ふしみいなり 千本鳥居 神社 ハイキング">
<figure><img src="images/2.jpg" alt=""></figure>
<div class="text-parts">
<h4>伏見稲荷大社</h4>
<p>朱色の千本鳥居が幻想的なトンネルを作る、海外からも人気の高い神社です。</p>
</div>
</div>

<div class="list-parts" data-keyword="金閣寺 きんかくじ 寺院 池 黄金 世界遺産">
<figure><img src="images/3.jpg" alt=""></figure>
<div class="text-parts">
<h4>金閣寺</h4>
<p>黄金に輝く舎利殿と鏡湖池のコントラストが美しい、京都を代表する名刹です。</p>
</div>
</div>

<div class="list-parts" data-keyword="嵐山・竹林の小径 あらしやま ちくりん 自然 散歩 嵯峨野">
<figure><img src="images/1.jpg" alt=""></figure>
<div class="text-parts">
<h4>嵐山・竹林の小径</h4>
<p>天高く伸びる竹林に囲まれた癒やしの空間。着物での散策にもおすすめです。</p>
</div>
</div>

<div class="list-parts" data-keyword="祇園・花見小路 ぎおん 舞妓 町家 石畳 デート">
<figure><img src="images/2.jpg" alt=""></figure>
<div class="text-parts">
<h4>祇園・花見小路</h4>
<p>石畳の路地に京町家が並ぶ風情ある通り。運が良ければ舞妓さんに出会えるかも。</p>
</div>
</div>

<div class="no-result" style="display:none;">
<p>該当するスポットが見つかりません。</p>
</div>

</div>

</section>

<h2>簡易検索の使い方</h2>
<p>javascriptを使った簡易検索です。<br>
あらかじめ、キーワードをhtml側のdata-keywordに入れておいて下さい。<br>
キーワード検索欄にテキストを入力するとリアルタイムで検索結果が出ます。</p>

</section>

html

/*簡易検索
---------------------------------------------------------------------------*/
/*検索ボックス*/
.others-search1-keyword-parts {
    margin-bottom: 1rem;	/*ボックスの下に１文字分のスペースを空ける*/
    background: var(--light-color);	/*背景色。theme.cssのlight-colorを読み込みます。*/
	color: var(--light-inverse-color);	/*文字色。theme.cssのlight-inverse-colorを読み込みます。*/
    padding: 1rem;		/*検索窓のボックス内の余白。１文字分。*/
    border-radius: 8px;	/*角を少し丸くする*/
}

/*キーワード入力欄*/
.others-search1-keyword-parts input {
    width: 100%;
    padding: 1rem;		/*入力欄内の余白。１文字分。*/
    border: 1px solid var(--border-color);	/*枠線の幅、線種、varは色の指定でtheme.cssのborder-colorを読み込んでいます。*/
    border-radius: 4px;	/*角を少しだけ丸くする*/
}

/*リスト全体の枠*/
.others-search1-parts {
    list-style: none;
    padding: 0;
}

/*リストブロック１個あたり*/
.others-search1-parts .list-parts {
    border-bottom: 1px solid var(--border-color);	/*下の線の幅、線種、varは色の指定でtheme.cssのborder-colorを読み込んでいます。*/
    margin-bottom: 1rem;	/*ブロックの下（外側）に空ける余白。１文字分。*/
    padding-bottom: 1rem;	/*ブロックの下（内側）に空ける余白。１文字分。*/
    display: flex;
    gap: 1rem; /*画像と文字の隙間。１文字分。*/
}

/*画像*/
.others-search1-parts .list-parts figure {
	width: 100px;	/*画像の幅*/
}
.others-search1-parts .list-parts figure img {
    display: block;
}

/*テキストブロック*/
.others-search1-parts .text-parts {
	flex: 1;
	line-height: 1.5;
}

/*h4見出し*/
.others-search1-parts .text-parts h4 {
	margin: 0;
	margin-bottom: 5px;	/*下に空けるスペース*/
}

/*文章*/
.others-search1-parts .text-parts p {
	margin: 0;
    font-size: 0.85rem;	/*文字サイズ85%*/
}

/* 該当なしメッセージ */
.others-search1-parts .no-result {
    text-align: center;
}

css

//===============================================================
// 簡易検索ページ
//===============================================================
$(function() {

// 検索ボックスに入力があった時の処理
    // 'keyup' を 'input' に変更しました
    $('#keyword').on('input', function() {
        
        // 1. 入力された文字を小文字に変換して取得
        var keyword = $(this).val().toLowerCase();
        
        // 2. 検索対象のリスト（.list）をひとつずつチェック
        var hitCount = 0; // ヒットした件数を数える変数
        
        $('.list-parts').each(function() {
            // その項目の data-keyword を取得
            var itemData = $(this).data('keyword');
            
            // キーワードが含まれているか判定
            // (メモ: itemDataがない場合にエラーにならないよう、念のためString変換を入れるのも手ですが、今回は元のままにします)
            if(itemData && itemData.indexOf(keyword) !== -1) {
                $(this).show(); // あれば表示
                hitCount++;     // ヒット件数を+1
            } else {
                $(this).hide(); // なければ非表示
            }
        });
        
        // 3. 一つもヒットしなかった場合、「見つかりません」を出す
        if(hitCount === 0) {
            $('.no-result').show();
        } else {
            $('.no-result').hide();
        }
        
    });

});

js

others-sns1

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

<h2>others-sns1-parts（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

others-step1

ステップ案内用。

<h2>others-step1</h2>

<h3>デフォルト</h3>
<ul class="others-step1">
<li>さらにステップが必要ならこのブロックを使います。サンプルテキスト。</li>
<li>さらにステップが必要ならこのブロックを使います。サンプルテキスト。さらにステップが必要ならこのブロックを使います。サンプルテキスト。</li>
<li>さらにステップが必要ならこのブロックを使います。サンプルテキスト。さらにステップが必要ならこのブロックを使います。サンプルテキスト。</li>
<li>さらにステップが必要ならこのブロックを使います。サンプルテキスト。さらにステップが必要ならこのブロックを使います。サンプルテキスト。さらにステップが必要ならこのブロックを使います。サンプルテキスト。</li>
</ul>

<h3>primaryカラー</h3>
<ul class="others-step1 primary-parts">
<li>さらにステップが必要ならこのブロックを使います。サンプルテキスト。</li>
<li>さらにステップが必要ならこのブロックを使います。サンプルテキスト。さらにステップが必要ならこのブロックを使います。サンプルテキスト。</li>
<li>さらにステップが必要ならこのブロックを使います。サンプルテキスト。さらにステップが必要ならこのブロックを使います。サンプルテキスト。</li>
<li>さらにステップが必要ならこのブロックを使います。サンプルテキスト。さらにステップが必要ならこのブロックを使います。サンプルテキスト。さらにステップが必要ならこのブロックを使います。サンプルテキスト。</li>
</ul>

<h3>lightカラー</h3>
<ul class="others-step1 light-parts">
<li>さらにステップが必要ならこのブロックを使います。サンプルテキスト。</li>
<li>さらにステップが必要ならこのブロックを使います。サンプルテキスト。さらにステップが必要ならこのブロックを使います。サンプルテキスト。</li>
<li>さらにステップが必要ならこのブロックを使います。サンプルテキスト。さらにステップが必要ならこのブロックを使います。サンプルテキスト。</li>
<li>さらにステップが必要ならこのブロックを使います。サンプルテキスト。さらにステップが必要ならこのブロックを使います。サンプルテキスト。さらにステップが必要ならこのブロックを使います。サンプルテキスト。</li>
</ul>

<h3>accentカラー</h3>
<ul class="others-step1 accent-parts">
<li>さらにステップが必要ならこのブロックを使います。サンプルテキスト。</li>
<li>さらにステップが必要ならこのブロックを使います。サンプルテキスト。さらにステップが必要ならこのブロックを使います。サンプルテキスト。</li>
<li>さらにステップが必要ならこのブロックを使います。サンプルテキスト。さらにステップが必要ならこのブロックを使います。サンプルテキスト。</li>
<li>さらにステップが必要ならこのブロックを使います。サンプルテキスト。さらにステップが必要ならこのブロックを使います。サンプルテキスト。さらにステップが必要ならこのブロックを使います。サンプルテキスト。</li>
</ul>

</section>

html

/*ステップボックス
---------------------------------------------------------------------------*/
ul.others-step1 {
	margin: 0 !important;padding: 0 !important;
	list-style: none;
}

/*ステップ１個あたり*/
ul.others-step1 li {
	padding: 1rem;			/*ボックス内の余白。１文字分。*/
	margin-bottom: 2rem;	/*ボックスの下に空けるスペース。２文字分。ボックス同士に空ける余白です。*/
	position: relative;
	border: 2px solid var(--bg-inverse-color);	/*枠線の幅、線種、varは色の指定で、theme.cssのbg-inverse-colorを読み込みます。*/
	background: var(--bg-color);	/*背景色。theme.cssのbg-colorを読み込みます。*/
	color: var(--bg-inverse-color);	/*背景色。theme.cssのbg-inverse-colorを読み込みます。*/
}

/*「▼」のマーク*/
ul.others-step1 li::after {
	content: "▼";	/*このテキストを出す*/
	transform: scaleX(2);	/*幅だけ２倍の大きさ*/
	position: absolute;
	left: 50%;	/*左からの配置場所。厳密に中央ではありませんが、テキストが小さいので問題ないかと。*/
	bottom: -2rem;	/*下からの配置場所。本来の場所より上に２文字分の場所。*/
	color: var(--bg-inverse-color);	/*文字色。theme.cssのbg-inverse-colorを読み込みます。*/
	opacity: 0.3;	/*透明度。色が30%出た状態。*/
}

/*最後のステップボックスには「▼」を出さない*/
ul.others-step1 li:last-child::after {
	content: "";
}

/*primaryカラーの場合*/
ul.others-step1.primary-parts li {
	border: none;	/*デフォルトの枠線をなしに*/
	background: var(--primary-color);	/*背景色。theme.cssのprimary-colorを読み込みます。*/
	color: var(--primary-inverse-color);	/*背景色。theme.cssのprimaryinverse-colorを読み込みます。*/
}
ul.others-step1.primary-parts li::after {
	color: var(--primary-color);	/*文字色。theme.cssのprimary-colorを読み込みます。*/
}

/*lightカラーの場合*/
ul.others-step1.light-parts li {
	border: 2px solid var(--primary-color);	/*枠線の幅、線種、varは色の指定で、theme.cssのprimary-colorを読み込みます。*/
	background: var(--light-color);	/*背景色。theme.cssのlight-colorを読み込みます。*/
	color: var(--light-inverse-color);	/*背景色。theme.cssのlight-inverse-colorを読み込みます。*/
}
ul.others-step1.light-parts li::after {
	color: var(--primary-color);	/*文字色。theme.cssのprimary-colorを読み込みます。*/
}

/*accentカラーの場合*/
ul.others-step1.accent-parts li {
	border: none;	/*デフォルトの枠線をなしに*/
	background: var(--accent-color);	/*背景色。theme.cssのaccent-colorを読み込みます。*/
	color: var(--accent-inverse-color);	/*背景色。theme.cssのaccent-inverse-colorを読み込みます。*/
}
ul.others-step1.accent-parts li::after {
	color: var(--accent-color);	/*文字色。theme.cssのaccent-colorを読み込みます。*/
}

css

others-sticky1

セクションが終わるまで左側の見出しが固定表示されます。

<div class="list-parts">
<div class="title-parts">
<h2>タイトル１</h2>
</div>
<div class="text-parts">
<h3>h3見出し</h3>
<p>サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。</p>
<ul class="others-step1 light-parts">
<li>さらにステップが必要ならこのブロックを使います。サンプルテキスト。</li>
<li>さらにステップが必要ならこのブロックを使います。サンプルテキスト。さらにステップが必要ならこのブロックを使います。サンプルテキスト。</li>
<li>さらにステップが必要ならこのブロックを使います。サンプルテキスト。さらにステップが必要ならこのブロックを使います。サンプルテキスト。</li>
<li>さらにステップが必要ならこのブロックを使います。サンプルテキスト。さらにステップが必要ならこのブロックを使います。サンプルテキスト。さらにステップが必要ならこのブロックを使います。サンプルテキスト。</li>
</ul>
</div>
</div>

<div class="list-parts">
<div class="title-parts">
<h2>タイトル２</h2>
</div>
<div class="text-parts">
<h3>h3見出し</h3>
<p>サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。</p>
<ul class="others-step1 light-parts">
<li>さらにステップが必要ならこのブロックを使います。サンプルテキスト。</li>
<li>さらにステップが必要ならこのブロックを使います。サンプルテキスト。さらにステップが必要ならこのブロックを使います。サンプルテキスト。</li>
<li>さらにステップが必要ならこのブロックを使います。サンプルテキスト。さらにステップが必要ならこのブロックを使います。サンプルテキスト。</li>
<li>さらにステップが必要ならこのブロックを使います。サンプルテキスト。さらにステップが必要ならこのブロックを使います。サンプルテキスト。さらにステップが必要ならこのブロックを使います。サンプルテキスト。</li>
</ul>
</div>
</div>

<div class="list-parts">
<div class="title-parts">
<h2>タイトル３</h2>
</div>
<div class="text-parts">
<h3>h3見出し</h3>
<ul class="others-step1 light-parts">
<li>さらにステップが必要ならこのブロックを使います。サンプルテキスト。</li>
<li>さらにステップが必要ならこのブロックを使います。サンプルテキスト。さらにステップが必要ならこのブロックを使います。サンプルテキスト。</li>
<li>さらにステップが必要ならこのブロックを使います。サンプルテキスト。さらにステップが必要ならこのブロックを使います。サンプルテキスト。</li>
<li>さらにステップが必要ならこのブロックを使います。サンプルテキスト。さらにステップが必要ならこのブロックを使います。サンプルテキスト。さらにステップが必要ならこのブロックを使います。サンプルテキスト。</li>
</ul>
</div>
</div>

</div>

</section>

html

/*sticky1-parts
---------------------------------------------------------------------------*/
/*ブロック１個あたりの設定*/
.others-sticky1-parts .list-parts {
	margin-bottom: 4rem;	/*下に空けるマージン*/
}

/*タイトルブロック*/
.others-sticky1-parts .title-parts {
	background: var(--primary-color);		/*背景色。theme.cssのprimary-colorを読み込みます。*/
	color: var(--primary-inverse-color);	/*文字色。theme.cssのprimary-inverse-colorを読み込みます。*/
	text-align: center;	/*テキストをセンタリング*/
}

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

/*ブロック１個あたりの設定*/
	.others-sticky1-parts .list-parts {
		display: flex;
		align-items: flex-start;
		gap: 4rem;	/*タイトルと画像が入った右側ブロックの間のスペース。４文字分。*/
		position: relative;
	}
	
	/*タイトルブロック*/
	.others-sticky1-parts .title-parts {
		width: 30%;	/*幅*/
		position: -webkit-sticky;
		position: sticky;
		top: 0;
	}
	
	/*右側のブロック*/
	.others-sticky1-parts .text-parts {
		flex: 1;
	}

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

/*ステップボックス
---------------------------------------------------------------------------*/
ul.others-step1 {
	margin: 0 !important;padding: 0 !important;
	list-style: none;
}

/*ステップ１個あたり*/
ul.others-step1 li {
	padding: 1rem;			/*ボックス内の余白。１文字分。*/
	margin-bottom: 2rem;	/*ボックスの下に空けるスペース。２文字分。ボックス同士に空ける余白です。*/
	position: relative;
	border: 2px solid var(--bg-inverse-color);	/*枠線の幅、線種、varは色の指定で、theme.cssのbg-inverse-colorを読み込みます。*/
	background: var(--bg-color);	/*背景色。theme.cssのbg-colorを読み込みます。*/
	color: var(--bg-inverse-color);	/*背景色。theme.cssのbg-inverse-colorを読み込みます。*/
}

/*「▼」のマーク*/
ul.others-step1 li::after {
	content: "▼";	/*このテキストを出す*/
	transform: scaleX(2);	/*幅だけ２倍の大きさ*/
	position: absolute;
	left: 50%;	/*左からの配置場所。厳密に中央ではありませんが、テキストが小さいので問題ないかと。*/
	bottom: -2rem;	/*下からの配置場所。本来の場所より上に２文字分の場所。*/
	color: var(--bg-inverse-color);	/*文字色。theme.cssのbg-inverse-colorを読み込みます。*/
	opacity: 0.3;	/*透明度。色が30%出た状態。*/
}

/*最後のステップボックスには「▼」を出さない*/
ul.others-step1 li:last-child::after {
	content: "";
}

/*primaryカラーの場合*/
ul.others-step1.primary-parts li {
	border: none;	/*デフォルトの枠線をなしに*/
	background: var(--primary-color);	/*背景色。theme.cssのprimary-colorを読み込みます。*/
	color: var(--primary-inverse-color);	/*背景色。theme.cssのprimaryinverse-colorを読み込みます。*/
}
ul.others-step1.primary-parts li::after {
	color: var(--primary-color);	/*文字色。theme.cssのprimary-colorを読み込みます。*/
}

/*lightカラーの場合*/
ul.others-step1.light-parts li {
	border: 2px solid var(--primary-color);	/*枠線の幅、線種、varは色の指定で、theme.cssのprimary-colorを読み込みます。*/
	background: var(--light-color);	/*背景色。theme.cssのlight-colorを読み込みます。*/
	color: var(--light-inverse-color);	/*背景色。theme.cssのlight-inverse-colorを読み込みます。*/
}
ul.others-step1.light-parts li::after {
	color: var(--primary-color);	/*文字色。theme.cssのprimary-colorを読み込みます。*/
}

/*accentカラーの場合*/
ul.others-step1.accent-parts li {
	border: none;	/*デフォルトの枠線をなしに*/
	background: var(--accent-color);	/*背景色。theme.cssのaccent-colorを読み込みます。*/
	color: var(--accent-inverse-color);	/*背景色。theme.cssのaccent-inverse-colorを読み込みます。*/
}
ul.others-step1.accent-parts li::after {
	color: var(--accent-color);	/*文字色。theme.cssのaccent-colorを読み込みます。*/
}

css

others-tab1

タブ切り替えブロック

html

/*タブ切り替えブロック
---------------------------------------------------------------------------*/
/*メニューブロック全体*/
.others-tab1-parts {
	list-style: none;margin: 0 !important;padding: 0;
	display: flex;
	gap: 0.4rem;	/*メニュー同士に空けるスペース*/
}

/*メニュー１個あたり*/
.others-tab1-parts li {
	cursor: pointer;
	user-select: none;
	flex: 1;
	text-align: center;
	transition: 0.3s;
	background: #ddd;	/*背景色*/
	color: #999;		/*文字色*/
	padding: 1rem 2rem;	/*メニュー内の余白。上下に１文字分、左右に２文字分。*/
	border-radius: 10px 10px 0 0;	/*角を丸くする。左上、右上、右下、左下への順番。*/
	line-height: 1.5;	/*行間を少し狭く*/
}

/*現在表示メニューと、hover時共通*/
.others-tab1-parts li.others-tab1-active-parts,
.others-tab1-parts li:hover {
	background: var(--primary-color);		/*背景色。theme.cssのprimary-colorを読み込みます。*/
	color: var(--primary-inverse-color);	/*文字色。theme.cssのprimary-inverse-colorを読み込みます。*/
}

/*コンテンツブロック*/
.others-tab1-content-parts {
	display: none;
	padding: 2rem;	/*コンテンツ内の余白。２文字分。*/
	border: 2px solid var(--primary-color);	/*コンテンツの枠線の幅、線種、var以降は色の指定でtheme.cssのprimary-colorを読み込みます。*/
}

/*現在表示中のコンテンツブロック*/
.others-tab1-content-parts.others-tab1-active-parts {
	display: block;
}

css

//===============================================================
// タブ切り替えブロック
//===============================================================
$(function() {

$('.others-tab1-parts').each(function() {

var $menu     = $(this);
    var $tabs     = $menu.children('li');
    var $contents = $menu.nextAll('.others-tab1-content-parts').slice(0, $tabs.length);

// 初期状態を整える（HTMLに others-tab1-active-parts が無くても動く）
    var startIndex = $tabs.filter('.others-tab1-active-parts').first().index();
    if (startIndex < 0) startIndex = 0;

$tabs.removeClass('others-tab1-active-parts').eq(startIndex).addClass('others-tab1-active-parts');
    $contents.hide().removeClass('others-tab1-active-parts').eq(startIndex).show().addClass('others-tab1-active-parts');

$tabs.on('click', function() {

var $this = $(this);
      var idx   = $this.index();

if ($this.hasClass('others-tab1-active-parts')) return;

$tabs.removeClass('others-tab1-active-parts');
      $this.addClass('others-tab1-active-parts');

var $current = $contents.filter('.others-tab1-active-parts');
      var $next    = $contents.eq(idx);

$current.fadeOut(200, function() {
        $current.removeClass('others-tab1-active-parts');
        $next.fadeIn(200, function() {
          $next.addClass('others-tab1-active-parts');
        });
      });

});

js

others-thumbnail-changer1

複数のサムネイルが並んでいて、クリックすると、メイン画像が入れ替わります。静止画・動画に対応。

html

/*others-thumbnail-changer1-parts（詳細ページ向けのサムネイル切り替えブロック）
---------------------------------------------------------------------------*/
/*大きな画像が表示されるブロック*/
.thumbnail-view-parts {
	max-width: 1000px;
	margin: 0 auto 1rem;
}

/*サムネイル全体を囲むブロック*/
.others-thumbnail-changer1-parts {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;	/* ← ここがポイント（少ない時も中央に） */
	gap: 8px;
	max-width: 1000px;
	margin: 0 auto 2rem;
}

/*サムネイル画像*/
.others-thumbnail-changer1-parts img {
	width: 100px;
	cursor: pointer;
	transition: 0.3s;
	display: block;
}

/*動画サムネ用ラッパ（videoはJSでここに入る）*/
.others-thumbnail-changer1-parts .thumb-wrap {
	position: relative;
	display: block;
	width: 100px;
	cursor: pointer;
	transition: 0.3s;
	background: #000;
}

/*サムネイル動画*/
.others-thumbnail-changer1-parts .thumb-wrap > video {
	width: 100%;
	height: auto;
	display: block;
	margin: 0;
	background: #000;
}

.others-thumbnail-changer1-parts img:hover,
.others-thumbnail-changer1-parts .thumb-wrap:hover {
	opacity: 0.8;
}

/*動画サムネの上の「再生」アイコン*/
.others-thumbnail-changer1-parts .thumb-play {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	pointer-events: none;
	opacity: 0.9;
	text-shadow: 0 1px 2px rgba(0,0,0,.35);
}
.others-thumbnail-changer1-parts .thumb-play i {
	background: #ff0000;
	color: #fff;
	border-radius: 9999px;
	padding: 6px 8px;
	font-size: 12px;
	line-height: 1;
}

/*大きな表示の中身（画像・動画）*/
.thumbnail-view-parts img,
.thumbnail-view-parts video {
	max-width: 100%;
	height: auto;
	display: block;
	margin: 0 auto;
}

css

// ===============================================================
// 詳細ページ：サムネイル切替（画像/動画） + 横スクロール矢印（自動）
// ===============================================================
$(function(){

// ------------------------------
  // サムネ（video）の初期処理：controls消し、iOS対策、再生アイコン付与
  // ------------------------------
  function setupThumbVideo($v){
    var videoEl = $v[0];

$v.attr({
      'preload': 'metadata',
      'muted': true,
      'playsinline': true
    });

videoEl.removeAttribute('controls');

// iOSで最初のフレームが白になりやすい対策
    function seekThumbFrame(){
      try {
        videoEl.pause();
        videoEl.currentTime = 0.1;
      } catch(e) {}
    }
    // 読み込みタイミングにより効き方が違うので複数で保険
    $v.on('loadedmetadata loadeddata', seekThumbFrame);
    seekThumbFrame();

// まだラップされていなければラップ＋アイコン
    if (!$v.parent().hasClass('thumb-wrap')) {
      $v.wrap('<span class="thumb-wrap is-video"></span>');
      $v.after('<span class="thumb-play" aria-hidden="true"><i class="fa-solid fa-play fas fa-play"></i></span>');
    }
  }

// ------------------------------
  // サムネ要素（img/video）から、表示用の要素を生成
  // ------------------------------
  function createViewerEl($media){
    if ($media.is('img')) {
      return $('<img>').attr('src', $media.attr('src'));
    }

if ($media.is('video')) {
      var src = $media.attr('src') || $media.find('source:first').attr('src');
      if (!src) return null;

var $v = $('<video>').attr({
        src: src,
        controls: true,
        playsinline: true,
        preload: 'metadata'
      });

// iOSで真っ白防止：0.1秒目を表示
      $v.on('loadedmetadata loadeddata', function(){
        try { this.currentTime = 0.1; } catch(e) {}
      });

return $v;
    }

return null;
  }

// ------------------------------
  // 1セットずつ処理（複数設置に対応）
  // ------------------------------
  $('.thumbnail-view-parts').each(function(){

var $view  = $(this);
    var $thumbs = $view.next('.others-thumbnail-changer1-parts');

// サムネ内の video を処理（ラップ＆アイコン）
    $thumbs.find('video').each(function(){
      setupThumbVideo($(this));
    });

// --- 初期表示：最初の img か video を表示 ---
    var $first = $thumbs.find('img,video').first();
    var $firstEl = createViewerEl($first);

if ($firstEl) {
      $view.empty().append($firstEl);
    }

});

// ------------------------------
  // サムネクリック（pointerdown推奨：iOS/タップ遅延＆誤再生防止）
  // ------------------------------
  $(document).on('pointerdown', '.others-thumbnail-changer1-parts', function(e){

// thumb-wrap上のクリックも拾えるように closest で探す
    var $media = $(e.target).closest('img,video');
    if (!$media.length) return;

e.preventDefault();

// サムネがvideoなら誤再生防止で止める
    if ($media.is('video')) {
      try { $media[0].pause(); } catch(err) {}
    }

// 対応する view を取得
    var $view = $(this).prev('.thumbnail-view-parts');
    if (!$view.length) return;

var $nextEl = createViewerEl($media);
    if (!$nextEl) return;

// iOS対策：display:none だと白くなる事があるので opacity で切り替え
    $nextEl.css('opacity', 0);

$view.find('img,video').fadeOut(400, function(){
      $view.empty().append($nextEl);

// 動画の場合は念のためロード
      if ($nextEl.is('video')) {
        try { $nextEl[0].load(); } catch(e) {}
      }

$nextEl.animate({opacity: 1}, 400);
    });

});

js

others-thumbnail-changer2

複数のサムネイルが並んでいて、クリックすると、メイン画像が入れ替わります。静止画・動画に対応。

html

/*others-thumbnail-changer2-parts（詳細ページ向けのサムネイル切り替えブロック）
---------------------------------------------------------------------------*/
/*大きな画像が表示されるブロック*/
.thumbnail-view-parts {
	max-width: 1000px;		/*最大幅*/
	margin: 0 auto 1rem;	/*ブロック要素を中央に配置。下に1文字分のマージンをとる。*/
}

/*矢印＋サムネイル列を囲むブロック*/
.thumbnail-nav {
	display: flex;
	align-items: center;
	justify-content: flex-start;	/*左寄せで*/
	gap: 8px;						/*矢印と列の間隔*/
	max-width: 1000px;				/*最大幅*/
	margin:0 auto 2rem;				/*下に空けるスペース。２文字分。*/
}

/* スクロールバー版：矢印は使わない */
.thumb-arrow {display: none;}

/*横スクロール用ラッパー*/
.thumbnail-wrapper {
	flex: 1 1 auto;
	min-width: 0;
	overflow-x: auto;
	padding-bottom: 6px; /* スクロロールバーの分、少し余白 */
}

/*サムネイル全体を囲むブロック*/
.others-thumbnail-changer2-parts {
	display: flex;
	flex-wrap: nowrap;
	width: max-content;
	margin: 0 auto;
}

/*サムネイル画像*/
.others-thumbnail-changer2-parts img {
	width: 100px;	/*サムネイルの幅*/
	margin: 2px;	/*サムネイル間のスペース*/
	cursor: pointer;
	transition: 0.3s;	/*マウスオンまでにかける時間。3秒。*/
	display: block;
}
/*動画サムネ用ラッパ（videoはJSでここに入る）*/
.others-thumbnail-changer2-parts .thumb-wrap {
	position: relative;
	display: inline-block;
	width: 100px;
	margin: 2px;
	cursor: pointer;
	transition: 0.3s;
	background: #000;
}

.others-thumbnail-changer2-parts img,
.others-thumbnail-changer2-parts .thumb-wrap {
	flex: 0 0 auto;
}

/*サムネイル動画*/
.others-thumbnail-changer2-parts .thumb-wrap > video {
	width: 100%;
	height: auto;
	display: block;
	margin: 0;
	background: #000;
}
.others-thumbnail-changer2-parts img:hover,
.others-thumbnail-changer2-parts .thumb-wrap:hover {
	opacity: 0.8;	/*マウスオン時に80%だけ色を出す。つまり薄くなります。*/
}

/*動画サムネの上の「再生」アイコン*/
.others-thumbnail-changer2-parts .thumb-play {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	pointer-events: none;
	opacity: 0.9;
	text-shadow: 0 1px 2px rgba(0,0,0,.35);
}
.others-thumbnail-changer2-parts .thumb-play i {
	background: #ff0000;
	color: #fff;
	border-radius: 9999px;
	padding: 6px 8px;
	font-size: 12px;
	line-height: 1;
}

/*大きな表示の中身（画像・動画）*/
.thumbnail-view-parts img,
.thumbnail-view-parts video {
	max-width: 100%;
	height: auto;
	display: block;
	margin: 0 auto;
}

css

// ===============================================================
// 詳細ページ：サムネイル切替（画像/動画） + 横スクロール矢印（自動）
// ===============================================================
$(function(){

// ------------------------------
  // サムネ（video）の初期処理：controls消し、iOS対策、再生アイコン付与
  // ------------------------------
  function setupThumbVideo($v){
    var videoEl = $v[0];

$v.attr({
      'preload': 'metadata',
      'muted': true,
      'playsinline': true
    });

videoEl.removeAttribute('controls');

// iOSで最初のフレームが白になりやすい対策
    function seekThumbFrame(){
      try {
        videoEl.pause();
        videoEl.currentTime = 0.1;
      } catch(e) {}
    }
    // 読み込みタイミングにより効き方が違うので複数で保険
    $v.on('loadedmetadata loadeddata', seekThumbFrame);
    seekThumbFrame();

// まだラップされていなければラップ＋アイコン
    if (!$v.parent().hasClass('thumb-wrap')) {
      $v.wrap('<span class="thumb-wrap is-video"></span>');
      $v.after('<span class="thumb-play" aria-hidden="true"><i class="fa-solid fa-play fas fa-play"></i></span>');
    }
  }

// ------------------------------
  // サムネ要素（img/video）から、表示用の要素を生成
  // ------------------------------
  function createViewerEl($media){
    if ($media.is('img')) {
      return $('<img>').attr('src', $media.attr('src'));
    }

if ($media.is('video')) {
      var src = $media.attr('src') || $media.find('source:first').attr('src');
      if (!src) return null;

var $v = $('<video>').attr({
        src: src,
        controls: true,
        playsinline: true,
        preload: 'metadata'
      });

// iOSで真っ白防止：0.1秒目を表示
      $v.on('loadedmetadata loadeddata', function(){
        try { this.currentTime = 0.1; } catch(e) {}
      });

return $v;
    }

return null;
  }

// ------------------------------
  // 1セットずつ処理（複数設置に対応）
  // ------------------------------
  $('.thumbnail-view-parts').each(function(){

var $view  = $(this);
    var $thumbs = $view.next('.others-thumbnail-changer2-parts');

// サムネ内の video を処理（ラップ＆アイコン）
    $thumbs.find('video').each(function(){
      setupThumbVideo($(this));
    });

// --- サムネ列にナビを動的生成（矢印＋スクロール枠） ---
    // すでに生成済みなら二重に作らない
    if (!$thumbs.parent().hasClass('thumbnail-wrapper')) {
      var $wrapper = $thumbs.wrap('<div class="thumbnail-wrapper"></div>').parent();
      var $nav     = $wrapper.wrap('<div class="thumbnail-nav"></div>').parent();

var $prev = $('<div class="thumb-arrow prev">❮</div>');
      var $next = $('<div class="thumb-arrow next">❯</div>');
      $nav.prepend($prev).append($next);

// 1回のスクロール量（サムネ 3個分）
      function getStep(){
        var $item = $thumbs.children().first();
        var w = $item.outerWidth(true) || 100;
        return w * 3;
      }

function updateArrows(){
        var max = $thumbs[0].scrollWidth - $wrapper.innerWidth();
        var pos = $wrapper.scrollLeft();

if (max <= 0) {
          $prev.addClass('is-off');
          $next.addClass('is-off');
        } else {
          $prev.toggleClass('is-off', pos <= 0);
          $next.toggleClass('is-off', pos >= max - 2);
        }
      }

$prev.on('click', function(){
        $wrapper.animate({scrollLeft: $wrapper.scrollLeft() - getStep()}, 300, updateArrows);
      });
      $next.on('click', function(){
        $wrapper.animate({scrollLeft: $wrapper.scrollLeft() + getStep()}, 300, updateArrows);
      });

$wrapper.on('scroll', updateArrows);
      $(window).on('resize', updateArrows);
      updateArrows();
    }

// --- 初期表示：最初の img か video を表示 ---
    var $first = $thumbs.find('img,video').first();
    var $firstEl = createViewerEl($first);

if ($firstEl) {
      $view.empty().append($firstEl);
    }

});

// ------------------------------
  // サムネクリック（pointerdown推奨：iOS/タップ遅延＆誤再生防止）
  // ------------------------------
  $(document).on('pointerdown', '.others-thumbnail-changer2-parts', function(e){

// thumb-wrap上のクリックも拾えるように closest で探す
    var $media = $(e.target).closest('img,video');
    if (!$media.length) return;

e.preventDefault();

// サムネがvideoなら誤再生防止で止める
    if ($media.is('video')) {
      try { $media[0].pause(); } catch(err) {}
    }

// 対応する view を取得
    var $view = $(this).closest('.thumbnail-nav').prev('.thumbnail-view-parts');
    if (!$view.length) return;

var $nextEl = createViewerEl($media);
    if (!$nextEl) return;

// iOS対策：display:none だと白くなる事があるので opacity で切り替え
    $nextEl.css('opacity', 0);

$view.find('img,video').fadeOut(400, function(){
      $view.empty().append($nextEl);

// 動画の場合は念のためロード
      if ($nextEl.is('video')) {
        try { $nextEl[0].load(); } catch(e) {}
      }

$nextEl.animate({opacity: 1}, 400);
    });

});

js

others-thumbnail-changer3

複数のサムネイルが並んでいて、クリックすると、メイン画像が入れ替わります。静止画・動画に対応。

html

/*others-thumbnail-changer3-parts（詳細ページ向けのサムネイル切り替えブロック）
---------------------------------------------------------------------------*/
/*大きな画像が表示されるブロック*/
.thumbnail-view-parts {
	max-width: 1000px;		/*最大幅*/
	margin: 0 auto 1rem;	/*ブロック要素を中央に配置。下に1文字分のマージンをとる。*/
}

/*矢印＋サムネイル列を囲むブロック*/
.thumbnail-nav {
	display: flex;
	align-items: center;
	justify-content: flex-start;	/*左寄せで*/
	gap: 8px;						/*矢印と列の間隔*/
	max-width: 1000px;				/*最大幅*/
	margin:0 auto 2rem;				/*下に空けるスペース。２文字分。*/
}

/*左右矢印*/
.thumb-arrow {
	flex: 0 0 30px;		/*30pxが幅。お好みで。*/
	line-height: 60px;	/*高さ。お好みで。*/
	font-size: 18px;	/*矢印の文字サイズ*/
	text-align: center;
	color: #fff;		/*矢印の色*/
	background: rgba(0,0,0,0.3);	/*矢印の背景色*/
	cursor: pointer;
	user-select: none;
}

/*矢印非表示*/
.thumb-arrow.is-off {display: none;}

/*横スクロール用ラッパー*/
.thumbnail-wrapper {
	flex: 1 1 auto;
	min-width: 0;
	overflow-x: auto;
	scrollbar-width: none;
}
.thumbnail-wrapper::-webkit-scrollbar{display: none;}

/*サムネイル全体を囲むブロック*/
.others-thumbnail-changer3-parts {
	display: flex;
	flex-wrap: nowrap;
	width: max-content;
	margin: 0 auto;
}

/*サムネイル画像*/
.others-thumbnail-changer3-parts img {
	width: 100px;	/*サムネイルの幅*/
	margin: 2px;	/*サムネイル間のスペース*/
	cursor: pointer;
	transition: 0.3s;	/*マウスオンまでにかける時間。3秒。*/
	display: block;
}
/*動画サムネ用ラッパ（videoはJSでここに入る）*/
.others-thumbnail-changer3-parts .thumb-wrap {
	position: relative;
	display: inline-block;
	width: 100px;
	margin: 2px;
	cursor: pointer;
	transition: 0.3s;
	background: #000;
}

.others-thumbnail-changer3-parts img,
.others-thumbnail-changer3-parts .thumb-wrap {
	flex: 0 0 auto;
}

/*サムネイル動画*/
.others-thumbnail-changer3-parts .thumb-wrap > video {
	width: 100%;
	height: auto;
	display: block;
	margin: 0;
	background: #000;
}
.others-thumbnail-changer3-parts img:hover,
.others-thumbnail-changer3-parts .thumb-wrap:hover {
	opacity: 0.8;	/*マウスオン時に80%だけ色を出す。つまり薄くなります。*/
}

/*動画サムネの上の「再生」アイコン*/
.others-thumbnail-changer3-parts .thumb-play {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	pointer-events: none;
	opacity: 0.9;
	text-shadow: 0 1px 2px rgba(0,0,0,.35);
}
.others-thumbnail-changer3-parts .thumb-play i {
	background: #ff0000;
	color: #fff;
	border-radius: 9999px;
	padding: 6px 8px;
	font-size: 12px;
	line-height: 1;
}

/*大きな表示の中身（画像・動画）*/
.thumbnail-view-parts img,
.thumbnail-view-parts video {
	max-width: 100%;
	height: auto;
	display: block;
	margin: 0 auto;
}

css

// ===============================================================
// 詳細ページ：サムネイル切替（画像/動画） + 横スクロール矢印（自動）
// ===============================================================
$(function(){

// ------------------------------
  // サムネ（video）の初期処理：controls消し、iOS対策、再生アイコン付与
  // ------------------------------
  function setupThumbVideo($v){
    var videoEl = $v[0];

$v.attr({
      'preload': 'metadata',
      'muted': true,
      'playsinline': true
    });

videoEl.removeAttribute('controls');

// iOSで最初のフレームが白になりやすい対策
    function seekThumbFrame(){
      try {
        videoEl.pause();
        videoEl.currentTime = 0.1;
      } catch(e) {}
    }
    // 読み込みタイミングにより効き方が違うので複数で保険
    $v.on('loadedmetadata loadeddata', seekThumbFrame);
    seekThumbFrame();

// まだラップされていなければラップ＋アイコン
    if (!$v.parent().hasClass('thumb-wrap')) {
      $v.wrap('<span class="thumb-wrap is-video"></span>');
      $v.after('<span class="thumb-play" aria-hidden="true"><i class="fa-solid fa-play fas fa-play"></i></span>');
    }
  }

// ------------------------------
  // サムネ要素（img/video）から、表示用の要素を生成
  // ------------------------------
  function createViewerEl($media){
    if ($media.is('img')) {
      return $('<img>').attr('src', $media.attr('src'));
    }

if ($media.is('video')) {
      var src = $media.attr('src') || $media.find('source:first').attr('src');
      if (!src) return null;

var $v = $('<video>').attr({
        src: src,
        controls: true,
        playsinline: true,
        preload: 'metadata'
      });

// iOSで真っ白防止：0.1秒目を表示
      $v.on('loadedmetadata loadeddata', function(){
        try { this.currentTime = 0.1; } catch(e) {}
      });

return $v;
    }

return null;
  }

// ------------------------------
  // 1セットずつ処理（複数設置に対応）
  // ------------------------------
  $('.thumbnail-view-parts').each(function(){

var $view  = $(this);
    var $thumbs = $view.next('.others-thumbnail-changer3-parts');