目次

【アメブロカスタマイズ】サイドバーのボタンの大きさや色を変える方法

「新CSS編集用デザイン」向けです

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

初期状態では、「フォロー」ボタンは濃いグレーで変に目立ちすぎで、「一覧を見る」はボタンなのかどうかもわかりにくいように思います。

これらの大きさや色を変えたいと思われる方は、少なからずいるのではないでしょうか。

そこで当記事では、これらのボタンを好みの大きさや色に変えるやり方をご紹介したいと思います。

CSSの編集をしますので、やり方がわからない場合は先にチェックしておいて下さい。

CSSを編集してアメブロをカスタマイズをする手順
アメブロをカスタマイズするための専用のデザイン「CSS編集用デザイン」に用意されている「ブログデザインCSS」を編集してアメブロをカスタマイズする手順について説明します。

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

まず、「フォロー」ボタンの大きさや色を変えてみます。

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

/* サイドバーのフォローボタン */
.skin-btnSidePrimary, .skin-btnSidePrimary:visited, .skin-btnSidePrimary:hover {
  width: 180px; /* ボタンの幅 */
  height: 45px; /* ボタンの高さ */
  line-height: 45px; /* 行の高さ＝ボタンの高さ */
  font-size: 14px; /* 文字サイズ */
  color: #fffff; /* 文字色 */
  background-color: #660000; /* ボタンの色 */
  border-color: #000000; /* ボタンの外枠の線色 */
  border-radius: 5px; /* 角丸め半径 */
}

このままCSSに追加するとフォローボタンが記事冒頭の画像のような見た目に変わりますが、設定値はあくまでも一例ですので、各行の注釈コメント(「／＊」と「＊／」に挟まれた部分)を参考に、好みの大きさや色に変えてみて下さい。

ちなみに、プロフィール欄のフォローボタンだけを対象にしたい場合は以下のように、

/* サイドバーのフォローボタン */
#profile .skin-btnSidePrimary, #profile .skin-btnSidePrimary:visited, #profile .skin-btnSidePrimary:hover {
  width: 180px; /* ボタンの幅 */
  height: 45px; /* ボタンの高さ */
  line-height: 45px; /* 行の高さ＝ボタンの高さ */
  font-size: 14px; /* 文字サイズ */
  color: #fffff; /* 文字色 */
  background-color: #660000; /* ボタンの色 */
  border-color: #000000; /* ボタンの外枠の線色 */
  border-radius: 5px; /* 角丸め半径 */
}

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

/* サイドバーのフォローボタン */
#readers .skin-btnSidePrimary, #readers .skin-btnSidePrimary:visited, #readers .skin-btnSidePrimary:hover {
  width: 180px; /* ボタンの幅 */
  height: 45px; /* ボタンの高さ */
  line-height: 45px; /* 行の高さ＝ボタンの高さ */
  font-size: 14px; /* 文字サイズ */
  color: #fffff; /* 文字色 */
  background-color: #660000; /* ボタンの色 */
  border-color: #000000; /* ボタンの外枠の線色 */
  border-radius: 5px; /* 角丸め半径 */
}

サイドバーの「一覧を見る」ボタンの大きさや色を変える

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

以下のようなコードをCSSの末尾に追加すればできます。

/* サイドバーの「一覧を見る」ボタン */
.skin-btnSide, .skin-btnSide:visited, .skin-btnSide:hover {
  width: 180px; /* ボタンの幅 */
  height: 45px; /* ボタンの高さ */
  line-height: 45px; /* 行の高さ＝ボタンの高さ */
  font-size: 14px; /* 文字サイズ */
  color: #660000; /* 文字色 */
  background-color: #ffe5e5; /* ボタンの色 */
  border-color: #660000; /* ボタンの外枠の線色 */
  border-radius: 5px; /* 角丸め半径 */
}

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

まとめ

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

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

(準備中)
(準備中)