サイドバーの「フォロー」や「一覧を見る」ボタンを画像ボタンにする方法(新CSS)

アメブロの新CSS編集用デザインで、サイドバーにある「フォロー」ボタンや「一覧を見る」ボタンを、画像を使ったボタンに変更するカスタマイズ方法です。

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

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

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

ボタンにする画像を用意する

まず、ボタンとして表示したい画像を用意します。

サイズは基本的に自由ですが、新CSS編集用デザインのサイドバーのボタンは、幅広のサイドバーにある方は幅が220px、細いサイドバーにある方は、フォローボタンの幅が120pxで一覧を見るボタンの幅が200px、高さは何れも50pxですので、この大きさを参考に決めると良いと思います。

特に、幅は合わせておいたほうがうまく収まりやすいです。

画像が決まったら、アメブロにアップロードして画像のURLを取得しておいて下さい。

カスタマイズに使う画像のアップロード方法と画像のURLの取得方法

アメブロで画像を使ったカスタマイズをする場合に必要な、カスタマイズで使用する画像をアメブロにアップロードする方法と、アップロードした画像をCSSなどから呼び出すために必要な画像のURLを取得する方法について解説します。

「フォロー」ボタンを画像ボタンに変える

「フォロー」ボタンを画像ボタンに変えるには、以下のようなコードをCSSの末尾に追加します。

/************************************************
  新CSS：サイドバーのフォローボタンを画像に
************************************************/
.skin-btnSidePrimary {
  text-indent: -9999px;
  max-width: none;
  border: 0 none;
  background: transparent no-repeat center/contain;
  background-image: url("ボタン用画像のURL");
  width: 220px; /* ボタンの幅 */
  height: 80px; /* ボタンの高さ */
}

「ボタン用画像のURL」の部分には、ボタンにする画像としてアメブロにアップロードした画像のURLを入力します。

また、使用する画像に合わせて幅と高さも設定して下さい。

なお、プロフィール欄のフォローボタンと「このブログのフォロワー」欄のフォローボタンで設定を分けたい場合は、以下のようなコードを使います。

/************************************************
  新CSS：サイドバーのプロフィールのフォローボタンを画像に
************************************************/
#profile .skin-btnSidePrimary {
  text-indent: -9999px;
  max-width: none;
  border: 0 none;
  background: transparent no-repeat center/contain;
  background-image: url("ボタン用画像のURL");
  width: 220px; /* ボタンの幅 */
  height: 80px; /* ボタンの高さ */
}
/************************************************
  新CSS：サイドバーの「このブログのフォロワー」のフォローボタンを画像に
************************************************/
#readers .skin-btnSidePrimary {
  text-indent: -9999px;
  max-width: none;
  border: 0 none;
  background: transparent no-repeat center/contain;
  background-image: url("ボタン用画像のURL");
  width: 220px; /* ボタンの幅 */
  height: 80px; /* ボタンの高さ */
}

「一覧を見る」ボタンを画像ボタンにする

次は、「一覧を見る」ボタンです。

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

/************************************************
  新CSS：サイドバーの「一覧を見る」ボタンを画像に
************************************************/
.skin-btnSide {
  text-indent: -9999px;
  max-width: none;
  border: 0 none;
  background: transparent no-repeat center/contain;
  background-image: url("ボタン用画像のURL");
  width: 220px; /* ボタンの幅 */
  height: 80px; /* ボタンの高さ */
}

やはり「ボタン用画像のURL」の部分にアメブロにアップロードした画像のURLを入力し、使用する画像に合わせて幅と高さも設定して下さい。

なお、幅広のサイドバーにあるボタンと細いサイドバーにあるボタンで設定を分けたい場合は、以下のようなコードを使います。

/************************************************
  新CSS：幅広のサイドバーの「一覧を見る」ボタンを画像に
************************************************/
.skin-blogSubA .skin-btnSide {
  text-indent: -9999px;
  max-width: none;
  border: 0 none;
  background: transparent no-repeat center/contain;
  background-image: url("ボタン用画像のURL");
  width: 220px; /* ボタンの幅 */
  height: 80px; /* ボタンの高さ */
}
/************************************************
  新CSS：細いサイドバーの「一覧を見る」ボタンを画像に
************************************************/
.skin-blogSubB .skin-btnSide {
  text-indent: -9999px;
  max-width: none;
  border: 0 none;
  background: transparent no-repeat center/contain;
  background-image: url("ボタン用画像のURL");
  width: 220px; /* ボタンの幅 */
  height: 80px; /* ボタンの高さ */
}

まとめ

以上、新CSS編集用デザインのアメブロのサイドバーにある「フォロー」ボタンや「一覧を見る」ボタンを、好みの画像を使ったボタンにカスタマイズする方法をご紹介しました。

まとめると、以下の手順になります。

1. ボタン用画像をアップロードしてURLを取得する
2. CSSに必要なコードをコピペで追加する
3. 画像のURLとボタンの大きさを設定する
4. 保存して表示を確認する

よかったら参考にして下さい。