小粋空間テンプレート・サイドタイトル用アニメーションGIF

  • 投稿日:
  • by

我が家のサーバーで立ち上げているブログのすべてが、
小粋空間さんのテンプレートを使用している。

そこで、やはりデフォルトではなんなので、
サイドバーのサイドタイトル用アニメーションGIFを作ってみた。

このブログの左右のサイドバーで、
折りたたみ式になっているモノは、
マウスを載せると白から黒へフェードするようになっています

で、実際のアニメーションGIFは、
これ↓

sidebar-grad.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");

}


これは、メニューを折りたたみ式にして、
ハイパーリンクの属性にしていないと意味がありません(^^;)



できれば他の色系も作りたいな、、、と思いつつ(^^;)