<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>SAMPLE PAGE</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <header class="site-header">
    <h1 class="site-title"><a href="/">SAMPLE</a></h1>
    <nav class="site-nav">
      <ul>
        <li><a href="/about/">ABOUT</a></li>
        <li><a href="/works/">WORKS</a></li>
        <li><a href="/contact/">CONTACT</a></li>
      </ul>
    </nav>
  </header>
  <main class="site-main">
    <article class="post">
      <h2 class="post-title">POST TITLE</h2>
      <p class="post-date">2026-11-03</p>
      <div class="post-body">
        <p>本文が入る。</p>
      </div>
    </article>
  </main>
  <footer class="site-footer">
    <p><small>© SAMPLE</small></p>
  </footer>
  <script src="js/main.js"></script>
</body>
</html>

/* ===== ここから CSS（HCB の長いコードを折りたたみ表示） ===== */
/*
  ・js/hcb-fold.js が長いコードブロックに .has-fold／.is-fold を指定したときだけ効く
  ・.hcb_wrap を2つ重ねて、HCB やテーマの pre の指定より強くしている
*/
.hcb_wrap.hcb_wrap.has-fold {
	position: relative;
	margin-bottom: 6px;                /* ★ コードブロックの枠 〜 ボタンの間 */
	--hcb-fold-height: 320px;          /* ★ 畳んだときの高さ（JavaScript の FOLD_HEIGHT と同じ値にする） */
}
.hcb_wrap.hcb_wrap.has-fold > pre {
	transition: max-height .45s ease;  /* ★ 開閉の速さ */
}
.hcb_wrap.hcb_wrap.is-fold > pre {
	max-height: var(--hcb-fold-height);
	overflow-y: hidden;
}

/* 下のフェード（色はコードブロックの背景色に合わせる） */
.hcb_wrap.hcb_wrap.is-fold::after {
	content: "";
	position: absolute;
	left: 1px;                         /* コードブロックの枠線（1px）の内側 */
	right: 1px;
	bottom: 1px;
	height: 80px;                      /* ★ フェードの高さ */
	background: linear-gradient(rgba(238, 241, 244, 0), #eef1f4); /* ★ 背景色 #eef1f4 */
	pointer-events: none;              /* フェードの上からもコードを選択できるように */
}

/* 枠の外・右下のボタン：アイコン＋SHOW ALL ／ CLOSE */
button.hcb-fold-btn {
	display: flex;
	align-items: center;
	gap: .4em;                         /* アイコン 〜 文字 */
	width: fit-content;
	margin: 0 0 24px auto;             /* ★ ボタンの下の間（右寄せ） */
	padding: 0;
	border: 0;
	background: none;
	color: #1d1f28;                    /* ★ 文字の色 */
	font-family: 'Montserrat', sans-serif;
	font-size: 90%;                    /* ★ 文字の大きさ（本文の 90%） */
	font-weight: 500;
	letter-spacing: -0.05em;
	line-height: 1;
	cursor: pointer;
}
button.hcb-fold-btn i {
	color: #8a8f9d;                    /* ★ アイコンの色 */
}
button.hcb-fold-btn:hover,
button.hcb-fold-btn:hover i {
	color: #ccccc8;                    /* ★ マウスオンの色 */
}

/* 動きを減らす設定の場合は、開閉のアニメーションなし */
@media (prefers-reduced-motion: reduce) {
	.hcb_wrap.hcb_wrap.has-fold > pre {
		transition: none;
	}
}
/* ===== ここまで CSS ===== */

/* =====================================================================
   HCB（Highlighting Code Block）の長いコードを折りたたみ表示にする
   - FOLD_HEIGHT ＋ MIN_HIDDEN より長いコードブロックだけ畳む（短いものは何もしない）
   - 枠の外・右下の「SHOW ALL」で全部表示 →「CLOSE」で畳む
   - JavaScript が動かない環境では畳まれず、全部表示される
   - デザイン：CSS の「HCB の長いコードを折りたたみ表示」
   ===================================================================== */
( function () {
	'use strict';

	var FOLD_HEIGHT = 320;  /* ★ 畳んだときの高さ（px）。CSS の --hcb-fold-height と同じ値にする */
	var MIN_HIDDEN  = 80;   /* ★ 隠れる部分が MIN_HIDDEN 未満なら畳まない（px） */

	var ICON_OPEN  = '<i class="fa-solid fa-expand" aria-hidden="true"></i>';   /* ★ SHOW ALL のアイコン */
	var ICON_CLOSE = '<i class="fa-solid fa-compress" aria-hidden="true"></i>'; /* ★ CLOSE のアイコン */

	// 1つのコードブロックを畳んで、枠の外・右下にボタンを追加する
	function fold( wrap, pre ) {
		wrap.classList.add( 'has-fold', 'is-fold' );

		var btn = document.createElement( 'button' );
		btn.type      = 'button';
		btn.className = 'hcb-fold-btn';

		// ボタンの表示を切り替える（畳んでいる：SHOW ALL ／ 開いている：CLOSE）
		function setLabel( folded ) {
			btn.innerHTML = folded ? ICON_OPEN + 'SHOW ALL' : ICON_CLOSE + 'CLOSE';
			btn.setAttribute( 'aria-expanded', folded ? 'false' : 'true' );
		}
		setLabel( true );
		wrap.after( btn );

		btn.addEventListener( 'click', function () {
			var folded = wrap.classList.toggle( 'is-fold' );

			// 開くときは中身の高さまで max-height を広げる（CSS の transition でなめらかに伸びる）
			pre.style.maxHeight = folded ? '' : pre.scrollHeight + 'px';
			setLabel( folded );

			// 閉じたとき、コードブロックが画面から外れていれば見える位置まで戻す
			if ( folded ) {
				wrap.scrollIntoView( { block: 'nearest' } );
			}
		} );
	}

	// 高さを測って、長ければ畳む。高さが 0（非表示で測れない）のときは false を返す
	function check( wrap, pre ) {
		var h = pre.scrollHeight;
		if ( 0 === h ) {
			return false;
		}
		if ( h > FOLD_HEIGHT + MIN_HIDDEN && ! wrap.classList.contains( 'has-fold' ) ) {
			fold( wrap, pre );
		}
		return true;
	}

	function init() {
		// ページを非表示（display: none）から表示させる演出がある場合、非表示の間は高さが 0 で測れない。
		// ResizeObserver で、表示されて高さが決まったときに1回だけ測る
		var ro = window.ResizeObserver ? new ResizeObserver( function ( entries ) {
			entries.forEach( function ( entry ) {
				var pre = entry.target;
				if ( check( pre.closest( '.hcb_wrap' ), pre ) ) {
					ro.unobserve( pre );
				}
			} );
		} ) : null;

		document.querySelectorAll( '.hcb_wrap' ).forEach( function ( wrap ) {
			var pre = wrap.querySelector( 'pre' );
			if ( pre && ! check( wrap, pre ) && ro ) {
				ro.observe( pre );
			}
		} );
	}

	// 読み込み完了（load）の後に始める。
	// HCB のスクリプトがコードブロックの中身を作り直すため、作り直したあとの高さで測る
	if ( 'complete' === document.readyState ) {
		init();
	} else {
		window.addEventListener( 'load', init );
	}
} )();

/**
 * HCB の長いコードを折りたたみ表示にする JavaScript（js/hcb-fold.js）を読み込む
 * ・コードブロックがあるのは記事・固定ページなので、記事・固定ページだけで読み込む
 * ・バージョンにファイルの更新日時を指定して、JavaScript を直したらブラウザのキャッシュも更新されるようにする
 */
function hcb_fold_enqueue() {
	if ( ! is_singular() ) {
		return;
	}
	wp_enqueue_script(
		'hcb-fold',
		get_theme_file_uri( 'js/hcb-fold.js' ),
		array(),
		filemtime( get_theme_file_path( 'js/hcb-fold.js' ) ),
		true
	);
}
add_action( 'wp_enqueue_scripts', 'hcb_fold_enqueue' );