【改造サンプル】ブログにメニュー その３ （マウスオーバーで大きくなる）

おはようー


今日もブログメニューの続きで、
ボタンにマウスオーバーすると　大きくなるサンプルを紹介するよ


（この記事を書いた時点です）
このブログを見てみてね。
メニューを右寄せに変えてみました



この形式だとボタンを何個にでもできるよ

※chrome、safari、firefoxの最新版でみると、ビヨーンって動くよ




今日のサンプル
※前前回の記事でフリースペースへ追加した箇所は、そのままにしておいて、
CSSだけ下記に差し替えてみてください。

.skinContentsArea{
position:relative;
padding-top:48px;
}
#myFreeArea {
position:absolute;
top:0px;
right:0px;
height:40px;
text-align:center;
}
#myFreeArea a{
display:inline-block;
margin:2px 3px 0;
padding:6px 20px;
border-radius:6px;
font-size:16px;
font-family: Tahoma;
font-weight: bold;
color:#333;
background: url(http://stat100.ameba.jp/common_style/img/skin/cmn/bg/transparent/transparent_fff_8.png);
text-decoration:none;
vertical-align:middle;
-webkit-transition-duration:300ms;
-moz-transition-duration:300ms;
-ms-transition-duration:300ms;
transition-duration:300ms;
}
#myFreeArea a:hover{
margin:0 3px;
padding:10px 32px;
background:#fff;
}

このCSSを元にいろいろ改造してみてね



できたかな

CSS編集をやってみたけど、なぜかうまくできない。原因が分からない人

→この記事を見てみてね
CSS？カスタマイズ？って　何かよく分からない人

→この記事を見てみてね

※このブログのカスタマイズは、「CSS編集用デザイン」
を使ったもので、CSS編集用デザイン以外のCSS編集に対応していません。

※画面や仕様は記事が投稿された時のものです。