アメブロのサイドバーの「フォロー」や「一覧を見る」ボタンの大きさや色を変えるカスタマイズ方法(新CSS)

新CSS編集用デザイン向けの方法です。

アメブロの新CSS編集用デザインで、サイドバーの「フォロー」ボタンや「一覧を見る」ボタンの、大きさや色を変えるカスタマイズ方法です。

ボタンの大きさを調整したり、初期状態の濃いグレーの「フォロー」ボタンや、控えめで存在感の薄い「一覧を見る」ボタンを、ブログのデザインに合わせた色にカスタマイズできます。

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

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

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

1 「フォロー」ボタンの大きさや色を変える
2 「一覧を見る」ボタンの大きさや色を変える
3 まとめ

「フォロー」ボタンの大きさや色を変える

まず、「フォロー」ボタンの大きさや色を変える方法です。

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

/************************************************
  新CSS：サイドバーのフォローボタンのサイズ・色
************************************************/
.skin-btnSidePrimary, .skin-btnSidePrimary:visited, .skin-btnSidePrimary:hover {
  width: 220px; /* ボタンの幅 */
  height: 50px; /* ボタンの高さ */
  line-height: 50px; /* 行の高さ＝ボタンの高さ */
  font-size: 14px; /* 文字サイズ */
  color: #ffffff; /* 文字色 */
  background-color: #3366cc; /* ボタンの色 */
  border-color: #000099; /* ボタンの外枠の線色 */
  border-radius: 5px; /* 角丸め半径 */
}

このままCSSに追加すると、フォローボタンは、当記事の冒頭の画像のような（青くて角に少し丸みのある）見た目に変わります。

設定値はあくまでも一例ですので、コード内のコメント(/*と*/に挟まれた部分)を参考に、好みの大きさや色に変えてみて下さい。

なお、上記のコードでは、サイドバーに2つある「フォロー」ボタンが両方ともカスタマイズ対象となります。

もし、プロフィール欄のフォローボタンだけを対象にしたい場合は、代わりに以下のようなコードを使います。

/************************************************
  新CSS：プロフィール欄のフォローボタンのサイズ・色
************************************************/
#profile .skin-btnSidePrimary, #profile .skin-btnSidePrimary:visited, #profile .skin-btnSidePrimary:hover {
  width: 220px; /* ボタンの幅 */
  height: 50px; /* ボタンの高さ */
  line-height: 50px; /* 行の高さ＝ボタンの高さ */
  font-size: 14px; /* 文字サイズ */
  color: #ffffff; /* 文字色 */
  background-color: #3366cc; /* ボタンの色 */
  border-color: #000099; /* ボタンの外枠の線色 */
  border-radius: 5px; /* 角丸め半径 */
}

また、「このブログのフォロワー」欄のフォローボタンだけを対象にしたい場合は以下のようになります。

/************************************************
  新CSS：フォロワー欄のフォローボタンのサイズ・色
************************************************/
#readers .skin-btnSidePrimary, #readers .skin-btnSidePrimary:visited, #readers .skin-btnSidePrimary:hover {
  width: 220px; /* ボタンの幅 */
  height: 50px; /* ボタンの高さ */
  line-height: 50px; /* 行の高さ＝ボタンの高さ */
  font-size: 14px; /* 文字サイズ */
  color: #ffffff; /* 文字色 */
  background-color: #3366cc; /* ボタンの色 */
  border-color: #000099; /* ボタンの外枠の線色 */
  border-radius: 5px; /* 角丸め半径 */
}

コードの追加と修正ができたら、保存して表示確認します。

「一覧を見る」ボタンの大きさや色を変える

次は、「一覧を見る」ボタンの大きさや色を変える方法です。

以下のようなコードをCSSの末尾に追加します。

/************************************************
  新CSS：サイドバーの一覧を見るボタンのサイズ・色
************************************************/
.skin-btnSide, .skin-btnSide:visited, .skin-btnSide:hover {
  width: 220px; /* ボタンの幅 */
  height: 50px; /* ボタンの高さ */
  line-height: 50px; /* 行の高さ＝ボタンの高さ */
  font-size: 14px; /* 文字サイズ */
  color: #3366cc; /* 文字色 */
  background-color: #f0f0ff; /* ボタンの色 */
  border-color: #000099; /* ボタンの外枠の線色 */
  border-radius: 5px; /* 角丸め半径 */
}

こちらも、このままCSSに追加すると「一覧を見る」ボタンが上の画像のような（薄い青色の背景に濃い青色の）見た目に変わりますが、やはり一例ですので、各行の注釈コメント(/*と*/に挟まれた部分)を参考に、好みの大きさや色に変えてみて下さい。

もしサイドバーが２つある場合は、幅広のサイドバーと細いサイドバーを別々に指定できます。

幅広のサイドバーにある一覧を見るボタンのみを対象にする場合は、次のコードを使います。

/************************************************
  新CSS：サイドバー(広)の一覧を見るボタンのサイズ・色
************************************************/
.skin-blogSubA .skin-btnSide, .skin-blogSubA .skin-btnSide:visited, .skin-blogSubA .skin-btnSide:hover {
  width: 220px; /* ボタンの幅 */
  height: 50px; /* ボタンの高さ */
  line-height: 50px; /* 行の高さ＝ボタンの高さ */
  font-size: 14px; /* 文字サイズ */
  color: #3366cc; /* 文字色 */
  background-color: #f0f0ff; /* ボタンの色 */
  border-color: #000099; /* ボタンの外枠の線色 */
  border-radius: 5px; /* 角丸め半径 */
}

細いのサイドバーにある一覧を見るボタンのみを対象にする場合は、次のコードを使って下さい。

/************************************************
  新CSS：サイドバー(細)の一覧を見るボタンのサイズ・色
************************************************/
.skin-blogSubB .skin-btnSide, .skin-blogSubB .skin-btnSide:visited, .skin-blogSubB .skin-btnSide:hover {
  width: 200px; /* ボタンの幅 */
  height: 50px; /* ボタンの高さ */
  line-height: 50px; /* 行の高さ＝ボタンの高さ */
  font-size: 14px; /* 文字サイズ */
  color: #3366cc; /* 文字色 */
  background-color: #f0f0ff; /* ボタンの色 */
  border-color: #000099; /* ボタンの外枠の線色 */
  border-radius: 5px; /* 角丸め半径 */
}

こちらもコードの追加と修正ができたら、保存して表示確認して完了です。

まとめ

以上、新CSS編集用デザインで、サイドバーの「フォロー」ボタンや「一覧を見る」ボタンの、大きさや色を変えるカスタマイズ方法をご紹介しました。

手順は一般的なCSSの編集によるもので、以下のとおりです。

CSSに必要なコードをコピペで追加する
好みに応じて色などを変更する
保存して表示を確認する

特に「フォロー」ボタンはアメブロではとても重要なボタンですので、よろしければ、記事を参考にうまくカスタマイズしてみて下さい。