アメブロのサイドバーの「読者になる」ボタンを画像ボタンに変える方法

新タイプCSS編集用デザインのサイドバーにある「読者になる」ボタンを、画像を使ったボタンに変えるカスタマイズ方法です。

「読者になる」ボタンの外見をより分かりやすいものに変更すると、アメブロの訪問者に読者登録してもらいやすくなるかもしれません。

そこで、当記事では、この「読者になる」ボタンを、お好みの画像を使った読者登録ボタンにカスタマイズする方法をご紹介します。

サイドバーの「読者になる」ボタンを画像ボタンに変える

それでは、以下に手順をご紹介します。

ボタンにする画像を画像フォルダにアップロードしてURLを取得する

まず、画像フォルダにボタンとして表示したい画像をアップロードして、アップロードした画像のURLを取得しましょう。

新タイプ(第二世代)のCSS編集用デザインのサイドバーは、広い方が300px、狭い方が200pxですので、もし画像が大きい場合は、これを目安に事前に縮小してからアップロードされると良いと思います。

画像のアップロードと画像のURLの取得方法について詳しくはこちらの記事を参考にしてください。

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

CSSを編集して「読者になる」ボタンに画像を設定する

画像をアップロードして、その画像のURLを取得できたら、そのURLを使って「読者になる」ボタンに画像を設定します。

カスタマイズは、ブログデザインCSSの編集で行いますので、もし、CSSの編集の仕方がわからない場合は先にチェックしておいて下さい。

なお、サイドバーの「読者になる」ボタンは、「プロフィール」と「このブログの読者」にそれぞれ1つずつありますので、今回は、それらを個別に設定するコードをご紹介したいと思います。

目的に応じて、該当する方(若しくは両方)を使って、カスタマイズしましょう。

「プロフィール」の方の「読者になる」ボタンを画像ボタンにするコード

「このブログの読者」の方の「読者になる」ボタンを画像ボタンにするコード

手順

上記のコードを使って、以下の手順でアメブロのブログデザインCSSを編集してみて下さい。

  1. 上記コード(必要な方)をコピー
  2. ブログデザインCSSを開いて末尾に貼り付ける
  3. 「【ボタンにする画像のURL】」の部分を、上で取得した画像のURLに変更する
  4. 「【ボタンの横幅】」「【ボタンの高さ】」の部分を、表示したいボタンの画像の横幅と高さに変更する(例:300px)
  5. 表示を確認する(プレビュー)
  6. 編集内容を保存する
  7. ブログを開いて確認する

うまく編集できれば、これで「読者になる」ボタンが画像で表示されると思いますが、表示されましたでしょうか。

もし、ブログを開いてもボタンの画像が表示されない場合、または変更されていない場合は、「Ctrl+F5」や「Command+R」で最新の状態を読み込んでみて下さい。

それでも表示されない場合は、どこか間違っているところがないか、再度チェックしてみましょう。

まとめ

以上、アメブロのサイドバーの「読者になる」ボタンを、お好みの画像を使った読者登録ボタンにカスタマイズする方法をご紹介しました。

もしよかったら、当記事を参考にチャレンジしてみて下さいね。

よろしければフォローお願いします

アメブロのサイドバーの「読者になる」ボタンを画像ボタンに変える方法” に対して1件のコメントがあります。

  1. フェリスフラワー より:

    とってもわかりやすいです。ありがとうございます。
    作った「読者になる」ボタンを記事の上に出るようにしたいのですが、その方法も可能でしたら教えて頂けると大変助かります。

    どうぞよろしくお願いします。

コメントを残す

メールアドレスが公開されることはありません。

ご覧いただきありがとうございます。どうぞお気軽にコメント下さい。ただし、コメントでのご質問の方は、記事内容に関することだけに限定させていただきます。ご了承下さい。