アメブロのサイドバータイトルとその周辺のカスタマイズ

アメブロのサイドバータイトルとその周辺のカスタマイズ

今回はアメブロのサイドバーのタイトルの文字色、文字の大きさ、背景色それからサイドバーの枠の色をカスタマイズする方法を解説していきます。サイドバーへの画像、広告などの設置方法は別記事ね。

アメブロのサイドバーに広告や画像を貼る方法

さて、サイドバーのカスタマイズに関しては一応このブログのデザインと同じ色に変更してみるとこのようになります。もちろんカラー等はお好みで変更する事ができます。

アメブロサイドバーの色や文字の大きさのカスタマイズ-1

それでは早速カスタマイズ手順を紹介していきます。

スポンサーリンク

サイドバータイトルの文字や背景色の変更

まずはサイドバータイトルの文字をカスタマイズ。CSSの一番下に次のコードを追加していきます。

ここで変更したのは次の点です。

  • 文字の大きさ:15px
  • 背景色が紺色(#1F5E73)
  • サイドバータイトルを中央寄せ
  • サイドバータイトルの余白(10px)
  • サイドバータイトルの文字色:白(#fff)
  • サイドバータイトル部分の角を少し丸く

一応このブログと同じ背景色(#1F5E73)にしてサイドバーのタイトルを中央に配置(text-align:center)、ついでにちょっと丸みをつけた感じです(border-radius: 5px)。

もちろん不必要な部分は削除してもいいですし、色も好きな色に変更して下さい。

以上アメブロのサイドバーのカスタマイズでした。次回はアメブロにヘッダー画像を設置する方法を紹介していきます。

最終更新日:2018/02/03

コメントの反映には時間がかかる場合があります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。