あふぃり〜ちどっとこむ

アフィリエイトを始めるための準備と注意点(備忘録)

特定箇所へジャンプさせる方法(ページ内に目次を作る)

      2017/07/30

 

サイトの記事を書く際で、細部までなるべく丁寧に説明しようと書いていると、

テキスト量、画像量が多くなり、

1ページ内に盛り込む内容も多くなり、

まとめずらく、読みづらいことになってしまう場合がある

そんな場合、1ページ内でも目次的なものをつくり

本題にすぐ入れるようにする、

もしくはページ内の情報をわかりやすく

なるべく冒頭で提示しておくことが必要だったりする

ということで

特定の指定したピンポイントに飛べる目次リンクなどを作れると便利

今日はそのやり方を備忘録

 

ジャンプアンカータグ 2

 

 〜〜項目〜〜〜〜〜〜〜〜〜〜

☆ジャンプアンカータグ、見出しタグで指定する

1*アンカーを作る(ジャンプ先の指定)

2*そのアンカーへリンクを貼る(ジャンプさせるリンクを作る)

3*特定ページの特定箇所へジャンプさせる方法まとめ&その作業効率を上げる方法

〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜

 

 

 

☆ジャンプアンカータグ、見出しタグで指定する

 

 使うのは下記のタグ

<h3 id="アンカー名">見出し</h3>
<h2 id="アンカー名">見出し</h2>
<a href="ページのURL#アンカー名">見出し</a>
<h3 id="アンカー名">見出し</h3>
<h2 id="アンカー名">見出し</h2>
<a href="ページのURL#アンカー名">見出し</a>

 

これは、他のページのある特定の場所に飛んだり、

同一ページ内の特定の箇所に飛んだり出来る

 

考え方としては、

1*アンカーを作る(ジャンプ先の指定)

2*そのアンカーへリンクを貼る(ジャンプさせるリンクを作る)

ということ

 

 

1*アンカーを作る(ジャンプ先の指定)

 

ジャンプ先はわかりやすく、タイトルタグ(h2タグやh3タグ)と共に使うことが多いかなと…

その場合、下記のようになる

<h2 id="Q01(アンカー名)">見出し</h2>
<h3 id="A01(アンカー名)">見出し</h3>
<h2 id="Q01(アンカー名)">見出し</h2>
<h3 id="A01(アンカー名)">見出し</h3>

 

 上記の例は、見出しタグのh3タグ、h2タグとともに使う例

“Q01” , “A01” のアンカー名部分は自分がわかりやすければ基本的にはなんでもいいけれど、

同ページ内に同じ名前はNG

ここに来て下さい!という記号のようなもので

ここへリンクを貼るときに使う合い言葉のようなもの

そして、見出し部分にはその見出しを書く

 

例えば

“特定の場所へジャンプする” や、

“アンカー先へ飛べるリンクを貼る”

という記事を書き、そこに瞬時に飛べるリンク、目次を作る場合、

アンカー(ジャンプ先)の設定は下記のようになる

h2タグとともに使う場合の例)

<h2 id="Q01">特定の場所へジャンプする</h2>
<h2 id="A02">アンカー先へ飛べるリンクを貼る</h2>
<h2 id="Q01">特定の場所へジャンプする</h2>
<h2 id="A02">アンカー先へ飛べるリンクを貼る</h2>

 

 

 

2*アンカーへリンクを貼る(ジャンプさせるリンクを作る)

 

 そしてアンカー先へ飛べるようリンクを貼る

上記の、

“特定の場所へジャンプする” や、

“アンカー先へ飛べるリンクを貼る” のところに飛べるようリンクを貼らなければならない

下記のタグになる

<a href="ページのURL#アンカー名">見出し</a>
<a href="ページのURL#アンカー名">見出し</a>

 

 

 なので、例えば先ほどの

このページの

“特定の場所へジャンプする” や、

“アンカー先へ飛べるリンクを貼る” を見出しタイトルにして

飛ばす場合の具体的リンクは、

<a href="https://afireach.com/site-operation/jump-anchor-tag.html‎#Q01">特定の
場所へジャンプする</a>
<a href="https://afireach.com/site-operation/jump-anchor-tag.html#A02">アン
カー先へ飛べるリンクを貼る</a>

 となる

<a href="https://afireach.com/site-operation/jump-anchor-tag.html‎#Q01">特定の
場所へジャンプする</a>
<a href="https://afireach.com/site-operation/jump-anchor-tag.html#A02">アン
カー先へ飛べるリンクを貼る</a>

 

 

これらはワードプレスだと投稿画面の右上にビジュアルとテキストの切り替えボタンが在るので、“テキスト編集画面” で書ける

 

 

 

3*まとめ&作業効率を上げる方法

 

アンカーを作る(ジャンプ先の指定)タグコード

<h2 id="Q01(アンカー名)">見出し</h2>
<h3 id="A01(アンカー名)">見出し</h3>
<h2 id="Q01(アンカー名)">見出し</h2>
<h3 id="A01(アンカー名)">見出し</h3>

 

など 

 

アンカーへリンクを貼る(ジャンプさせるリンクを作る)タグコード

<a href="ページのURL#Q01(アンカー名)">見出し</a>
<a href="ページのURL#A02(アンカー名)">見出し</a>
<a href="ページのURL#Q01(アンカー名)">見出し</a>
<a href="ページのURL#A02(アンカー名)">見出し</a>

 

など 

Q01 やA02の部分は自分がわかりやすいものにし、
同ページに同じ名前は使わない(使えない)

ということになる

 

 

んが、

これらのコードを手動で書いたりコピペしたりは作業的に面倒だったりする

で、

 

 

作業効率を上げるために

これらのタグをいちいち書いたり、コピペせずに、

WPプラグン AddQuicktag に記録しておいて、

ワンタッチでこのタグが使えるようにしておくと便利
(タグを記憶させておくWPプラグイン AddQuicktag 参照 )

 

最後にこのページでもこのことを利用して冒頭に目次的項目を提示し、

ページ内の項目へジャンプ出来るようにしてみたので

ジャンプしてみて下さいw 

 

以上 あふぃり〜ち備忘録でした

ではよい サイト構築ライフをば! 

 

"サーバー契約・ASP登録・ドメイン取得” の
注意点や選び方をまとめてみましたので
こちらもチェックしてみて下さい☆
★レンタルサーバー選び方
注意点
はこちら

★登録必須ASPの内容
ピックアップ
はこちら
★独自ドメイン取得
注意点
はこちら

 

 - css・html について, Site 運営について ,

スポンサーリンク



スポンサーリンク



Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

6 + nine =

  関連記事

サブドメイン設定とWord Pressインストール

    独自ドメイン取得には1個1個料金がかかるけれど 独自 …

タグを記憶させておけるWPプラグン AddQuicktag

  記事を書く時毎回使うタグってありますよね それを毎回書いてると面倒 …

ASP商品リンクを横に並べて貼る

   アマゾンとか楽天とかのASP商品広告リンクを横に並べて表示させた …

リンク付き画像を簡単設置〜Image Widget〜

    サイドバーなどにリンク付きの画像を設置したい時ってあ …

FC2 ブログにi2iアクセス解析設置

  FC2にも i2i無料レンタルWebパーツの i2iアクセス解析を …

seesaa ブログに無料アクセス解析 i2i を設置

無料ブログにアクセス解析を設置することって結構あると思うのですが 私も色々設置し …

Word Press無料テーマ4種レビュー

  サイト構築の上で、 サイトのデザインは大切 まずは視覚的イメージが …

Yahooメールを複数取得する方法

  サイトアフィリエイト構築にあたって フリーメールの取得は避けて通れ …

Word Press固定ページと投稿ページの使い分け

    Word Pressでは 固定ページと 投稿ページ があるので …

フリー画像素材サービスピックアップ

〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜 向かいます どちらにせよ 向かいます …