Ramdom Entry Pickup
- 大人買い（＾＾；） (2005年02月05日)
- RSSをいろいろな素材で作ってみる (2005年12月15日)
- 医療保険に入れない。。。 (2006年06月23日)
- 【スパム対策】メールアドレスのエンティティ化(BlogPet) (2006年04月01日)
- ホテルが停電 (2005年12月22日)
« やっと馬鹿ホテルから解放された。。。 | メイン | どっち派？？（AVの借り方）(BlogPet) »
小粋空間テンプレート・サイドタイトル用アニメーションGIF
[PR] 「ページランク６サービス」SEOのための上質リンクを激安でご提供！
Category : [ CSS, MovableType, インターネット ]
February 2, 2006 10:27
TAG : [Blog,Image,Template,小粋空間]
Permalink
February 2, 2006 10:27
TAG : [Blog,Image,Template,小粋空間]
Permalink
我が家のサーバーで立ち上げているブログのすべてが、
小粋空間さんのテンプレートを使用している。
そこで、やはりデフォルトではなんなので、
サイドバーのサイドタイトル用のアニメーションGIFを作ってみた。
このブログの左右のサイドバーで、
折りたたみ式になっているモノは、
マウスを載せると、白から黒へフェードするようになっています。
で、実際のアニメーションGIFは、
これ↓
ループが1回なので、ここで確認はできませんが（＾＾；）
画像の上で
「右クリック」＞「名前を付けて画像を保存」
で保存してください。
で、
スタイルシートには次のように記述します。
/* マウスポイント時 */
.sidetitle2 a:hover {
padding: 2px;
border: 1px solid #666666; /* 枠線 */
color: #ffffff; /* 文字色 */
/*background: #666666;*/ /* 背景色 */
font-family: Century Gothic, Verdana, Arial, sans-serif;
font-size:12px;
text-decoration: none;
background-position: left top;
background-repeat: no-repeat;
background-image: url("/画像ディレクトリ/sidebar-grad.gif");
}
.sidetitle2 a:hover {
padding: 2px;
border: 1px solid #666666; /* 枠線 */
color: #ffffff; /* 文字色 */
/*background: #666666;*/ /* 背景色 */
font-family: Century Gothic, Verdana, Arial, sans-serif;
font-size:12px;
text-decoration: none;
background-position: left top;
background-repeat: no-repeat;
background-image: url("/画像ディレクトリ/sidebar-grad.gif");
}
これは、メニューを折りたたみ式にして、
ハイパーリンクの属性にしていないと意味がありません（＾＾；）
できれば他の色系も作りたいな、、、と思いつつ（＾＾；）
ソーシャルブックマーク
||
|
|
|
|
|
|
|
|
|
|
|
|
このエントリーと関連性が高いと思われるエントリー
このエントリーに関連するかもしれない商品
おすすめ商品
Link Information
Link HTML:
トラックバックURL:
