［アメーバブログ］ いいねボタンをカスタマイズ

アメブロの、
記事につくリンクボタンは、前から変わらないような、、、（すでにカスタマイズ後ですw）

アメブロ記事下のいいねボタン等

 

ここでは、
いいね、コメントする、リブログする

と、その下にある
“フォロー”ボタンをカスタマイズしてみました。

ボタンのカスタマイズ、
別にしなくてもいいんでは…?
と言われればそーなんですけど、思わずいじりたくなる部分の一つw

 

カスタマイズするタグに行き着くには、
該当する項目の上で右クリックし、

メニュー項目の中にある、
開発者ツールで調査するをクリックして探っていくという手順。

記事を開発者ツールで表示

ここで“いいね”ボタンなど…
ボタンに反応するタグを見つけていくわけです。一つだけでなく、二つくらい反応するタグが現れたり、、

たぶん、
どちらでもokなのかもしれません→ってアバウトなw

そんな感じで、
変えたい場所がどのタグなのかさえわかれば、あとはカスタマイズするのみ♪

 

ってことで以下のCSSを記述します。

CSS
/* いいねボタン */
button._3vorwv2B {
}

button._3vorwv2B,
button._3vorwv2B:visited,
button._3vorwv2B:hover,
button._3vorwv2B:active {
font-size: 12px; /* 文字サイズ */
color: #5c5951; /* 文字色 */
background-color: #bde2f8; /* ボタンの色 */
border-color: #bde2f8; /* ボタン外枠の色 */
border-radius: 10px; /* 角丸め半径 */
}

/* コメントするボタン */
a._2jjeqpvW {
}

a._2jjeqpvW,
a._2jjeqpvW:visited,
a._2jjeqpvW:hover,
a._2jjeqpvW:active {
font-size: 12px; /* 文字サイズ */
color: #5c5951; /* 文字色 */
background-color: #bde2f8; /* ボタンの色 */
border-color: #bde2f8; /* ボタン外枠の色 */
border-radius: 10px; /* 角丸め半径 */
}

/* リブログするボタン */
a.reblogEditBtn._2osjSJu0 {
}

a.reblogEditBtn._2osjSJu0,
a.reblogEditBtn._2osjSJu0:visited,
a.reblogEditBtn._2osjSJu0:hover,
a.reblogEditBtn._2osjSJu0:active {
font-size: 12px; /* 文字サイズ */
color: #5c5951; /* 文字色 */
background-color: #bde2f8; /* ボタンの色 */
border-color: #bde2f8; /* ボタンの外枠の線色 */
border-radius: 10px; /* 角丸め半径 */
}

/* フォローボタン箇所 */
a.skin-btnPrimary {
}

a.skin-btnPrimary,
a.skin-btnPrimary:visited,
a.skin-btnPrimary:hover,
a.skin-btnPrimary:active {
font-size: 12px; /* 文字サイズ */
color: #5c5951; /* 文字色 */
background-color: #bde2f8; /* ボタンの色 */
border-color: #bde2f8; /* ボタンの外枠の線色 */
border-radius: 10px; /* 角丸め半径 */
}

一応目に見える範囲のボタンはカスタマイズしたものの、リンクでどこかへ飛んだ際に、未指定のボタン出たりして、、、?笑）

コメント