あふぃり〜ちどっとこむ

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

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

      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

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

8 + seventeen =

  関連記事

サイトアフィリエイトはリスクの分散を考えておいた方がよさそう

  サイトアフィリエイトで重要だろうなとふと思うことの1つは 収入源の …

子テーマの超簡単な作成の仕方!

    ☆ テーマの編集についての注意点   *W …

ワードプレスであるページの本文(コンテンツ)が表示されなかった時の原因と解決法

ワードプレスである特定のページの内容(本文・コンテンツ) のみ丸ごと表示されない場合の原因と解決法について

AdSense レスポンシブ広告余白背景カラーの変更

  Adsense広告はレスポンシブを設定してますが ワードプレスのテ …

hタグ(見出しタグ)ルール

    ブログやサイトで記事を書く際に、“タイト …

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

  忍者ブログに i2i無料レンタルWebパーツ i2i無料レンタルW …

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

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

アフィリエイトの作業量を増やす方法

アフィリエイトはまず膨大な作業量を桁外れにできるか、異常値を作業量で叩き出せるか?そこが最初の鍵ですよね、、、、作業量を増やすには?

Word Press運営・サイト運営での不具合解決備忘録まとめ

  ワードプレスなどでのサイト運営にあたって トラブル、不具合はつきも …

無料アクセス解析で複数のブログ管理向けはどれか

  アクセス解析って色々ありますねぃ いったいどれが良いんでしょう? …