サイドメニューのタイトル部のCSS3を使ったデザイン例

サイドメニューのタイトル部のCSS3を使ったデザイン例

アメブロカスタマイズのわざめーばです。

こんにちは。

Internet ExplorerがCSS3のサポート状況の良いバージョン10以降がメインで使われるようになったので、アメブロのカスタマイズでも気軽にCSS3が使えるようになってきましたね。

今回は、このCSS3を使ったアメブロのサイドメニューのタイトル部分のデザイン例とそのデザインにするためのユーザーCSSに記述するコードをご紹介します。

↓こんな感じになります。

CSS3が使えなかった頃だと、画像を使わなければ不可能だったようなデザインですね。

なお、(CSS3とは関係ないんですが)タイトル部分をこんな感じにすると、初期状態でサイドメニュー全体を囲っていた枠が邪魔だったので、それも外してすっきりさせました。

では、このデザインにする方法をご紹介します。

ユーザーCSSに以下のコードを追加して下さい。
(もし、ユーザーCSSについてわからない場合はこちらを参照してください。)

/* 影が切れずに表示されるように */
.layoutContentsA, .layoutContentsB {
  overflow: visible;
}
.skinSubArea {
  overflow: visible;
}
.skinMenu {
  overflow: visible;
}

/* サイドメニューとその本体部分を透明化 */
.skinMenu, .skinMenuBody {
  background: transparent;
}

/* サイドメニュー本体部分を枠なしに */
.skinMenuBody {
  margin: 15px 5px;
  padding: 0;
}
.profileMenu .skinMenuBody {
  padding: 0 15px;
}

/* サイドメニュータイトル部分のデザイン */
.skinMenuHeader {
  padding: 8px 0 7px 0;
  overflow: hidden;
  background: linear-gradient(to bottom
    , #ffffff 0%
    , #e7e7e7 50%
    , #e0e0e0 51%
    , #e7e7e7 100%
  );
  border: 1px solid #cccccc;
  border-radius: 5px;
  box-shadow: 3px 3px 5px #cccccc;
}
.skinMenuTitle {
  display: block;
  padding: 3px 10px 2px 10px;
  color: #555555;
  border-bottom: 2px solid #bbbbbb;
  text-shadow: 1px 1px 0px #ffffff, 2px 2px 2px #cccccc;
  box-shadow: 0px 2px 2px #ffffff;
}

/* サイドメニュータイトルのラインの色 */
.skinMenuTitle {
  border-color: #99bb22;
}

基本的にはこれでOKですが、事前のカスタマイズ状況によっては、それに合わせた修正が必要になる場合があります。

また、細かい修正を行いたい場合などは、コード内の注釈を参考に変更してみて下さい。

なお、タイトル文字の下のラインの色だけは、単独で変えやすいようコードの一番下に記述してありますので、こちらで変更して頂ければと思います。

例えば、本ブログのデザインで所々に使っているオレンジ(#EE7800)に変えると次のようになります。
オレンジ

また、黒(#000000)なら↓こんな感じ。
黒

赤(#FF0000)なら↓こんな感じ。
赤

こんな青(#336699)もスッキリしていいかもしれません。
青

ちなみに、CSS3をサポートしていないIE8(Internet Explorer バージョン 8)で表示してみたところ・・・、

↓こんな感じでした。
IE8で表示した場合はCSS3が適用されない

ずいぶんとあっさりしてしまいますが、破たんするというほどではないですね。

以上、CSS3を使ったアメブロのサイドメニューのタイトル部分のデザイン例をご紹介しました。

良かったら参考になさってくださいね。

関連記事

CSSを編集してアメブロをカスタマイズする方法
アメブロカスタマイズ目次
アメブロカスタマイズで成功するブログを作ろう トップページ