ワードプレス・HTMLでデザインされた見出しにテキストエディタで内部リンクをつけて同じ記事内で移動するやり方

同じ記事内でクリックで指定した場所(タイトル)に
移動(ジャンプ)する事を内部リンクといいます。

 

ブログで目次を見て気になったタイトルをクリック
するとそのタイトルまで一気に飛びますよね、
それを記事の途中の文字にコードを貼る事で同じ
記事内で指定した場所に飛ばすことができます。

 

ワードプレスのビジュアルエディタで
プラグインを使って内部リンクを作るやり方も
ありますが今回は
HTMLやCSSコードでデザイン
された見出しにテキストエディタで内部リンクを貼る
やり方を解説してみようと思います。

あんまりプラグインを
入れたくない人や
テキストエディタを
使っている人向けの
内容になります。




デザインされた見出しとは?

 

デザインされた見出しとは上↑のタイトルのように
HTMLやCSSコードで色や囲いなどを
装飾されたものです。

 

  • 「デザインされていない見出し」
  • ・タイトル
    <h2>・タイトル</h2>

    タグのみでなにも
    デザインされていないものは
    タイトル文字だけのなんとも
    寂しいタイトルになります。

    デザインされていないタグのみの見出し
    <h2>これは見出し</h2>
    に内部リンクのコードを貼るやり方はよく
    見かけます。

     

    今回はコードを使ってデザインされた見出しに
    ワードプレスのテキストエディタで
    内部リンクを貼るやり方になります。

     

      

     

    内部リンクのコード

     

    内部リンクには2つのコードを使います。

     

    クリックで移動させたい場所には
    こちらのコードを貼り付けます。
    <a id="○○"></a>

    例・ <h2><a id="○○"></a>2番目のタイトル</h2>

     

    クリックさせたい
    文章に貼るコードはこちらを貼り付けます。
    <a href="#○○"></a>

    例・ <a href="#○○">クリックで「2番目のタイトル」へ</a>

     

    ○○には数字もしくはローマ字でidを入力して
    ください。
    idについては下記で解説しています。

    クリックすると
    「実際にidを入れて内部リンクを体験してみる」
    に飛びます。

    これも今回解説した内部リンクを使って
    移動できるようにしてあります。

    見出し(タイトル)に内部リンクを貼るやり方

     

    見出しに内部リンクのコードを貼り付ける場所に
    ついて解説します。

     

    タグのみの見出し(タイトル)への
    コードの貼り付け方は下のようになります。

     

    移動先↓
    <h2><a id="○○"></a>・タイトル</h2>

     

    <a href="#○○">クリックで・タイトルへ移動します</a>

    クリックで移動先へ↑



      

     

    デザインされた見出しに内部リンクを貼るやり方

     

    デザインされた見出し(タイトル)に
    内部リンクのコードを貼り付ける場所は以下の
    とおりになります。

     

    移動先への貼り方↓

    <h2 class="sc_heading bborder l blue"><span class="sc_title" ><a id="○○"></a>デザインされた見出しとは?</span></h2>

     

    <a href="#○○">デザインされた見出しとは?</a>

    クリックで移動先への貼り方↑

    #「ハッシュ記号」を入れるのを忘れずに!!




    実際にidを入れて内部リンクを体験してみる

     

    内部リンクのコードの○○にidを入れて
    内部リンクを体験してみましょう。

     

    idとは?

     

    idはリンク元とリンク先を結びつけるための
    名前になります。

     

    内部リンクのコードの○○に入れるidは

  • アルファベットで始まる事
  • 語尾になら数字を組み合わせる事もできまる。
  • 記号は使わない方が無難
  • 同じidは使わない事
    (重複させない事)
  •  

    実際にidを入れて内部リンクを体験

    今回はidにアルファベットのabと語尾に
    数字の1を入れます。

     

    この内部リンクのコードの○○に
    abと語尾に数字の1を入れるとこうなります。

  • 移動先
  • <a id="○○"></a>⇒<a id="ab1"></a>

     

  • クリックで移動先へ
  • <a href="#○○"></a>⇒<a href="#ab1"></a>

     

    クリックして移動する場所は最初の
    目次「デザインされた見出しとは?」に
    移動できるように内部リンクを貼り付けます。

     

    <h2 class="sc_heading bborder l blue"><span class="sc_title" ><a id="ab1"></a>デザインされた見出しとは?</span></h2>

     

    <a href="#ab1">クリックで「デザインされた見出しとは?」に移動する</a>

     

    クリックでデザインされた見出しとは?に移動する

    内部リンクを
    わかりやすく体験してみましょう。

     

    リンク(青字)の
    クリックでデザインされた
    見出しとは?に移動するを
    クリックすると
    このタイトルの出だしまで
    飛んでくれますよ。

    見出しに内部リンクを貼る~まとめ

     

    ワードプレスではプラグインを使った
    内部リンクの作り方はビジュアルエディタでしか
    使えないので今回テキストエディタでも使える
    内部リンクの作り方を解説してみました。

     

    プラグインを使えば簡単にできるのですが
    プラグインをあまり増やしたくないという方や
    ビジュアルでなくテキストで記事を書いている方に
    はおすすめです。

     

    デザインされた見出しに貼るやり方が
    わからない方向けにもなったかなと思います。




    こんな記事も書いています

     

     

     

     

     

     

     

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