【ブログはじめ】超カンタンな「ページ内ジャンプ」を覚えよう

これから始めるSNS・ブログ

こんにちわ。KaibaSAKAMOTOです。

ページ内ジャンプって、人によってやりかた色々あるけれど、カンタンにできるものってどれなのかな?

色々と教わったり、調べたりした中で、超カンタンな「ページ内ジャンプ」( “ページ内移動” とも言ったりします)の方法を説明します。

カンタンゆえに、読者さんにも優しい配慮ができます

この方法でなくても、読み手さんに優しい配慮はできますけど…汗。

ただ、本当にカンタンなので、ブログはじめたばかりの人は是非、覚えて行ってください。

なお、本記事は「ビジュアル編集」を使用するケースを想定しています。

「テキスト編集」においても仕組みは共通ですのでご参考ください。

【ページ内ジャンプ】おおまかな流れ

カンタンと言っている以上は、カンタンな流れで説明します。

  1. ジャンプ先への入口=ジャンプ元で「リンク」に 「#jump1」を入力する
  1. 「ジャンプしたい先=ジャンプ出口」の「一つ前の文節」のコードに「id=”jump1″」と挿入する

以上です。

ブログを始めたばかりの方には、「えっ、ムズ!」ですが、

一番カンタンな方法なので5回くらいやっているうちに、本当に慣れてきます。

慣れてきたら、「読み手さんのことも配慮する応用編」も試してみてください。

【ページ内ジャンプ】手順詳細

ジャンプ元(入り口)とジャンプ先(出口)でそれぞれ設定を行ないます。

入り口

こちらへジャンプ

  1. ジャンプ先への「入り口」
    =「ジャンプ元」で

「こちら」をドラッグして

「リンク」をクリックする

出てきた窓には「#jump1」とだけ入力して

「↩︎」をクリック

「入り口=ジャンプ元」の仕掛けは以上です。

出口

あとは「ジャンプ先=出口」の仕掛けだけです。

    

毎日習慣付けるべき「筋トレ」は次回の課題となりました。

今回の1番のキモは

タンパク質を中心に摂取する

効果促進のためにはプチ断食が有効

毎日2.7回以上は食べたもの、飲んだもの記録を取る

  1. 「ジャンプ先」=「出口」で

ジャンプしたい先(ジャンプ先)の一つ前の文節ブロックを選択

ここでの場合は「毎日……課題となりました」の部分が「一つ前の文節」です。

「︙」から「HTMLとして編集」をクリック

次のような表記になります。

テキスト編集の中に入って(最初のpのあとにポインターを入れて)、半角英数字入力で「 id=”jump1″」(1スペース+id+=+”jump1″)と入力。

 pのあとには1スペースも入れましょう。

 jump前後の「”」「”」も必要です。

これで「飛びます」。「飛びます飛びます by 坂上二郎」

実際に飛べるかどうか、上の「こちらへジャンプ」の「こちら」へをクリックしてみてください。

ここまでが基礎編です。

応用編

ジャンプ元へ戻してあげる

「ジャンプ元」と「ジャンプ先」が近ければ、「読み手さん」も少しスクロールすれば、元の位置に戻れますが、

「ずっとスクロールしなければ戻れない」のでは、「読み手さんファースト」ではありません。

上述と同じ理屈で、ジャンプしてたどり着いた場所に、「戻すための仕掛け」をしておきます。

ご参考までに、

【メンタリストDaiGo氏】ダイエット関連動画から知る「体脂肪率の落とし方」

という記事が、まさに、ジャンプ元とジャンプ先が離れているため、「ジャンプ先」周辺に「ジャンプ元」に戻る仕掛けをしてあります。

「毎日習慣付けるべき『筋トレ』は次回の課題となりました」を、

ジャンプ先として、コードに<p id=”jump1″>を仕掛けてあります。

そして、「目次へ戻る」には、「リンク」に、「#jump2」と入力してあります。

戻す先(=元の「ジャンプ元」であり「戻すジャンプ先でもある先」)には、

目次の一つ前の文節ブロック「3行要約はコチラへジャンプ」に、

<p id=”jump2″> を入力してあります。

複雑なのですが、「ジャンプ元は、ジャンプ先にもなる」ということです。

つまり、「コチラ」の前には、「#jump1」が入力されており、

それを含んだ「3行要約はコチラへジャンプ」の文全体には、<p id=”jump2″>が入力されています。

複雑ですね。

使いこなしているうちに「あー、そういうことか」って分かってきます。

ページ外にも飛ばせる

ジャンプ元をコピーして、別のブログ記事の中に貼り付けると、

ページ外からでも、ジャンプ先に飛べます。

こんな感じです。

3行要約はコチラへジャンプ

スペース(空白)でも仕掛け可能

スペースでも当然、

「ジャンプ元」にもできますし、

 

「ジャンプ先」にもできます。

たまに、ジャンプ先の一つ前の文節ブロックが、「文節」でなく、「画像」だったりすることがありますが、

そうした場合には、1行挿入して、そこに「スペース(ブランク)」を入力して、そのスペース(ブランク)部分にジャンプ先の仕掛けをすれば良いです。

こんな感じ です。

こんな感じ と です の間の「スペース(ブランク)」をタップしてみてください。

6行上の、「スペース(ブランク)」を入力してある行へ飛びます。

入力した「ブランク(空白)」に設定

入力した「ブランク(空白)」に設定

設定コード

画像のあとの、「ブランク(空白)」に、実際に飛ばしている例が、こちらです。

コメント

タイトルとURLをコピーしました