【WordPress】画面いっぱいに自動で要素を収めるJavaScriptコードの紹介

2024年8月10日

本記事では、特定のセクションのサイズを自動的に調整したい時に使えるJavaScriptのコードについて紹介していきます。

JavaScriptコードの紹介

このコードは、ブラウザウィンドウのサイズに応じて、特定のセクションのサイズを自動的に調整するためのJavaScriptです。以下は、コードの詳細な解説です。

特定の1ページのみの場合は、固定ページのカスタムJS欄などに追加
全体に反映させたい場合は、外観⇒カスタマイズの高度な設定で/body閉じタグのボディの直前などに追加してください。

function adjustSize() {
  var sectionElements = document.querySelectorAll('.view-size-adjust');
  var windowHeight = window.innerHeight;

  sectionElements.forEach(function(sectionElement) {
    var sectionHeight = sectionElement.scrollHeight;
    var scale = Math.min(1, windowHeight / sectionHeight);
    sectionElement.style.transform = 'scale(' + scale + ')';
  });
}
window.addEventListener('resize', adjustSize);

1. adjustSize 関数の定義

function adjustSize() {
  var sectionElements = document.querySelectorAll('.view-size-adjust');
  var windowHeight = window.innerHeight;

  sectionElements.forEach(function(sectionElement) {
    var sectionHeight = sectionElement.scrollHeight;
    var scale = Math.min(1, windowHeight / sectionHeight);
    sectionElement.style.transform = 'scale(' + scale + ')';
  });
}

a. セクション要素の取得

var sectionElements = document.querySelectorAll('.view-size-adjust');

document.querySelectorAll('.view-size-adjust') は、クラス名が view-size-adjust のすべての要素を取得します。NodeList 形式で返されます。

b. ウィンドウの高さの取得

var windowHeight = window.innerHeight;

window.innerHeight を使用して、ブラウザウィンドウの高さを取得します。この値は、ウィンドウ内のビューポートの高さ（ピクセル）を表します。

c. 各セクションの高さとスケール計算

sectionElements.forEach(function(sectionElement) {
  var sectionHeight = sectionElement.scrollHeight;
  var scale = Math.min(1, windowHeight / sectionHeight);
  sectionElement.style.transform = 'scale(' + scale + ')';
});

forEach メソッドを使用して、取得した各セクション要素（sectionElement）に対して処理を行います。
- sectionElement.scrollHeight は、そのセクション要素の実際の高さ（コンテンツの高さ）を取得します。
- Math.min(1, windowHeight / sectionHeight) では、ウィンドウの高さとセクションの高さの比率を計算し、その比率をスケールとして使用します。
  - Math.min(1, ...) により、スケールが 1 を超えないようにします。これは、セクションがウィンドウよりも高い場合にのみ縮小し、そうでない場合は縮小しないためです。
- sectionElement.style.transform = 'scale(' + scale + ')'; によって、CSSの transform プロパティを使用し、セクションを指定したスケールに縮小します。

2. resize イベントのリスナー追加

window.addEventListener('resize', adjustSize);

window.addEventListener('resize', adjustSize); は、ブラウザウィンドウのサイズが変更されたとき（リサイズ時）に adjustSize 関数を実行するためのイベントリスナーを追加します。これにより、ウィンドウサイズが変わるたびに、セクションのスケールが再計算されて適用されます。

まとめ

このコードは、ブラウザウィンドウの高さに応じて、.view-size-adjust クラスを持つセクション要素のサイズを自動的に調整するためのものです。具体的には、ウィンドウの高さに合わせて、セクション要素を縮小（スケールダウン）し、ウィンドウ内に収めることが目的です。これにより、ウィンドウのサイズが変更されても、特定のセクションが適切なサイズで表示されます。

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！