ページ内リンクで記事の途中にジャンプさせる方法

ページ内リンクで記事の途中にジャンプさせる方法 全般

突然ですが、じゃんけんしましょう。

じゃんけん・・・結果を見る

(↑「<a href=”#a1″>結果を見る</a>」
と記述してます。)

 

 

 

 

 

 

↓「<a id=”abb”></a>戻ってくる場所」
と記述してます。

戻ってくる場所

どうでしたか?

 

勝敗は正直どうでもいいんですけど、今回は今みたいにブログの訪問者をページ内の別の場所にジャンプさせることができる設定方法を紹介します。

 

コピペでOK!ページ内リンクの作り方

文字を変えればそのまま使えるので、コピペして使ってみて下さい。

・ジャンプする側

<a href=”#a1″>ここをクリックでジャンプ</a>

「a1」は任意の英数字に変更できます。

「#」を付けるのを忘れずに。

 

・ジャンプしてくる側(2種類)

<a id=”a1″></a>ここにジャンプしてきます
 h2,h3,h4など任意の見出しを設定できます
<h3 id=”a1″>見出しの場合</h3>

見出しに飛ばす場合は下をコピペして使って下さい。

また、「a1」の部分はジャンプする側と同じ英数字を使います。

ただし、「#」は必要ありません。

 

プラグイン「TinyMCE Advanced」をインストールしている場合

WordPressプラグインの「TinyMCE Advanced」をインストールしているなら、設定は簡単です。

「TinyMCE Advanced」は有料無料問わず、多くのWordpressテーマで使えますので、まだ使っていない方はこの機会にインストールしておきましょう。

 

tinymce advancedボタン

事前に上記の「リンクボタン」と「アンカーボタン」を使えるように設定しておいてください。

 

ジャンプする側の設定

ボタンを使えるように設定したら、まずはジャンプする側の設定です。

ジャンプ側設定

ジャンプするときにクリックさせたい文字列を選択した状態で「リンクの挿入」ボタンを押します。

そして、「#」と任意の文字列→「#英数字」を入力。

「エンター」で決定で設定完了です。

 

アンカーの設定

ジャンプする先の設定もほとんど同じです。

文字列をドラッグ

ドラッグして飛ばしたい先の文字列を選択。(CSSをいじらない場合、ジャンプした時に文字列が見えない可能性があるので注意してください)

 

アンカーボタン

アンカーボタンをクリック。

 

アンカー設定

先ほどのジャンプする側と同じ文字列を入力します。
ただし、「#」はいらないので注意です。

 

入力が終わったら「OK」をクリックして完了です。

 

「プレビュー」で、きちんと動作するか確認してみましょう。

動作確認してOKだったら完了です。

お疲れ様でした。

 

長文の記事などで、うまく使うことができれば、ユーザビリティの向上につながると思います。

ぜひ有効に活用してみて下さい。

 

今回は以上です。

では。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

↓「<a id=”a1″></a>じゃんけんの結果」
と記述してます。

じゃんけんの結果

 

グー!!

ジャンケンマンフィーバーぐー

出典:ジャンケンマンフィーバーflash

上に戻る

↑「<a href=”#abb”>上に戻る</a>」
と記述してます。

 

コメント