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

この記事は約3分で読めます。
スポンサーリンク

おすすめマーク

こんにちは、鈴木俊吾です。

他の方のブログ記事を見ていると…。
テキストリンクの前もしくは後ろに「おすすめマーク」があることがあります。

この「おすすめマーク」があると、ブログの運営者が推しているテキストリンクが分かります。
複数のテキストリンクがある時に「おすすめマーク」があると分かりやすくて特に良いですね。
おすすめされていると、何となく気になってクリックしたくなりませんか?

実は、この「おすすめマーク」。
実装しようと思えば、意外とすんなりとできます。
HTMLとCSSを使って実現することができるのですよね。

そこで、今回の記事では…。
HTMLとCSSを使って、テキストリンクの前後に「おすすめマーク」を付ける方法について解説します。
比較的簡単にできますので、ぜひあなたも試してみてくださいね。

おすすめマークとは?

「おすすめマーク」というのは、テキストリンクの前や後ろにある「おすすめ」という言葉が書かれたマークのことを指しています。
具体的には、以下のような感じです。

スズシンラボ おすすめ

「おすすめマーク」があると、単にテキストリンクがあるだけの場合と比べてよく目立ちます。
そして、著者が推しているという意思表示にもなります。

上記の例では、表示しているテキストリンクは1つだけなのですが…。
テキストリンクが複数並べてある場合に、「おすすめマーク」は特に効果を発揮します。

おすすめマークの実装方法

「おすすめマーク」の実装方法というのは、実はすごく簡単なのです!
HTMLとCSSでチャチャッと実装できます。

CSSの設定

やり方としては、まずCSSの設定を行います。
お使いのブログのCSSの設定画面を開きます。
そして、以下のようなCSSを追記します。

.recommend-mark {
  padding: 2px;
  color: #ed5b45;
  border: 2px solid #ed5b45;
  background-color: #f0beb6;
}

おすすめマークのマークアップ

CSSの設定ができれば、後は簡単です。
テキストリンクを貼る際に、以下のHTMLを表示したい場所に追記するだけ。

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

補足

この例では、「おすすめマーク」の色は赤っぽい感じになっていますが…。
「おすすめマーク」の色を変えたい場合には、CSSのcolor/border/background-colorの値を変更してください。

「おすすめマーク」の文字の内容を変えたい場合には、追記したHTMLのspanタグの中身の文字列を変更するだけです。
例えば、「おすすめ」から「Recommend」に変えたければ、以下のようにします。
簡単ですね!

<span class="recommend-mark">Recommend</span>

ひとこと

今回の記事では、テキストリンクの前後におすすめマークを表示させる方法について解説しました。
いかがでしょうか?
非常に簡単に実現できるということが分かりましたね。

もしあなたがブログを運営していて…。
「テキストリンクを目立たせたい」「おすすめしているということを知らせたい」なんていう時には…。
今回の「おすすめマーク」をぜひお使いください。
きっとお役にたてると思いますよ。

コメント

タイトルとURLをコピーしました