テクニカル

WordPress|ブログ記事ページ内ジャンプのhtmlタグソースコード|ワードプレス

今日はブログの記事でよく見られる『ページ内ジャンプ』についてレポートします。

この記事と全く同じ体裁の記事が作れるように、僕が使っているhtmlのソースコードも書き出しました。

 

(目次)
・記事内ジャンプとは
・記事内ジャンプのhtmlタグ
・記事内ジャンプを使うべき時
・さいごに

 

記事内ジャンプとは

記事内ジャンプとは上の(目次)内に書かれた見出しをクリックすると記事ページの該当の見出しに飛ぶ設定です。
この記事も説明のために記事内ジャンプを使ってみました。

この記事の場合は囲み枠の中に(目次)を作っていますが、特にこのような装飾はなくても使えます。

 

記事内ジャンプのhtmlタグ

テキストエディタで以下のコードを入力すれば[(目次側)見出し]をクリックで[(記事側)見出し]へとジャンプできる設定になります。

<a href="#head1">(目次側)見出し</a>
<a id="head1"></a>(記事側)見出し

 


僕がブログでテンプレート的によく使ってるソースコードです。よかったら使ってください。
この記事と同じ体裁の(目次)見出しページ内ジャンプになります。

 

<p class="well2">
(目次)
<a href="#head1">・見出し1</a>
<a href="#head2">・見出し2</a>
<a href="#head3">・見出し3</a>
<a href="#head4">・見出し4</a></p>

<h5 class="style1"><a id="head6"></a>見出し1</h5>
<h5 class="style2"><a id="head7"></a>見出し2</h5>
<h5 class="style3"><a id="head8"></a>見出し3</h5>
<h5 class="style4"><a id="head9"></a>見出し4</h5>

 

記事内ジャンプを使うべき時

あまりに長い文の時はあった方が便利ですよね。

それぞれの見出しの独立性の強い時もなおさら使った方がいい場合があります。

見出しの独立性が強いとは見出し1・見出し2・見出し3・・・とある中で必ずしもこの順番に読む必要のない記事です。

たとえばお店紹介時の記事で見出し4に紹介されているお店の文を読みたいときは見出し1〜3は飛ばして一気に見出し4に飛べた方がスムーズに情報を得られますよね。

 

さいごに

ページ内ジャンプも便利ですが、それよりもずっと大切なことは(目次)を記事の冒頭に設置することです。

目次を見てすぐにその記事に書かれている内容を把握できますし、先に記事の全体像を把握してもらうことは書き手の主張をよりスムーズに伝えられることにつながります。

 
以上。


僕は真剣にブログ運営をしています。
よかったらこの機会にブクマ・フォローをお願いします。

 

haigaki reports.をブックマーク

関連記事

  1. ノウハウ

    コネなしツテなしフォロワー0。新規ドメインからブログを始めて半年間。コツコツ検索流入で月間3万PV

    半年間ブログを書く上で工夫していること3つとそれぞれについてその理由を…

  2. ノウハウ

    雑記ブログのアクセスアップには広告塔になる記事を作る。

    雑記ブログにおけるアクセスアップのための‘考え方’を1つレポートします…

  3. レポート

    最近ブログへのアクセスに関わることで起きたちょっとした出来事のメモ

    最近ブログで短期間に集中してアクセスが集まった瞬間が3回ありました。…

  4. レポート

    6月毎日ブログ更新中!経過報告。

    毎日更新している今の心境を、ログとして残しておくためにもツラツラと書き…

  5. ノウハウ

    ブロガー歴3ヶ月、僕の記事作成手順。ブログの書き方をくどくどと紹介します。

    今日は僕の現在の記事作成手順についてレポートします。記事自体の…

読まれている記事

最近の記事

  1. B.LEAGUE

    Bリーグ・チャンピオンシップファイナル観戦して来ました。
  2. 塾関係

    京大塾講師が教える個別指導塾の効果的な利用方法6つ
  3. ノウハウ

    ブロガー歴3ヶ月、僕の記事作成手順。ブログの書き方をくどくどと紹介します。
  4. 落ちこぼれ人生

    進学校で落ちこぼれた時の話。部活への逃避と転校の危機、不合格と嫉妬。
  5. レポート

    ブログのアクセス数5万PV達成とその実情。思い通りにはいかない。ブログの夏。※ブ…
PAGE TOP