指定場所にジャンプ！簡単タグでページ内リンク

 

Shortcodes Ultimateの説明の記事で一覧の項目から、説明に飛ぶページ内リンクを作りました。

これも忘れないようにメモっておきます。

縦長にスクロールするブログでは、指定のところに一気に飛びたい時便利です。

 

プラグインもあるようですが、記述するタグは二つだけなので簡単です。

ページ内リンク　― クリックしてみよう

クリックでページの最後の方に飛べます

1.　この文字をクリックするとページの下の方にジャンプします

2.

3.　

 

ページ内リンクの作り方

記事の投稿はテキストタブで開きます。

そして、リンクしたい場所に目印（アンカー）をつけます。

アンカーの付け方は、ページ内のリンクしたい場所や文字、画像などに次のように記述します。

<a name=”アンカー名”>文字</a>

アンカー名はなんでもＯＫ。
複数作る場合は同じアンカー名をつけないように注意です。
 
リンク元には次のような記述をします。
 
<a href=”#アンカー名”>リンク元に表示する文字や画像など</a>

※アンカー名は、半角英数で設定しましょう。

これだけです(^o^)。

 

 

 

アンカーの付け方とリンク元の例

このページの下の方に「文字」「画像」「ショートコードのアイコン」などでアンカーをつけてあります。

上の「ページ内リンクをクリックしてみよう」の文字や画像をクリックしてみてください。

リンク元の例

1.の記述例）<a href=”#moji”>この文字をクリック</a>するとページの下の方にジャンプします

2.の記述例) <a href=”kesiki”> <img src=”画像のURL”></a>

3.の記述例)

※例はSpeech Bubbleを使っています。

リンク先の例

文字　ここに飛ぶよ

記述例）<a name=”moji”>ここに飛ぶよ</a>

画像　景色の画像

記述例） <a name=”kesiki”><img src=”画像のURL”></a>

吹き出しのショートコード

記述例）

ページ上からリンクすると↓に飛んできます。

ここに飛ぶよ

 

 

ここをクリックすれば元の場所

使い方はいろいろ
目次を作ってクリックで飛ぶようにしたり、特定の文字やボタンで説明箇所に飛ばしたり・・

ブログを見てくれる人が便利になるように使い道を考えてみるといいかも～（＾ｏ＾）

 

前の記事へ　WordPressの再編集の「困った」を解決、投稿をいつもテキストモードで表示させる

次の記事へ　１枚の画像で複数リンク！イメージマップ作り

WordPress一覧へ

 

 

にほんブログ村

日々の出来事 ブログランキングへ