はじめに
概要
このウェブサイトでは、サイドバーにある目次は「position: sticky;」を用いて固定されており、メインコンテンツの高さに合わせて調整されています。メインコンテンツの高さは記事の内容次第で変わるため、CSSでの調整が難しいです。そこでJavascriptを使用します。ページが読み込まれた時に、メインコンテンツの高さを取得し、それに合わせてサイドバーの高さを設定するコードを書いていきます。
※本記事の情報は執筆時点のものであり、閲覧時点では変更されている可能性があります。また、ご利用の環境によっては、本記事の内容が正常に動作しないことがあります。最新の情報については、公式サイトなどでご確認ください。
読者メインコンテンツとサイトバー の高さを動的に調整するは、最初にどこを理解するとよいですか？
木村対象要素を取得する処理、動作を始める条件、見た目を変える処理の三つに分けると、コードの流れを追いやすくなります。
読者実際に試すときは、手順だけでなく確認方法も知っておいた方がよいでしょうか？
木村はい。この記事では、作業の目的から実装後の確認までを順番に整理します。自分の環境と照らし合わせながら読み進めてください。
実装内容
実装内容では、メインコンテンツとサイトバー の高さを動的に調整するを理解・実装するために必要な考え方と、作業時に確認したい点を整理します。最初に役割を把握してから、記事内の手順へ進みましょう。
本サイトを例に、実装の手順を説明します。
ページが読み込まれるタイミングでメインコンテツの高さを取得
↓
サイドバーの目次以外の高さを取得
↓
メインコンテツから目次以外の高さを引く
↓
その値を目次に設定する。
以下のような実装になります。
イメージ画像
実装内容で押さえたいポイント
実装内容は、コードや設定だけを切り離して覚えるより、何を変えるための処理なのかを確認してから試すと理解しやすくなります。変更前の状態を控え、作業を一つずつ反映すると、問題が起きた場所も特定しやすくなります。
実装内容の確認方法
ブラウザーのコンソールにエラーがないかを確認し、クリックやスクロールを繰り返してもイベントが重複しないかを試します。スマートフォン幅とキーボード操作も確認してください。
メインコンテンツの高さを取得
メインコンテンツの高さを取得では、メインコンテンツとサイトバー の高さを動的に調整するを理解・実装するために必要な考え方と、作業時に確認したい点を整理します。最初に役割を把握してから、記事内の手順へ進みましょう。
Javascript<script>
document.addEventListener("DOMContentLoaded", function() {
var mainContent = document.querySelector('.content'); // メインコンテンツのクラス名
function setMenuHeight() {
var mainContentHeight = mainContent.offsetHeight; // メインコンテンツの高さを取得
// コンソールに高さを出力
console.log("Main Content Height: " + mainContentHeight);
}
setMenuHeight(); // 初期の高さを設定
window.addEventListener('resize', setMenuHeight); // ウィンドウのリサイズ時にも高さを更新
});
</script>DOMContentLoaded
DOMContentLoaded は、ウェブページが完全に読み込まれてDOMが構築された時に発火するイベントです。スタイルシートや画像、サブフレームなどのロードは待たずに、HTMLドキュメントが完全に読み込まれて解析された時点で実行されるため、このイベントを利用してJavaScriptでDOM操作を行ったり、初期化のスクリプトを実行することが一般的です。
offsetHeightメソッド
mainContentHeight = mainContent.offsetHeight; を使用することで、要素の高さを取得できます。
続いてサイドバーの目次を除く各要素の高さを取得します。そして、これらの高さの合計値からメインコンテンツの高さを引きます。この結果得られた値を目次の高さとして設定します。最後に、これらの値が正しく取得できているかどうかを、コンソールで確認します。
Javascript
それぞれの値を別々の変数に保存した後、計算を行っています。そして、注目すべき点は menu.style.height = adjustedHeight + ‘px’; というコードです。このコードでは、取得した値に ‘px’ を加えて menu の高さに設定しています。この記述により、メインコンテンツとサイドバーの高さを揃え、要素の高さを適切に調整しています。記事の長さが変わっても、その都度、高さを動的に取得することが可能です。
コンソールの内容
<script>
document.addEventListener("DOMContentLoaded", function() {
var mainContent = document.querySelector('.content'); // メインコンテンツのクラス名
var menu = document.querySelector('.aside__menu'); // 目次のクラス名
var profile = document.querySelector('.aside__profile'); // プロフィールのクラス名
var ad = document.querySelector('ins.adsbygoogle'); // 広告のタグ
var search = document.querySelector('.aside__search'); // 検索のクラス名
var tagBox = document.querySelector('.aside__tag-box'); // タグボックスのクラス名
var pickupBox = document.querySelector('.aside__pickup-box'); // ピックアップボックスのクラス名
function setMenuHeight() {
var mainContentHeight = mainContent.offsetHeight; // メインコンテンツの高さを取得
var profileHeight = profile.offsetHeight; // プロフィールの高さを取得
var adHeight = ad.offsetHeight; // 広告の高さを取得
var searchHeight = search.offsetHeight; // 検索の高さを取得
var tagBoxHeight = tagBox.offsetHeight; // タグボックスの高さを取得
var pickupBoxHeight = pickupBox.offsetHeight; // ピックアップボックスの高さを取得
var totalHeight = profileHeight + adHeight + searchHeight + tagBoxHeight + pickupBoxHeight; // 各要素の高さの合計を計算
var adjustedHeight = mainContentHeight - totalHeight; // 高さを調整
menu.style.height = adjustedHeight + 'px'; // 目次の高さを調整して設定
// コンソールに高さを出力
console.log("Main Content Height: " + mainContentHeight);
console.log("Profile Height: " + profileHeight);
console.log("Ad Height: " + adHeight);
console.log("Search Height: " + searchHeight);
console.log("Tag Box Height: " + tagBoxHeight);
console.log("Pickup Box Height: " + pickupBoxHeight);
console.log("Total Height of Elements: " + totalHeight);
console.log("Adjusted Menu Height: " + adjustedHeight);
}
setMenuHeight(); // 初期の高さを設定
window.addEventListener('resize', setMenuHeight); // ウィンドウのリサイズ時にも高さを更新
});
</script>singleページに適応
上記のコードをsingle.phpにのみ適応するには以下のように記述します。<?php
// single.php の中で適切な場所にこの PHP コードを挿入します。
if (is_single()) {
?>
<script>
document.addEventListener("DOMContentLoaded", function() {
var mainContent = document.querySelector('.content'); // メインコンテンツのクラス名
// 同上
});
</script>
<?php
}
?>メインコンテンツの高さを取得で押さえたいポイント
メインコンテンツの高さを取得は、コードや設定だけを切り離して覚えるより、何を変えるための処理なのかを確認してから試すと理解しやすくなります。変更前の状態を控え、作業を一つずつ反映すると、問題が起きた場所も特定しやすくなります。
まとめ
- DOMContentLoadedを使用し、ページが読み込まれた後の処理を記述
- offsetHeightメソッドを使って、変数から高さを取得することができる
- これにより、メインコンテンツの高さが変更されても適切に設定することができる
- 特定のページにのみJavaScriptを設定することは、バグの混入を防ぐために重要
- JavaScriptを使用して要素を取得し、変数に格納した後、メソッドを利用してCSSのスタイルを変更することが可能
MEMBER COMMENTS
コメント（0件）