目次

【アメブロカスタマイズ】サイドバーの「フォロー」ボタン等を画像ボタンにする方法

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

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

ボタンを画像を使ってより分かりやすいものに変更することで、アメブロの訪問者にフォローを促す効果などが期待できるかもしれません。

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

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

サイドバーのボタンを画像ボタンに変える

それでは、以下、手順を説明していきます。

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

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

サイズは基本的に自由ですが、新CSS編集用デザインのサイドバーは、広い方が300px、狭い方が200pxですので、この大きさを最大サイズと考えて大きすぎる場合は縮小しておくのが良いと思います。

フォローボタンの画像は、こちらのサイトで「フォローボタン」と検索すると無料で使える画像がたくさん見つかりましたが、もちろん自作しても構いません。

画像をアップロードして画像のURLを取得する

画像が用意できたらアメブロにアップロードして、アップロードした画像のURLを取得して下さい。

もし、やり方がわからない場合はこちらの記事をご参照下さい。

アメブロのカスタマイズに使う画像のアップロード方法と画像のURLの取得方法
アメブロのカスタマイズに利用する画像はアメブロにアップロードして使いますが、そのアップロード方法と、アップロードした画像をCSS等から呼び出すのに必要なの画像のURLの取得方法についてまとめます。

取得した画像のURLは、このあとで使いますので、メモ帳などに貼り付けてわかるようにしておいて下さい。

CSSを編集してボタンに画像を設定する

次はCSSの編集ですが、対象とするボタンによって少しずつ異なりますので、該当するコードをCSSの末尾に追加して下さい。

なお、何れの場合も、追加したコードを、

  • 【ボタンにする画像のURL】をアップロードした画像のURLに変更
  • 【ボタンの横幅】をボタンの横幅（ピクセル数）に変更（例：300px）
  • 【ボタンの高さ】をボタンの高さ（ピクセル数）に変更（例：240px）

のように修正して下さい。

「プロフィール」の「フォロー」ボタン

#profile .skin-btnSidePrimary {
  text-indent: -9999px;
  max-width: none;
  border: 0 none;
  background: no-repeat 0 0;
  background-image: url(【ボタンにする画像のURL】);
  width: 【ボタンの横幅】;
  height: 【ボタンの高さ】;
}

「このブログのフォロワー」の「フォロー」ボタン

#readers .skin-btnSidePrimary {
  text-indent: -9999px;
  max-width: none;
  border: 0 none;
  background: no-repeat 0 0;
  background-image: url(【ボタンにする画像のURL】);
  width: 【ボタンの横幅】;
  height: 【ボタンの高さ】;
}

「一覧を見る」ボタン

.skin-btnSide {
  text-indent: -9999px;
  max-width: none;
  border: 0 none;
  background: no-repeat 0 0;
  background-image: url(【ボタンにする画像のURL】);
  width: 【ボタンの横幅】;
  height: 【ボタンの高さ】;
}

問題なくCSSの編集ができれば、これで対象のボタンが画像で表示されると思います。

まとめ

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

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

(準備中)
(準備中)