• TOP
• Javascript

Bloggerでアンカーリンクを貼る方法

2020-04-13T19:00:00+09:00 2020-04-13T11:44:52Z Blogger Javascript

JavascriptでBloggerのアンカーリンクを貼る方法

きっかけ

前に書いた記事でも記載していますが、Bloggerでアンカーリンク(ページ内リンク)がうまく貼れないのがきっかけです。

自動で目次は作らなくていいからアンカーリンクだけでいいよって方は、下記の方法を試してみてください。

実装

※テーマはバックアップをとっておいて、挙動がおかしいようならリストアしてください。
前回の実装を行ってない方は見ながらテーマに下記のコードを挿入してみてください。

<script>
window.addEventListener('DOMContentLoaded', (e) => {
    document.querySelectorAll('a').forEach(e => {
        if (e.dataset.anchor !== undefined)
            e.href = e.dataset.anchor;
    });
});
</script>

あとは本文中に

<a data-anchor="#test">TEST</a>

<span id="test">ここに飛びます。</a>

のように入れれば完了です。

処理内容は至って簡単で
data-anchor属性を取得してhref属性に突っ込むだけです。
href属性の変わりだと思っていただければ良いかと思います。

下書きの時はhref属性がhttps://www.blogger.com/nullになりますが、実際にはJavascriptが書き換えるので問題ありません。

例：
TEST











ここに飛びます。

おわりに

これで楽に飛ぶ！！
今回はこれにて。