記事中のテキストリンク手前に見出しのようなラベルをつけてみる

コンテンツの文中にテキストリンクを挿入するとき前後の文面が不自然にならないよう工夫することがあります。

こんなとき、ユーザーにとって利便性が高いページへのリンクは文面によらずもっと簡単かつ自然に設置できないかと悩むときがないでしょうか。

この少しのモヤモヤを解決するため内部リンク用に見出し状のラベルを作ってみました。

目次非表示

テキストリンク用ラベルの作成
テキストリンクに入れるアイコン
おすすめ記事へもラベルを付ける

テキストリンク用ラベルの作成

今回作成したのは記事中に突如別ページのタイトルが出現することの不自然さを回避するためリンクの1行手前に表示させるための装飾が付いた短いテキストです。

使用例はこのような感じ

当サイトの人気記事

作成したWebページに更新日を表示させる記述

同じ記事中のリンクに関するきじですが、前後に補足がないとやっぱり不自然なのでラベルを表示することで「参考ページへのリンク」だと分かるようになります。

スタイルシートとHTMLはの記述は次の通りです。

CSS

.plink{
  display: inline-block;
  font-size: 0.9em;
  color: #FFFF;/*文字色*/
  background-color: #4f96f6;
  padding: 0.2em 1.5em 0em;
  border-radius: 0.5em;
  margin-bottom: 1.0em!important;/*下の空きを小さくする*/
}
.plink:before {
  font-family: "Font Awesome 5 Free";
  content: "\f0c1";
  position: relative;
  left: -0.5em;
  color: #ffff; 
  font-weight: 900;
}

HTML

<p class="plink">内部リンク用のラベル</p>

サンプルのHTMLで次の通り表示できます。

内部リンク用のラベル

hタグを使うまでもないけど簡易的なラベルを表示したいときに使えそうです。

テキストリンクに入れるアイコン

続いて、テキストリンク本体も一般によく見かける頭に「参照：」と付けるよりFontAwesomeなどのアイコンを使うと関連リンクとして素早く認識していただけそうです。

文字の先頭に表示したいアイコンの設置は次の通りスタイルシートに追記します。

CSS

.arrow:before {
    content: "\f138";
    font-family: "Font Awesome 5 Free";
    font-weight: bold;
    color:#4f96f6;
    margin-right:9px;
}

HTML

<p class="arrow"><a href="https://expression.danman.jp/">トップページへのリンク</a></p>

サンプルコードの表示は次の通りになります。

トップページへのリンク

おすすめ記事へもラベルを付ける

記事中のテキストリンクの他にも、コンテンツ下に表示する関連記事もテーマが自動で表示する関連記事の他に特にピックアップしたい投稿ページというのがあります。

この手の内部リンク用にブログガードを置くときも唐突さを感じさせないよう見出しのようなものを設置したいところです。

テキストリンクと同じでも良いのですが、記事下のブログカード用にも次の通り作成してみました。

css


.clink{
  display: inline-block;
  font-size: 0.9em;
  color: #FFFF;
  background-color: #F89174;
  border: solid 2px #FF9966;
  padding: 0.2em 1.5em 0em;
  border-radius: 0.5em;
  margin-bottom: 0.1em!important;
}
.clink:before {
  font-family: "Font Awesome 5 Free";
  content: "\f024";
  position: relative;
  left: -0.5em;
  color: #ffff; 
  font-weight: 900;
}

HTML