Help us understand the problem. What is going on with this article?

WordPressメモ: ページ内リンク

やりたいこと

CSSを使ってWordPressのページ内リンクを貼りたい
Sample Pageの目次項目をクリックすると記事本体に飛ぶようにしたい(普通にHTMLでやるとイマイチなので、CSSを使って華麗にキメたい)。

概要

Step 1: CSSを追加する
Step 2: リンク先にタグを付ける
Step 3: リンク元にタグを付ける

やり方

Step 1: CSSを追加する

外観 > カスタマイズ > 追加CSS を開き、以下(Fig 1)を追記。こんな感じ(Fig 2)で書き込んで「公開」ボタンを押しておく1

Fig 1

CSS
a.anchor{
    display: block;
    padding-top: 110px; /*数値は結果を見ながら適当に*/
    margin-top: -110px; /*上の値とプラマイ打ち消すようにすれば良いみたい*/
}

Fig 2 外観 > カスタマイズ > 追加CSS を開いて Fig 1のコードを貼り付ける。
fig-02.png

Step 2: リンク先にタグを付ける

本文タイトル「サラリーマン税金訴訟(大島訴訟)」(Fig 3)に飛ばしたいので、ここにリンク先を設定する。

  • まずはターゲットの名前を決める。ここでは、a002 と名付けた。
  • ブロックを「HTMLで編集」(Fig 4)で開き、リンク先文字列の頭にアンカタグ<a id="a002" class="anchor">を貼り付ける。
  • こんな感じ(Fig 5)(最後の<a href="#a000">目次</a>は目次に戻るためのタグ)。

Fig 3 リンク先(ビジュアル編集)
fig-03.png

Fig 4 リンク先(HTMLとして編集)
fig-04.png

Fig 5

HTML
<p class="has-background has-luminous-vivid-amber-background-color"><a id="a002" class="anchor"></a><strong>サラリーマン税金訴訟(大島訴訟)</strong> [<a href="#a000">目次</a>]</p>

Step 3: リンク元にタグを付ける

リンク元の文字列に普通にリンクを設定する。
- リンク先指定は #ナントカ だけでOK。今回は id="a002" に飛ばしたいので、頭に # を付けて #a002だけ書き入れておけば良い。
- もちろん、https://example.com/foo/bar/#a002 みたいにフルパスを入れても良い(他のページのアンカに飛ばすときはパスを入れてやればOK)。

fig-06.png

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away