menu


2016年3月11日金曜日

メニューボタンを追加しました。

昨日の夜、画面にメニューを追加しました。
新しく使えるようにしたブログの上のエリアです。まだリンクしてませんが、見た目は、変わりました。
追加した内容は、以下です。
<style type="text/css">

.btn_type1{
border:1px solid #DF0909; -webkit-border-radius: 9px; -moz-border-radius: 9px;border-radius: 9px;font-size:12px;font-family:arial, helvetica, sans-serif; padding: 10px 10px 10px 10px; text-decoration:none; display:inline-block;text-shadow: -1px -1px 0 rgba(0,0,0,0.3);font-weight:bold; color: #FFFFFF;
 background-color: #F62B2B; background-image: -webkit-gradient(linear, left top, left bottom, from(#F62B2B), to(#730000));
 background-image: -webkit-linear-gradient(top, #F62B2B, #730000);
 background-image: -moz-linear-gradient(top, #F62B2B, #730000);
 background-image: -ms-linear-gradient(top, #F62B2B, #730000);
 background-image: -o-linear-gradient(top, #F62B2B, #730000);
 background-image: linear-gradient(to bottom, #F62B2B, #730000);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#F62B2B, endColorstr=#730000);
}

.btn_type1:hover{
 border:1px solid #b30808;
 background-color: #e40a0a; background-image: -webkit-gradient(linear, left top, left bottom, from(#e40a0a), to(#400000));
 background-image: -webkit-linear-gradient(top, #e40a0a, #400000);
 background-image: -moz-linear-gradient(top, #e40a0a, #400000);
 background-image: -ms-linear-gradient(top, #e40a0a, #400000);
 background-image: -o-linear-gradient(top, #e40a0a, #400000);
 background-image: linear-gradient(to bottom, #e40a0a, #400000);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#e40a0a, endColorstr=#400000);
}
</style>

<br />
<div style="text-align: center;">
<div>
<div>
<b>Menu</b></div>
<div>
<a class="btn_type1" href="#"><span style="color: white;">  ブログ修正記事一覧  </span></a>
<a class="btn_type1" href="#"><span style="color: white;">  HTML記事一覧  </span></a>
<a class="btn_type1" href="#"><span style="color: white;">HTMLサンプル記事一覧</span></a>
<a class="btn_type1" href="#"><span style="color: white;">アフェリエイト記事一覧</span></a>
<a class="btn_type1" href="#"><span style="color: white;"> その他お役立ち一覧 </span></a>
</div>
</div>
</div>
これをコピペしただけ!まだ、リンク先作ってないから押しても移動しません。
htmlも今度教えます。
基礎は、コピペ!
基礎の書き方とルールを覚えてコピペして、修正するだけで、私は、作ってます。
難しい事書いてもわからないし、わからなくても作れる!
今度基礎の部分を教えますね!

0 件のコメント:

コメントを投稿