【ブログ編集】Bloggerで簡単にページ内リンク(アンカー)を作る方法

2019年7月13日土曜日

Blog編集

t f B! P L

Bloggerで簡単にページ内リンクを作る

Bloggerでブログを書いているとページのリンク付きメニューが作りたいときがあるのですが、Bloggerにはページ内リンクを作る機能が無く、ページ内リンクのやり方がわかりませんでした。

煩雑な方法は嫌なので色々探してみた結果、比較的簡単そうなものが見つかったので紹介します。

紹介するのは、見出しなどへジャンプするものと、文字列へジャンプするものの2種類です。


見出し・小見出し・準見出しなどへのリンクの作成法



1.飛ばし先の文字を見出し(小見出し・準見出し)にします。

テスト1


2.編集画面をHTMLに変更します。

この時、見出しにした部分のHTMLは下の通りです。

<h2>
テスト1</h2>


これに下のように「id="test"」書き加えます。


<h2 id="test">
テスト1</h2>


testは、適当なローマ字でOKです。


3.リンク元になる文字列にリンクをくわえます。

テスト1へ飛ぶ


リンクは、 https://blog.kitaro.click/2019/07/blogger.html#test


編集中のページの画面右のリンクからコピーして、そこに#testを加えるだけです。


今回は見出しでやりましたので、「h2」となっていますが、小見出しなら「h3」、準見出しなら「h4」になります。


文字列へのリンクの作成方法


1.飛ばし先の文字を書きます


ジャンプ先

今回は、「ジャンプ先」と言う文字列にジャンプさせます。



2.編集画面をHTMLに変更します。


HTML編集画面で、飛ばし先の文字列を<div id="test2">ジャンプ先</div>のように、囲みます。


<div id="test2">
ジャンプ先</div>

test2は、適当なローマ字でOKです。


3.リンク元になる文字列にリンクをくわえます。

ジャンプ先へ飛ぶ


リンクは、 https://blog.kitaro.click/2019/07/blogger.html#test2


編集中のページの画面右のリンクからコピーして、そこに#test2を加えるだけです。



以上の様に、リンク先に「id="〇〇"」で名前を付けて、ページのアドレスの後に#〇〇を付けたものをリンク先に指定するだけです。

ページのはじめにリンク付きのメニューを作ったり、TOPへ戻るリンクが簡単に作れそうなので、活用していこうと思います。


このブログを検索

QooQ