ページ内移動用のハイパーリンクを分かりやすく装飾する方法

同一ページ内移動用のハイパーリンクを装飾し、ページが切り替わるリンクと区別する方法です。当サイト作者が作成した次のテンプレートについてです。

概要

  1. 長文作成時にはページ内移動用ハイパーリンクがあると便利です。装飾によってその利便性をより向上させる方法を考察します。

  2. リンクをクリックすると、別のページに切り替わるのか同一ページ内で移動するのかを見分けやすくします。

  3. CSSを編集するだけで、一括で装飾できます。

  1. 「ページ内移動用ハイパーリンク」に関して述べる前に、ハイパーリンクの利用目的から説明します。

  2. ハイパーリンクの利用目的を6つに分けました。

    1. 別タブを開いて、別のサイトへ移動
    2. 別タブを開いて、同一サイトの別ページへ移動
    3. 別タブを開いて、同一ページ内での移動
    4. 同じタブで、別のサイトへ移動
    5. 同じタブで、同一サイトの別のページへ移動
    6. 同じタブで、同一ページ内での移動
  3. 上記箇条書きを、表にしました。

    No.タブサイトページ主な利用目的
    1.別サイトの紹介運命って自分の中から見つけるもんだろ
    2.同一サイト内の別ページ紹介カスタムテンプレート
    3.一般的にあまり使われないこのページの概要
    4.別サイトの紹介運命って自分の中から見つけるもんだろ
    5.同一サイト内の別ページ紹介カスタムテンプレート
    6.同一ページ内での移動このページの概要
  4. 上記1~5まではタブが同一か別かの区別があるものの、ページ切り替えがあります。しかし、6だけは同一タブによるページ内移動なのでページの切り替わりがありません。

ハイパーリンクの利便性向上を考察

  1. サイト管理者は、上記表の1,5,6もしくは4~6の組み合わせでハイパーリンクを設定している場合が多いです。つまり、別サイトへのリンクだけ別タブで開くようにしているのか、全てのリンクを同一タブで開く設定にしている場合が多いということです。

  2. いずれにせよ、同一サイト内の別ページへのリンク(5)と同一ページへのリンク(6)の見た目が同じだと、見た目からはその違い(ページ切り替えがあるのかどうか)が分かりにくいです。

  3. ページ切り替えがなく、同一ページ内の移動用ハイパーリンクであるのなら、それを装飾によって明示した方が読む人の利便性を上げられそうです。

テンプレートのCSSを編集

  1. 次のコードを探します。下図で反転している部分です。

    /*ハイパーリンク*/
    121212link-in-entry-1.png
  2. 上記コードの6行程度下に次のコードを追加します。装飾部分は任意に変更できます。色などを変更するのではなく、末尾にそれとなく記号を挿入する設定が自然かなと思い、そのようになるコードを示しています。

    .entry-content a[href^="#"]:after{content:"\21C5";}
    #entry-tcont a[href^="#"]:after{content:"";}
  3. 上記コードを追加後のページ内移動用ハイパーリンクには、末尾に「⇅」が追加されます。他の記号に変更する際は次のページがヒントになります。

  4. 上記コードの1行目の.entry-content を削除すれば、記事部分だけでなくページ全体のページ内移動用ハイパーリンクに記号が挿入されます。

  5. 上記コードの2行目は、記事内自動生成もくじ内のハイパーリンク末尾に「⇅」が追加されないようにするコードです。

設定前後の表示例

  1. 設定のページ内移動用ハイパーリンクの画像です。

    121226link-to-the-same-page-1.png
  2. 設定のページ内移動用ハイパーリンクの画像です。地味な装飾が施されています。

    121226link-to-the-same-page-2.png

今後のテンプレート改訂時には

  1. 上記説明で述べた方法をデフォルトで採用するかもしれません。よって、改訂版ではこのページで述べた方法が不要であったり、相違がある可能性があります。

以上です。

関連記事
(この一行は、各記事の最後に固定表示するサンプルです。テンプレートを編集して削除もしくは非表示にしてください。)
スポンサードリンク
(この一行は、各ページ下部に固定表示するサンプルです。テンプレートを編集して削除もしくは非表示にしてください。)