テクニカル

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. ノウハウ

    ブログ運営TODOリストメモ11/27

    11/27現在の個人的なTODOリストのメモになります。①…

  2. ノウハウ

    ブログ記事の書き方。ブログ的文章作成の基本のき!

    はい!始まりました haigaki reports. 第253枚目!…

  3. レポート

    ブログ運営9ヶ月目。

    7月26日~8月25日がこのブログの9ヶ月目でした。今日は9ヶ…

  4. ノウハウ

    ブログ運営報告をすることのメリット7つ

    僕はマメに運営報告やブログ関係の記事を書いていますが、単純に「他の人が…

  5. ノウハウ

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

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

  6. レポート

    8ヶ月目のブログレポート。PVや最近のアクセスアップの方法など。

    昨日でブログ運営8ヶ月が経ちました。本日7月26日から9ヶ月目に突…

読まれている記事

最近の記事

  1. レポート

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

    【天の川】ドレイクの方程式とは。地球外知的生命体が存在する可能性【銀河系】
  3. ノウハウ

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

    コネなしツテなしフォロワー0。新規ドメインからブログを始めて半年間。コツコツ検索…
  5. 塾関係

    京大塾講師が教える個別指導塾の効果的な利用方法6つ
PAGE TOP