おはようー
今日もブログメニューの続きで、
ボタンにマウスオーバーすると 大きくなるサンプルを紹介するよ
(この記事を書いた時点です)
このブログを見てみてね。
メニューを右寄せに変えてみました
この形式だとボタンを何個にでもできるよ
※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;
}
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編集に対応していません。
※画面や仕様は記事が投稿された時のものです。