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

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

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

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

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

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

/* サイドバータイトル */
.skin-widgetTitle {
  font-size: 15px;
  background:#1F5E73;
  text-align:center;
  padding: 10px !important;
  color: #fff;
  border-radius: 5px;
}

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

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

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

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

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