アメブロ新CSS：サイドバーのフォローボタンの表示テキストを変えるカスタマイズ方法

アメブロの新CSS編集用デザインで、サイドバーのフォローボタンに表示される「+フォロー」や「フォロー中」というテキストを別の表記に変えるカスタマイズ方法をご紹介します。

通常時とオンマウス時、さらに、既にフォロワーになっているユーザー向けの通常時とオンマウス時、それぞれに別々の文言を表示することができます。

カスタマイズは、CSSの編集で行いますので、やり方がわからない場合は先に確認しておいて下さい。

CSSを編集する手順：カスタマイズで必須の基本操作です！

CSS編集用デザインをベースにアメブロをカスタマイズするためにCSSを編集するときの手順について解説します。アメブロのカスタマイズ時には必須で頻繁に行う作業ですのでマスターしておくことをお勧めします。

1 コードをCSSに追加
2 コード説明を簡単に
3 おまけ：フォローボタン横の三点ボタンを隠す
4 まとめ

コードをCSSに追加

以下のようなコードをCSSの末尾に追加してください。

/************************************************
  新CSS：サイドバーのフォローボタンの表示テキストを変える
************************************************/
.skin-btnSidePrimary {
  position: relative;
  text-indent: -9999px;
}
.skin-btnSidePrimary:after {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-indent: 0;
}
/* 未フォローの閲覧者向け（通常時） */
.skin-btnSidePrimary:after {
  content: "フォロー歓迎！！";
}
/* 未フォローの閲覧者向け（オンマウス時） */
.skin-btnSidePrimary:hover:after {
  content: "うれしいです！！";
}
/* 既にフォロワーになっている閲覧者向け（通常時） */
.skin-btnSidePrimary:not(:has(svg)):after {
  content: "いつもありがとうございます";
}
/* 既にフォロワーになっている閲覧者向け（オンマウス時） */
.skin-btnSidePrimary:not(:has(svg)):hover:after {
  content: "残念です・・・";
}

コード説明を簡単に

もともと表示されている「＋フォロー」や「フォロー中」というテキストなどを見えないところへ移動させ、新たに閲覧者の状態に応じた内容を疑似要素:afterに設定して表示します。

既にフォローしているか？まだフォローしていないか？を、未フォローの閲覧者向けに「＋」を表示するために利用されているsvg要素の有無で判別しています。

そのため、もし仕様変更によってこのsvg要素が無くなってっしまうと、常にフォロワー向けの表示になってしまいます。

また、逆にフォロワー向けの表示にsvg要素が追加されると、常にまだフォロワーでない人向けの表示になってしまいます。

なので、できればこのあたりも考慮した文言にしておくのが良いかもしれません。

なお、テキストが長くなると改行せずに左右にはみ出した部分が隠れて見えなくなりますので、あまり長い文字列を設定するのはお勧めしません。

おまけ：フォローボタン横の三点ボタンを隠す

おまけで、フォローボタン横の三点ボタンを隠すCSSも書いておきます（これは隠さないほうが良い気はしますが）。

/************************************************
  新CSS：サイドバーのフォローボタン横の三点ボタンを隠す
************************************************/
p:has(.skin-btnSidePrimary) + div {
  display: none;
}

まとめ

以上、アメブロの新CSS編集用デザインで、サイドバーの「フォロー」ボタンに表示されるテキストを閲覧者の状態に応じて変更して表示するカスタマイズ方法（と、おまけ）をご紹介しました。

よかったら試してみてください。