皆さんこんにちは！Venus店長(@Venusblaze2)です！
ワードプレスでブログ記事を書いている時ページ内の特定の位置へのリンク「ページ内リンク」を利用したいという時ってありますよね。
実はページ内リンクはたった2行のHTML(コーディング)によって実現することが出来るので、ご紹介します。
ワードプレスって何?という方にはこちらの記事がおすすめ
ワードプレスでのページ内リンクの作り方
まずはワードプレスの記事編集画面がこのような構成で、「H3へのりんく」という段落に「ここに飛びます」と書かれた見出しへのページ内リンクを作りたい場面を想定します。
1.まずは編集画面をコードエディタに切り替えます。(画面右上の3点アイコンから変更できます)
2.目的地である「H3」のタグ内に「id属性」を追加します。(変更部分を赤色で示しています。)
<H3 id=”(ここにid名を自由に決めて入力します。id名は英小文字が好ましいです。)”>
(例) <H3 id=”link”>ここに飛びます。</H3>
3.リンクを貼る「p」タグの子として「a」タグを追加する。(aはリンクを貼る為のタグです。)
aタグ内の「href属性」に「#」+先ほど決めたid名を入力します。
<a href=”#id名”></a>
(例) <p><a href=”#link”>H3へのリンク</a></p>
id名の前の「#」は忘れずに入力しましょう！
完成形はこんな感じです！
(コードエディタ画面)
(実際の画面)
無事段落にリンクが貼れていますね！これでページ内リンクの作成は完了です！
リンクをクリックすると指定の位置までページがスクロールされます。
ワードプレスではHTMLの知識が無くとも記事の制作が行えますが、ページ内リンクのように簡単なコードで実現できる便利な機能も沢山あるので是非活用してみて下さい！
↓ブログ村ランキングに参加しています。
にほんブログ村
