目次のリンク先がズレたらこれを疑え-SIRIUS2の使い方

目次などのページ内リンクをクリック（タップ）すると見当違いの場所が表示されてしまう（飛び先がズレる）場合、考えられる原因の一つに「画像の遅延表示」機能が挙げられます。

「画像の遅延表示」とはページが開かれた時にページ内の画像を最初にすべて読み込むのではなく、画面をスクロールしていくにしたがって順番に画像を読み込むシステムのことです。

画像を一度に全部読み込む必要がないためページの表示速度アップにつながります。

SIRIUS2の場合は【サイトオプション】→【全体設定】→【全体の設定】タブ内の以下の項目でON・OFFの切り替えが可能です。

「画像の遅延表示」はSEO的にもONにしておくのが好ましいのですが、ここをONにするとコンテンツの量が多いページなどでは目次やページ内リンクをクリックしても本来の表示先ではない部分が表示されてしまう場合があります。
（コンテンツの量によってはちゃんと作動することもあります）

これは最初に画像を全部読み込まないため画像の高さ分が計上されず、それゆえページの”長さ”を正確に算出できないことからくる誤作動という理屈だそうです。
そのためリンク先の本来の位置がずれてしまうんですね。

そういった理屈なのでいったん下の方までスクロールしてしまえばぺージ内の全体の長さが”判明”するため、次からは指定したリンク先がちゃんと画面の先頭に表示されるようになります。

サイト訪問者がそこまで広い心で接してくれればいいんですけどねえ。

ページを開いて目次をクリックしたところ全く別のところが画面の一番上に表示されてしまえば「え、なんか内容が違ってなくね？」となってサイトに対する印象を悪くさせる可能性もあります。
これはページ内に設定されたページ内リンクをクリックしても同様の症状が出ます。

SIRIUS2の「画像の遅延表示」はスクリプト（簡易プログラム）を利用して実行しています。

この仕組みだと『画像の遅延表示は有効にしておきたいけどページ内リンクも正常に作動させたい…』を両立させる工夫は筆者が調べた限りではなかなかに難しいようです。

では解決策はないのかと言えば、あることはあります。
しかもSIRIUS2の「画像の遅延表示」はOFFにした状態でも画像の遅延表示を有効化できる方法です。

それがブラウザ自体に搭載されてる画像遅延読み込み機能の［Lazyload］属性を利用すること。

これは画像タグに『loading="lazy"』という記述を付けるだけであとはブラウザが勝手に画像を遅延読み込みしてくれるというすぐれものです。ページ内リンクも正常な位置にジャンプします。
別途スクリプトを用意する必要もないのでそのこと自体が表示速度アップにも貢献します。

ただし［Lazyload］を正常に作動させるには同時に画像の幅（width）と高さ（height）を記述する必要があります。

ここがSIRIUS2において大きなネックとなるところでして。
というのもすべて手動で設定しないといけないから。

たとえば適当に画像を挿入してみます。このとき出力される画像タグがこちら。
残念ながらここに画像の幅と高さは表記されません。（自動で補完してくれないんです）

そのためこの画像（タグ）に［lazyload］機能を付与する場合、まずは「loading="lazy"」を加筆します。

次に画像の幅（width）と高さ（height）を追記します。

判明した画像の幅と高さは下のような書き方で記述します。
widthの後に記述する数値が画像の幅でheightの後ろに記述する数値が高さになります。

これを先ほど作成した画像タグに追記したのがこちら。

これで完成です。といっても毎回これを手書きするのは大変ですよね。

そこで下のようなフォーマットを作って［カスタム文字装飾］や［定型文］に登録しておきます。

これを画像タグを出力したあと、”src”の直前をクリック＋登録したフォーマットを挿入します。
その後に画像の幅と高さを記述すれば、ある程度の時間短縮は見込めます。

いかがです、けっこう面倒でしょ。でも今のところこれしか策はなさそうです。

既存のサイトを「Lazyload」仕様にするのは膨大な修正時間が必要ですが、サイトを始めたばかりというのであれば最初から「Lazayload」使用で画像タグをその都度修正していくのはアリかと思います。

でも面倒なことには違いないのでSIRIUS2の画像の遅延表示の方がラクというのであれば無理せずそちらをおススメします。

画像だけなくYoutubeにも「Lazyload」は有効です。

適当にYoutubeを挿入してみます。（『メディア』→『Youtube』から挿入）
挿入後の編集上での表示は以下のようになります。

ここに「loading="lazy" width="560" height="315"」を加筆すれば完了です。