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

新タイプCSS編集用デザインのサイドバーのボタン(読者になる、一覧を見るなど)の、大きさや色を変えるカスタマイズ方法です。

特に初期状態で濃いグレーの「読者になる」ボタンは、黒く大きくて、個人的にちょっと目立ちすぎる気がしますので、大きさや色を変えたい方も多いのではないでしょうか?

そこで、当記事では、これらのボタンをお好みの大きさや色に変えるカスタマイズ方法をご紹介します。

(色の変更は、ブログデザインCSS中のある箇所を修正すれば可能ですが、当ブログでお勧めする「末尾に追加する」手順としてご紹介します)

サイドバーのボタンの色や大きさを変える

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

サイドバーのボタンをまとめて同じ大きさ、色にする

まず、サイドバーの「読者になる」ボタンと、それと同じ大きさで色が白い「一覧を見る」などのボタンを、全て同じ大きさと色に揃える方法です。

ブログデザインCSSに以下のようなコードを追加しましょう。

ちなみに、このコードで、冒頭の画像のようにカスタマイズできます。

「どこを変えれば、何が変わるのか?」については、各行の注釈コメント(「/*」と「*/」に挟まれた部分)を参考にして下さい。

注意点として、ボタンの高さと行の高さは同じにしておくと、文字位置がうまく真ん中に納まりますので、同じ値に合わせると良いと思います。

「読者になる」ボタンだけ大きさや色を変える

次に、サイドバーの「読者になる」ボタンだけ、大きさや色を変える方法です。

他のボタンともある程度外見を揃えたい場合は、基本設定を上記「まとめて」で行い、その後で「読者になる」ボタンで変えたい箇所だけを再設定するのが良いと思います。

また、「読者になる」ボタンは、「プロフィール」と「このブログの読者」にそれぞれ、つまり合わせて2つありますので、両方まとめて変える場合と、それぞれ別々に変える場合をご紹介します。

何れも、コード内に記述してある値は、上記の「まとめて」と同じになっていますので、適宜変更して下さい。

サイドバーの両方の「読者になる」ボタンの大きさや色を変える場合

「プロフィール」の「読者になる」ボタンの大きさや色を変える場合

「このブログの読者」の「読者になる」ボタンの大きさや色を変える場合

まとめ

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

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

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

コメントを残す

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

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