同じ記事内でクリックで指定した場所（タイトル）に
移動（ジャンプ）する事を内部リンクといいます。
ブログで目次を見て気になったタイトルをクリック
するとそのタイトルまで一気に飛びますよね、
それを記事の途中の文字にコードを貼る事で同じ
記事内で指定した場所に飛ばすことができます。
ワードプレスのビジュアルエディタで
プラグインを使って内部リンクを作るやり方も
ありますが今回は
HTMLやCSSコードでデザイン
された見出しにテキストエディタで内部リンクを貼る
やり方を解説してみようと思います。
入れたくない人や
テキストエディタを
使っている人向けの
内容になります。
目次
デザインされた見出しとは？
デザインされた見出しとは上↑のタイトルのように
HTMLやCSSコードで色や囲いなどを
装飾されたものです。
・タイトル
<h2>・タイトル</h2>
デザインされていないものは
タイトル文字だけのなんとも
寂しいタイトルになります。
デザインされていないタグのみの見出し
<h2>これは見出し</h2>
に内部リンクのコードを貼るやり方はよく
見かけます。
今回はコードを使ってデザインされた見出しに
ワードプレスのテキストエディタで
内部リンクを貼るやり方になります。
内部リンクのコード
内部リンクには２つのコードを使います。
クリックで移動させたい場所には
こちらのコードを貼り付けます。
<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にアルファベットのabと語尾に
数字の１を入れます。
この内部リンクのコードの○○に
abと語尾に数字の１を入れるとこうなります。
<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>
わかりやすく体験してみましょう。
リンク（青字）の
クリックでデザインされた
見出しとは？に移動するを
クリックすると
このタイトルの出だしまで
飛んでくれますよ。
見出しに内部リンクを貼る～まとめ
ワードプレスではプラグインを使った
内部リンクの作り方はビジュアルエディタでしか
使えないので今回テキストエディタでも使える
内部リンクの作り方を解説してみました。
プラグインを使えば簡単にできるのですが
プラグインをあまり増やしたくないという方や
ビジュアルでなくテキストで記事を書いている方に
はおすすめです。
デザインされた見出しに貼るやり方が
わからない方向けにもなったかなと思います。
