【初心者向け】Affinnger6でアンカーリンクの作り方

ブログやサイトを読んでいると、目次から特定の場所へジャンプしたり、テキストをクリックするとページ内の指定の場所へジャンプするリンクをよく目にします。

そのような機能をアンカーリンクといいます。アンカーリンクは特定の場所へジャンプさせるのにとても便利です。

この記事では、WordPressテーマの Affinger6 を使って、HTMLアンカーを利用したアンカーリンクの設定方法を備忘録を兼ねてまとめました。

初心者の方やこれからアンカーリンクを使う方の参考になりましたら嬉しいです。

アンカーリンクの設定仕方へすすむ

アンカーリンク（anchor link）とは？

アンカーリンクはHTMLのアンカータグ（<a>タグ）を使用して作成されます。

アンカーリンクを設定することでWEBページ内の指定した場所へリンク移動することがでます。

アンカーリンクで指定の場所へジャンプすることにより、ページにアクセスがしやすくなり読者が読みやすく分かりやすい記事にすることができます。

目次から見出しへスクロールして移動したり、文章の途中から特定の場所へジャンプするとこができます。

アンカーリンク、ハイパーリンク、内部リンク、外部リンクの違い

アンカーリンク、ハイパーリンク、内部リンク、外部リンクのそれぞれの違いを簡単にまとめました。

それぞれのリンクはリンク先に違いがあります。

アンカーリンクとページ内リンクは同じ使い方がされており、ページ内リンクはアンカーリンクの一種になります。

✨ブログをはじめるなら→エックスサーバーがおすすめです。

Affinnger6　アンカーリンクの設定の仕方

step
1ジャンプ先にリンクを設定する

リンクを飛ばしたい見出しタグをクリックします。

step
2HTMLアンカーを設定する（ID名の設定）

右上にある設定→ブロック→高度な設定→HTMLアンカーを開きます。

HTMLアンカーにID名を付けます。自分な好きな名前でOKです。

HTML アンカー構文

• HTML アンカーは文書内で固有でなければなりません (同一のアンカーは一度だけ使えます)。
• HTML アンカーでは大文字と小文字が区別されます。
• HTML アンカーには、ハイフン (-)、アンダースコア (_)、コロン (:)、ピリオド (.) などの半角記号を含めることができます。スペースを含めることはできません。
• HTML アンカーの先頭はアルファベットでなければなりません。

引用元：フォーラム（WRODPRESS.ORG）

step
3ジャンプ元にリンクを設定する

①アンカーテキストの文章を入力します。テキストをクリックするとリンクする設定をしていきます。

②入力したテキストをドラッグして、リンクマークをクリックします。

③高度な設定のHTMLアンカーに入力したID名に#を付け入力してエンターを押すとリンクが設定できます。

＃ID名で入力します。

スクロールをゆっくりにするには

アンカーリンクでジャンプをした時に一瞬でビューッと飛んでしまうので、

どこにジャンプしたのか分かりにくい....読みにくいなって...ときは、スクロールがゆっくり滑らかになる追加CSSかプラグインで対応することができます。

✅初心者でも簡単にできる方法

追加CSSにコードを入力する方法

ここでは、作業が簡単でよく使われている追加CSSに追加するやり方をまとめました。

追加CSSに一行入力するだけで簡単にスクロールをゆっくりにすることがで、読者も読みやすくなります。

追加CSSに追加手順

外観→カスタマイズ→追加CSS→追加CSSのコピペしたものを貼り付ける→公開をクリックする

下記の追加CSSをコピペして貼り付けます。

html {
scroll-behavior: smooth;
}

追加CSSに追加する方法は、スクロールの早さは調節できないので、調節したい場合はプラグインで設定することができます。

スクロールをゆっくりする機能もおすすめなので良かったら試してみてください。

バックアッププラグインUpdraftPlusについて↓

参考【初心者向け｜簡単】UpdraftPlusでバックアップ・復元のやり方

続きを見る

まとめ　アンカーリンクは読みやすい記事をつくるために役立ちます

Affinnger6では、ブロック設定の「HTMLアンカー」にID名を入力し、そのIDに「#」を付けてアンカーテキストにリンクを設定することでアンカーリンクを作ることができ、簡単に設定することができます。

アンカーリンク、アンカーテキスト、スクロールをゆっくりすることで、読者に読みやすい記事を作ることができます。

ブログを始めたばかりの方や、今から始める方一緒にブログ頑張りましょう。

「Affinnger6でアンカーリンクの作り方」をはじめから読む

WordPressのインストールもできます ∥

ヒトデさんの本で、ブログをstartさせたい方におすすめです。

初心者の方でもとても分かりやすいです↓

【送料無料】「ゆる副業」のはじめかたアフィリエイトブログ スキマ時間で自分の「好き」をお金に変える!／ヒトデ 価格：1,628円（税込、送料無料) (2025/12/9時点) 楽天で購入