かるみに

趣味とともに生きる

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

f:id:trrun:20170308203029p:plain

こんにちは。すーく(@sytry7)です。リンクを目立たせるシンプルなデザインカスタマイズを作りました。はてなブログ向けです。

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

コードを貼り付ける場所

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

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

完成予想図

f:id:trrun:20170308203235p:plain

使い方

f:id:trrun:20170308202833p:plain

はてなブログで記事を書くとき、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!」で強調するカスタマイズ

完成予想図

f:id:trrun:20170308203250p:plain

使い方

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>

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

完成予想図

f:id:trrun:20170308203210p:plain

使い方

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>

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

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