2026年9月25日

WordPressのCSS Anchor Positioning（アンカー位置）

テーマ・デザイン

はじめに

WordPressサイトにおいて、ページ内の特定のセクションを直接表示するためにはアンカーリンクが便利です。しかし、デフォルトではスクロール時にトップまで戻ってしまうことがあります。この記事では、CSSを使用してアンカー位置を正しく設定し、ユーザー体験とSEOを向上させる方法について説明します。

症状・背景

アンカーリンクをクリックしても表示がずれる
スクロールがページのトップから始まる
モバイルデバイスでのスクロール速度が遅い
動的なコンテンツに対してアンカー位置が正しくない

手順・設定方法

ステップ1: アンカーリンクを追加する

# ページ内にターゲットセクションを指定します。
<a href="#target-section">Target Section</a>

# ターゲットとなるセクションのIDを設定します。
<div id="target-section">...</div>

ステップ2: CSSでスクロール位置を調整する

# bodyタグにアンカースクロール時のマージンを追加します。
body {
  margin-top: -80px; /* ヘッダーの高さを指定 */
}

#target-section {
  position: relative;
  top: -80px;
}

ステップ3: JavaScriptで更なる調整を行う

<script>
// オンロード時にスムーズスクロールを有効にします。
$(document).ready(function(){
  $('a[href^="#"]').on('click', function(e) {
    e.preventDefault();
    var target = this.hash,
        $target = $(target);
    
    $('html, body').stop().animate({
      'scrollTop': $target.offset().top
    }, 900, 'swing', function() {
      window.location.hash = target;
    });
  });
});
</script>

ステップ4: 対応をテストし、調整を行う

# 各ページでのアンカーリンクの動作を確認します。
<a href="#another-section">Another Section</a>

# 必要に応じてCSSとJavaScriptの設定を見直します。
body {
  margin-top: -70px; /* ヘッダー高さの微調整 */
}

注意事項

各ブラウザでの動作確認が必要です
JavaScriptが無効な環境でも基本的な機能が利用できるようにする
セクション間のスペースを適切に確保する
デザインと機能性をバランス良く調整すること

まとめ

1. アンカーリンクの追加: 適切なターゲットセクションを指定します。

2. CSSでの調整: スクロール位置を適切に設定します。

3. JavaScriptの利用: よりスムーズなスクロール機能を実装できます。

4. テストと確認: 各ブラウザやデバイスでの動作確認を行います。

5. バランスの調整: デザインと機能性の最適化を目指します。