テキストリンクの前後におすすめマークを追加表示する方法

読了時間: 約2
HTML

こんにちは、鈴木俊吾(@suzushin7)です。

ブログを運営していると、テキストリンクを貼る機会というのは多いと思います。
ただ、テキストリンクって、あまり目立ちませんよね…。
どうにかして、もっと目立たせる方法はないだろうか?

そう思った私は、テキストリンクの前または後ろに「おすすめマーク」なるものを追加表示してみることにしてみました。
すると、そこにテキストリンクがあるということが、以前よりも分かりやすくなりました。
その影響で、もしかするとクリック率も上がるかもしれませんよ。

今回の記事では、おすすめマークの実装方法について解説してみます。
所要時間は5分もあれば大丈夫。
コピペだけでできますので、誰でも簡単に実装可能ですよ。
ぜひ肩の力を抜いて先をお読みください。

スポンサーリンク

おすすめマークとは?

おすすめマークというのは、テキストリンクの前または後ろにあるマークのことです。
よくあるパターンとしては、「おすすめ」「イチオシ」「Recommend」「HOT」などと表示されています。
あなたも他のブログ記事を読んでいる時に見かけたことがありませんか?

このおすすめマークがあることで、単純にテキストリンクのみの場合と比べると目立ちます。
そして、ブログ管理人が「おすすめしているよ」という意思表示にもなります。

読者の注意を集めることができますので…。
リンク先が気になった人は、クリックしてくれるかもしれませんよね?

おすすめマークの実装方法(CSS)

おすすめマークは、基本的にHTMLとCSSのみで実現します。

まずは、CSSの設定をしていきましょう。
あなたがお使いのブログのCSS設定画面を表示します。
そして、以下のコードをコピペして追記しましょう。

 .recommend-mark {
  padding: 2px;
  margin-right: 5px;
  border: 1px solid #e9546b;
  background-color: #ffdddd;
  color: #e9546b;
  font-weight: bold;
}

もちろん、これは見た目の設定だけですので…。
CSSが分かる方は、お好きなようにカスタマイズしても構いませんよ。

おすすめマークの実装方法(HTML)

続いて、HTMLの書き方について見ていきます。

実は簡単で、おすすめマークを表示したい場所に以下のコードを追記するだけ。
「おすすめ」の部分を書き換えれば、好きな文字に変更できます。

<span class="recommend-mark">おすすめ</span>

実際の表示例は、以下のような感じになります。
いかがでしょうか?
単純にテキストリンクのみの場合と比べると目立ちますよね。

おすすめスズシンラボ

ひとこと

今回の記事では、テキストリンクの前後におすすめマークを追加表示する方法について解説してみました。
実際にやってみると分かりますが、実装自体はすごく簡単です。
5分もあれば十分ですよね。

HTMLとCSSのみの、手軽にできるカスタマイズですので…。
もし興味を持たれた方は、おすすめマーク機能を追加してみてはいかがでしょうか?

(Today: 1 PV, Total: 13 PV)

スポンサーリンク