記事を書いていて実際に困ったのでいろいろ試してみたところ、この方法が一番いいのではないかということで書き留めておきたいと思います。

私のような初心者でも分かるように詳しく説明しますので、同じように困っている人がいたらやってみて下さいね。

スポンサーリンク

アンカーリンクを作成する

アンカーリンクという言葉自体知らないでやっとこの言葉にたどり着いた人もいることでしょうね(^▽^)


そういう私もジャンプリンクという言葉しか思いつかなくて困りました(汗)

アンカーリンクは、通常

リンク元が
<a href="#1">今回</a>

リンク先が
<a id="1"></a>

となります。

ちなみに”1”というのは、任意です。

記号みたいなものなので、「1,2,3」でも「a,b,c」でもわかりやすいもので構いません。

文章中の「今回」をクリックすると文章の中の”1”のリンクを貼った任意の場所に移動するというわけです。

この記事を使って具体的に説明しますね。

「今回」というリンクをクリックしたら「そういう私」というところにジャンプする設定をしてみます。

まずはリンク元(今回)の設定をします。

文章中の「今回」をハイライトさせたら出てくるリンクのマークをクリックします
出てくるボックスに”#1”と入力して右側の送信(矢印)をクリックします

次にリンク先(そういう私)の設定をします。

そういう私という文字を入力したブロック内(任意の場所)をクリックしたら出てくるボックス内の「詳細設定」をクリック
HTMLとして編集をクリック
するとこういったHTML編集画面になります
そういう私を<a href="#1">そういう私</a>に変更します
ボックス内をクリックすると出てくる「詳細設定」をクリック
ビジュアル編集をクリックして見た目を元に戻しておきます

これでアンカーリンクの設定は終わりです。

更新してサイトを見てみると、リンク元の文字(ここでは今日)が青色に変わっているはずです。

そしてリンク元の文字(ここでは今日)をクリックするとリンク先(ここではそういう私)にジャンプするはずです。

要するに、リンク元に「1」という属性を持たせて、その先の「1」のところまで飛んでください、という命令をしたわけですね。

上手くジャンプした人はここで終了です(^▽^)/

ジャンプしたら一番上の行が見えない?

通常はこれでジャンプするはずなのですが、

ん?

ジャンプした文章の一番上の行が隠れていませんか?

こういう方、多いと思います。

ワードプレスの場合、こういったことが多く起こるようです。

ジャンプ位置がずれる問題の解決方法

ネットにも様々な解決方法が上がっているのですが、私が一番いいと思ったのが、次の方法です。

この方法で設定するとサイト全体に影響するので、全ての投稿記事でジャンプのずれを解消することができます。

それでは説明していきましょう。

まず先程のリンク先のHTMLを少し変更します。

リンク先の

<a href="#1">そういう私</a>

と変更していたところを更に

<a id="1" class="anchor" ></a>そういう私

と変更します。

次にCSS(スタイルシート)を変更します。

CSSの直接の変更はやめて下さいね。元に戻らなくなるかもしれません。
次の方法では直接の変更ではなく、追加するだけなので後からの変更、削除も簡単です。

作った文章を下書き保存したらダッシュボードに移ります。

ダッシュボードの下の方の外観―カスタマイズをクリックします。
出てきた画面の下の方にある追加CSSをクリックしてこのように入力します。

これで設定は終わりです。

コピー用にHTMLを書いておきます。

a.anchor {
display: block;
position: relative;
top: -100px;
visibility: hidden;
}

ジャンプ位置がずれ過ぎたりずれが足らない場合は-100の数字を変えて調整します。

これでジャンプ位置がきちんと調節されたのではないでしょうか。

なお、この方法は「オガワタン.com」の「ページ内リンクがずれて表示される場合の解決策」という記事を参考にさせていただきました。

最後に

私もワードプレス歴は長いのですが、とても使い込んでいるとはいえません。

最近のワードプレスのブロック編集も右往左往しながらやっているという感じですので、同じような方々も分かるように詳しく書いたつもりです。

この記事が困っている人の助けになればうれしいです。




スポンサーリンク
おすすめの記事