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

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

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

アメブロサイドバー-1

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

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

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

/* サイドバータイトル */
.skinMenuTitle{
font-size:14px;
font-weight: bold;
color: #fff;
}

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

  • 文字の大きさ:14px
  • サイドバータイトルを太字(bold)
  • サイドバータイトルの文字色:白(#fff)

それで次に背景色を変更したり、サイドバーのタイトルを中央に配置するコードを追加していきます。

/* サイドバータイトル背景色と中央寄せ */
.skinMenuHeader{
background:#1F5E73;
text-align:center;
border-radius: 3px;
}

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

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

サイドバーの枠内の色を変更するカスタマイズ

最後にサイドバーの枠内の色を変更する方法も書いておきます。背景色ですね。

.skinMenu{background:#fff;}

ここで記述したのはサイドバーの枠の色を白(#fff)に変更していますが、背景も白なので枠は見えませんよね。まあ、ここは自分の好きな色に変更しておいて下さい。

枠が不要という場合はこのように背景色と同じ色にするか次の記述でサイドバーの枠を消す事が可能です。

.skinMenu{background:none;}

以上アメブロのサイドバーのカスタマイズ。次回はブログタイトルと説明文のカスタマイズをしていきます。

※入院生活から復活しました!!またできるだけ返信しますのでよろしくお願いします(^^)

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