SWELLの目次を押したのに、見出しより少し下へ移動したり、いったん合った位置から後で動いたりすることがあります。目次の設定を探す前に、ずれるタイミングを比べると、確認する場所を絞れます。
画像の読み込み後に位置が変わるなら、画像の表示領域と遅延読み込みを確認します。読み込み後も同じだけずれるなら、固定ヘッダーやスクロールに関わる設定を確認しましょう。この記事では、元の状態へ戻せる順序で調べる手順を紹介します。
まず「読み込み後もずれるか」を比べる
位置ずれが起きる記事を開き、毎回同じ目次項目で比べます。画面幅が変わると文章の折り返しや画像の高さも変わるため、最初の比較は同じ端末・同じ画面幅で行ってください。
移動先の見出しが画面のどこに止まるかを見ます。いったん止まった後、画像が表示されるタイミングで見出しが動くかも確認します。
記事の下までゆっくりスクロールし、画像が表示されたことを確かめます。その後、目次へ戻って同じ項目を押してください。遅延読み込みの画像は、ページを開いて待つだけでは読み込まれない場合があります。
次の表で、近い症状の確認先へ進んでください。表は確認する順番を決める目安で、原因を断定するものではありません。
| 近い症状 | 次に確認する場所 |
|---|---|
| 画像が表示されると見出しが動く | 画像の表示領域・遅延読み込み |
| 画像表示後も見出しがヘッダーに隠れる | 固定ヘッダー・スクロール設定 |
| 押した項目とは別の見出しへ移動する | 目次と見出しの対応・リンク先 |
一度の比較だけで原因を断定せず、ずれた見出しと、画像の表示前後で変化したかを控えましょう。端末や通信状態で結果が変わるときは、その違いも手がかりになります。
画像の読み込みで位置が変わるとき
画像が表示されると見出しの位置が動く場合は、画像用の空き場所と、画像を読み込む仕組みを順に確認します。
画像を表示する場所が先に確保されているか
画像の読み込み前に高さが確保されていないと、画像が表示された時点で、その下にある文章や見出しが押し下げられます。目次で移動した後にこれが起きると、移動先がずれたように見えることがあります。
Googleのレイアウトのずれを抑える解説でも、画像の幅・高さの情報や縦横比を使って、読み込み前から領域を確保する方法が紹介されています。ここでいう縦横比（アスペクト比）は、画像の横幅と高さの割合です。
画像ブロックの縦横比と元画像を確認する
まず、ずれる見出しより上にある画像を確認します。記事の編集画面で画像を選び、右側の「ブロック」設定を開いてください。今回確認した画面では、「スタイル」→「サイズ」→「アスペクト比」に設定があります。バージョンによって配置が異なる場合があります。
元画像の幅と高さは、管理画面の「メディア」→「ライブラリ」で対象画像を開くと確認できます。「添付ファイルの詳細」の「サイズ」を見てください。以下の例は横1600px・縦1200pxなので、縦横比は4:3です。
アスペクト比は通常「元のサイズ」を基準にします。これは画像の縦横比を保つ設定です。「解像度」にある「フルサイズ」は使う画像データの大きさを選ぶ項目で、別の設定です。
元画像と同じ比率が選択肢にある場合は、例えば4:3を選んでプレビューで確認する方法もあります。すべての画像を4:3にする必要はありません。切り抜きや引き伸ばしが起きたら元へ戻してください。画像の文字や端を欠けさせず、読み込み前から必要な高さを確保することが目的です。
外部から貼り付けた画像や独自のHTMLで設置した画像は、幅・高さの情報がない場合もあります。画像を使う権限があることを確認し、元のブロックを控えたうえで、WordPressの「画像」ブロックからメディアライブラリの画像を入れ直す方法を検討します。リンク先・代替テキスト・キャプションも引き継ぎ、プレビューで比較してください。
「元のサイズ」にするだけ、または入れ直すだけで、すべての環境のずれが直るわけではありません。独自CSSや遅延読み込みの処理が影響する場合は、画像の幅・高さの情報が出力されているか、表示まで領域が保たれているかを制作者へ確認します。画像ブロックの基本操作はWordPress公式の画像ブロック解説も参照できます。
画像の設定を変えたら、まずプレビューで画像全体と目次の移動先を確認します。問題がなければ記事を保存・更新し、記事を開き直して同じ目次項目を押してください。下書きは保存後のプレビューで確認できます。
画像の遅延読み込みが重複していないか
遅延読み込み（Lazyload）は、画面に近づいた画像などを後から読み込む仕組みです。機能そのものが悪いわけではなく、表示前から画像を置く分の空き場所があれば、読み込みが遅くても位置の変化を抑えられます。
WordPress管理画面の「SWELL設定」→「高速化」にある「画像等のLazyload」を確認します。次の画面は当サイトの設定例です。
近くにある「スクリプトの遅延読み込み」は別の項目です。「スクリプト（lazysizes.js）を使って遅延読み込みさせる」という画像側の選択肢と混同しないようにしましょう。
画像最適化などのプラグインにも画像の遅延読み込みがある場合は、SWELLと同じ機能を重ねていないか確認します。SWELL公式も相性の悪い・不要なプラグインの案内で、テーマと重複する機能に注意するよう説明しています。プラグイン全体を止める前に、画像の遅延読み込みだけを切り替えられるか確認してください。
設定を切り替えて比べる必要がある場合は、次の順序で進めます。SWELL設定の変更はほかの記事にも影響するため、テスト環境での比較を優先し、公開サイトでは影響を確認できる状況で行いましょう。
「画像等のLazyload」の現在値をスクリーンショットなどで控えます。関連プラグインを使っている場合は、その機能の現在値も控えます。
画像の遅延読み込みを一時的に「使用しない」にするなど、一つの変更に絞ります。SWELL設定は画面下の「変更を保存」で保存します。複数の機能を同時に切り替えると、どの変更が効いたのか分からなくなります。
記事を開き直し、冒頭の手順と同じ条件で比べます。キャッシュ（表示を速くするために保存したデータ）が残り、変更前の表示になる場合は、利用中の仕組みに従ってキャッシュを更新してください。改善しなければ記録した設定へ戻し、再び保存します。
遅延読み込みをオフにした間だけ直っていても、原因を解消できたとは限りません。画像の表示領域や機能の重複を見直し、必要な遅延読み込みを使う状態で、位置と読み込みの両方を確認してください。
読み込み後も同じ位置でずれるとき
画像の表示が終わってもずれる場合は、見出しとヘッダーの重なりから確認します。その後、スクロールに関わる設定や追加した処理を見ていきましょう。
固定ヘッダーの裏に見出しが隠れていないか
画像を表示した後も、見出しの上側が毎回同じだけ隠れる場合は、画面上部に残る固定ヘッダーとの重なりを見ます。PCだけ、スマートフォンだけで起きるかも比較してください。
最近変えたヘッダーの高さや固定表示の設定、追加したスクロール用コードがあれば、その内容から確認します。原因を確かめずにすべての見出しへ大きな余白を追加すると、別の端末では空きすぎることがあります。変更内容が分からない場合は、サイトを作った人に確認しましょう。
スムーススクロールの設定と追加処理を確認する
スムーススクロールは、目次から移動するときに画面を滑らかに動かす処理です。「SWELL設定」→「機能停止」には「スムーススクロール」を停止するという項目があります。チェックが付くと停止する項目なので、オン・オフの意味を読み違えないようにしてください。
設定値と、追加したスクロール用プラグイン・独自JavaScriptの有無を確認します。似た処理を重ねている場合は、追加した側の説明や制作者に確認し、一つずつ比較してください。停止を試す場合も、変更前を控え、「変更を保存」→動作確認→改善しなければ元へ戻して保存、の順序は同じです。
押した項目とは別の見出しへ移動する場合は、目次項目と見出しの対応を先に確認します。手作業で付けたHTMLアンカー（ページ内の移動先を示す目印）や独自の目次を使っているなら、目印の名前であるIDが重複していないか、リンク先が正しいかを制作者へ確認してください。
まとめ｜変更後は同じ見出しが見えるか確認する
変更後はPCとスマートフォンで、最初にずれた見出しをもう一度確認します。次の三つがそろえば、今回の位置ずれの確認はひと区切りです。
- 目次から目的の見出しへ移動でき、固定ヘッダーに隠れない。
- 画像が表示された後も見出しの位置が大きく動かず、読み始められる。
- 設定を変えた場合は、画像・メニューなど、同じ設定の影響を受ける表示も正常に使える。
直った後は、ほかの高速化設定まで続けて変更する必要はありません。効果のなかった変更は元に戻し、最後に残した変更と確認した端末を記録しておきましょう。
解決しない場合は、記事URL、ずれる見出し、端末・ブラウザー、画像の表示前後で変わるか、変更した設定と結果をまとめます。その情報と画面録画やスクリーンショットを添えると、サイトの制作者やSWELLのサポートへ状況を伝えやすくなります。
