【コピペで楽々】どんなサイトにも馴染むシンプルなリンク強調ボタンカスタマイズ

リンクを目立たせるシンプルなデザインカスタマイズを作りました。はてなブログ向けです。

どんなブログに違和感なく溶け込むと思います。何かありましたらご連絡ください。

コードを貼り付ける場所

PCページ、スマートフォンページ両方とも「記事」→「記事上or記事下」に貼り付けてください。

リンクの前を「Point!」で強調するカスタマイズ

完成予想図

使い方

はてなブログで記事を書くとき、HTML編集でリンク部分を「class="emphasize-point"」で囲んでください。

<p class="emphasize-point"><a href="#">リンク</a></p>

貼り付けるCSS

<style>
 .emphasize-point a{
  color:black;
  text-decoration:underline;
}
.emphasize-point a:before{
  display:inline-block;
  content:"Point!";
  letter-spacing:0.05em;
  color:white;
  background-color:rgba(80,81,79,1);
  padding:0 12px;
  margin-right:8px;
}
.emphasize-point a:after{
    display:inline-block;
    margin-left:3px;
    font-family:"blogicon";
    content:"\f009"
}
</style>

 リンクの前を「Check!」で強調するカスタマイズ

完成予想図

使い方

HTML編集にてリンクを「class="emphasize-check"」で囲んでください。

<p class="emphasize-check"><a href="#">リンク</a></p>

貼り付けるCSS

<style>
 .emphasize-check a{
  color:black;
  text-decoration:underline;
}
.emphasize-check a:before{
  display:inline-block;
  content:"Check!";
  color:white;
  background-color:rgba(80,81,79,1);
  padding:0 8px;
  margin-right:8px;
}
.emphasize-check a:after{
    display:inline-block;
    margin-left:3px;
    font-family:"blogicon";
    content:"\f009"
}
</style>

 リンクの前を「関連」で強調するカスタマイズ

完成予想図

使い方

HTML編集にてリンクを「class="emphasize-kanren"」で囲んでください。

<p class="emphasize-kanren"><a href="#">リンク</a></p>

貼り付けるCSS

<style>
 .emphasize-kanren a{
  color:black;
  text-decoration:underline;
}
.emphasize-kanren a:before{
  display:inline-block;
  content:"関連";
  color:white;
  background-color:rgba(80,81,79,1);
  padding:0 8px;
  margin-right:8px;
}
.emphasize-kanren a:after{
    display:inline-block;
    margin-left:3px;
    font-family:"blogicon";
    content:"\f009"
}
</style>

過去に作ったカスタマイズはこちらをどうぞ

今まで作成したはてなブログカスタマイズ一覧