プログラミング

3分でOK!HTMLとCSSで簡単な「おすすめマーク」の実装方法

投稿日:2019年3月8日 更新日:

読了時間: 約158

HTML

ブログで記事を書いていると、関連記事のリンクを貼ることがありますよね?
別に普通にリンクを貼っても良いのですが…。
もうひと工夫して、少しでも多くリンクを踏んでもらえるようにしたいところです。

そこで!
今回の記事では、HTMLCSSを使ったおすすめマークをデザインしてみます。
単純にリンクを貼るよりも目立ちますので…。
多少はアクセスアップに繋がるかもしれませんよ。

普通にリンクを貼るだけではあまり目立たない

あなたは、ブログで何かリンクを貼る際にどのようにしていますか?
普通なら、単純にリンクタグをそのまま貼っているでしょうね。
例えば、以下のような感じです。

スズシンラボ

リンクタグのデザインにもよりますが…。
基本的には、青文字下線が多いかと思います。

ところで、このリンクタグ。
果たして、実際にアクセスしてもらえているのでしょうか?

ウェブ上の記事というのは、基本的に読者は流し読みをしていることが多いです。
ザーッと記事を眺めていき、気になったところをよく読むという流れですかね。

上記のようなリンクタグを見て、「あっ、リンクがあるな!」と気づく方はどれくらいいるのでしょうかね。
最初からしっかりと読んでくれている読者の方なら気づくでしょうが…。
流し読みをしていると、果たして気づいてもらえているかどうか分かりませんよ?

リンクタグの前におすすめマークを付け加えてみる

そこで、ちょっとした提案です。
リンクタグの前に、ちょっと目立つようなデザインのおすすめマークを付け加えてみるのはどうでしょうか?

例えば、以下のような感じです。
いかがでしょうか?
何もしないただのリンクタグよりも目立つ感じがしませんか?
少なくとも「おっ!?」という感じにはなると思いますよ。

おすすめスズシンラボ

正確に言うと…。
おすすめマークにまず気づいて、その後にリンクタグに気づく流れですかね。
目がそこに止まることで、リンクタグの存在をアピールすることができます。

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

実は、おすすめマークの実装方法というのは非常に簡単なのです!
具体的には、ちょっとしたHTMLとCSSのコードを記述するだけ。
とてもシンプルですので、誰でもすぐに導入できます。
そして、なおかつカスタマイズもしやすいですよ。

ここでは、シンプルデザインのおすすめマークの実装方法を紹介します。
まずは、普通にリンクタグを貼りたいところに貼ります。

<a href="https://suzushinlab.com/">スズシンラボ</a>

そうしたら、リンクタグの前に以下のようなタグを追記します。
予想はつくと思いますが、「おすすめ」という文字列は自由に書き換えできます。

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

続いて、CSSの編集をします。
CSSの設定画面を開いて、以下の記述を追記します。

.recommend-mark {
  margin-right: 10px;
  padding: 5px;
  border: 1px solid #999999;
  background: #f2953e;
  color: #fefefe;
}

以上のように設定が終わると…。
さきほど、例として紹介したおすすめマークが表示されるはずです。

おすすめスズシンラボ

backgroundの値を変えると、おすすめマークの背景色を変更できます。
colorの値を変えると、文字色を変更できます。
お使いのブログのデザインに合わせて適宜調整してくださいね。
CSSの設定は、一度やっておけば後はそのままにしておけば良いです。

まとめ

今回の記事では、HTMLとCSSを使って、簡単な「おすすめマーク」を表示する方法について解説してみました。
いかがでしょうか?
原理が分かれば、非常に簡単に実装できますよね。

この機能の実装にかかる時間は、およそ3分ほどでしょうか。
簡単かつお手軽にできますので…。
ぜひあなたも「おすすめマーク」を使うようにしてみてはいかがでしょうか?

ちなみにですが…。
HTMLやCSSについてもう少し勉強したいという方は、個人的には以下の本がおすすめです。
ブログをやるからには、多少は知っておいたほうが何かと便利ですよ。

WordPress ブログ記事の読了時間の目安を表示させる方法

  • この記事を書いた人
  • 最新記事
アバター

鈴木俊吾(すずしん)

フリーランスのブロガー。

大卒後、公務員浪人になるも受験失敗。無職になり、長きにわたるニート期間を経験。その後、一念発起してフリーランスに転身。経験無し、コネ無し、実績無しでどこまでできるか挑戦中。未来日記を書いて、人生がどのように変化するのかを検証している。

私の欲しいものリスト

-プログラミング
-, , , ,

Copyright© スズシンラボ , 2019 All Rights Reserved.