こんにちは、すずしんです。
みんな大好きブログのカスタマイズ!
今回の記事で扱うのは、おすすめ記事のリンクを枠で囲うことで強調させるカスタマイズ方法です。
ここでやっている事は非常に単純なのですが…。
意外に効果が出るかもしれませんよ?
試してみる価値はあると思います。
リンクを強調して目立たせよう
通常、リンクを貼る時は以下のような感じになりますよね。
読書の秋!今後読みたいと思う、気になる小説本を紹介 - すずろぐ
まあこれでも悪くないかもしれませんが…。
ここでは、このリンクを枠で囲うという事をしてみます。
そうすることで、リンクが強調されますのでクリック率が上がる…かもしれませんよ。
読書の秋!今後読みたいと思う、気になる小説本を紹介 - すずろぐ
いかがでしょう?
通常よりもリンクが気になりませんか?
CSSの設定
ここでは、CSS設定のサンプルを載せておきます。
気に入ったデザインのコードをコピペしてください。
はてなブログの場合は、「デザイン」→「カスタマイズ」→「デザインCSS」の場所になります。
基本
読書の秋!今後読みたいと思う、気になる小説本を紹介 - すずろぐ
.entry-content .emphasized-link { border: 2px solid #df7704; background-color: #fcc382; padding: 8px 16px; }
この例では、オレンジっぽい感じの枠線となっていますが…。
枠の色はborderプロパティのカラーコード(#df7704)を、背景色はbackground-colorプロパティのカラーコード(#fcc382)を編集すれば変わります。
必要に応じて、あなた好みの色にしてくださいね。
色の見本は以下のサイトを参考にすると良いと思います。
両サイドが太い枠
読書の秋!今後読みたいと思う、気になる小説本を紹介 - すずろぐ
.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>
ひとこと
今回の記事では、リンクを枠で囲う事で強調させるカスタマイズについて書いてみました。
やっていることは「枠で囲う」だけという非常にシンプルなものなのですが…。
リンクが目立ちますので、クリックされやすくなるかもしれませんよ。
導入も簡単にできますので…。
もし良かったら、あなたのブログでも試してみてくださいね。
余談
おすすめ記事のリンクを貼ろうとしたときに、リンクタグを自分で手入力するのは面倒ですよね。
そんな時は、私のブックマークレット「PageLink」をぜひお使いください。
あっという間にリンクタグを作成できますよっ!
ページリンク作成ブックマークレットPageLinkを作成してみた! - すずろぐ