おすすめ記事のリンクを枠で囲うことで強調するカスタマイズ方法

ブログカスタマイズ

こんにちは、すずしんです。

みんな大好きブログのカスタマイズ！
今回の記事で扱うのは、おすすめ記事のリンクを枠で囲うことで強調させるカスタマイズ方法です。

ここでやっている事は非常に単純なのですが…。
意外に効果が出るかもしれませんよ？
試してみる価値はあると思います。

リンクを強調して目立たせよう

通常、リンクを貼る時は以下のような感じになりますよね。

読書の秋！今後読みたいと思う、気になる小説本を紹介 - すずろぐ

まあこれでも悪くないかもしれませんが…。
ここでは、このリンクを枠で囲うという事をしてみます。
そうすることで、リンクが強調されますのでクリック率が上がる…かもしれませんよ。

読書の秋！今後読みたいと思う、気になる小説本を紹介 - すずろぐ

いかがでしょう？
通常よりもリンクが気になりませんか？

CSSの設定

ここでは、CSS設定のサンプルを載せておきます。
気に入ったデザインのコードをコピペしてください。
はてなブログの場合は、「デザイン」→「カスタマイズ」→「デザインCSS」の場所になります。

基本

読書の秋！今後読みたいと思う、気になる小説本を紹介 - すずろぐ

.entry-content .emphasized-link {
  border: 2px solid #df7704;
  background-color: #fcc382;
  padding: 8px 16px;
}

この例では、オレンジっぽい感じの枠線となっていますが…。
枠の色はborderプロパティのカラーコード(#df7704)を、背景色はbackground-colorプロパティのカラーコード(#fcc382)を編集すれば変わります。
必要に応じて、あなた好みの色にしてくださいね。

色の見本は以下のサイトを参考にすると良いと思います。

www.color-sample.com

両サイドが太い枠

読書の秋！今後読みたいと思う、気になる小説本を紹介 - すずろぐ

.entry-content .emphasized-link {
  border: 2px solid #df7704;
  border-left: 8px solid #df7704;
  border-right: 8px solid #df7704;
  background-color: #fcc382;
  padding: 8px 16px;
}

枠が破線

読書の秋！今後読みたいと思う、気になる小説本を紹介 - すずろぐ

.entry-content .emphasized-link {
  border: 2px dashed #df7704;
  background-color: #fcc382;
  padding: 8px 16px;
}

影を付けるだけ

読書の秋！今後読みたいと思う、気になる小説本を紹介 - すずろぐ

.entry-content .emphasized-link {
  border: 1px solid #999999;
  padding: 8px 16px;
  box-shadow: 0 3px 3px rgba(0,0,0,0.5);
}

HTMLの設定

CSSの設定ができたら、いよいよ実際に記事で使ってみましょう。

強調したいリンクをpタグで囲います。
そして、そのpタグのclassに「emphasized-link」を指定します。
やることはこれだけなので簡単ですね！

<p class="emphasized-link"><a href="http://www.suzushin7.jp/entry/2017/10/10/novels-that-i-want-to-read-later" title="読書の秋！今後読みたいと思う、気になる小説本を紹介 - すずろぐ" target="_blank">読書の秋！今後読みたいと思う、気になる小説本を紹介 - すずろぐ</a></p>