MS Access Tips/Sample and VBA and Blog customize etc...

CSSで、ボタン風サイドバーメニュータイトル

前回の記事で、折りたたみスクリプトを導入して、サイドメニューのタイトルをクリックすることで、折りたたんだり戻したりできるようになりましたが、見た目やマウスオーバーしたときに変化して、ユーザーにクリックを誘うようなスタイルにしたいですよね。そこで、今回はスタイルシート(CSS)を設定してみます。

まずは、「テンプレート管理」の「HTML編集」で、プラグインのタイトルのタグを確認します。HTML内で、<!--plugin_first-->のタグを探します。ここのテンプレートの場合は、下記のようになってました。

ということで、rightクラス内のh3要素のスタイルシートを変更すればいいことが分かります。これはテンプレートによって異なりますので、ご自分のもので確認してください。

スタイルシートの該当部分は、オリジナルは下記のようになってます。

この後に a要素のスタイルを追加します。例えば、下記のように display: block; を指定するとテキスト部分だけでなくブロックのどこをクリックしても反応するようになります。

a:hover の部分は、マウスオーバーしたときの設定になりますので、color: や background: などをお好みに設定するといいでしょう。

私の場合は、最終的に下記のように設定して、ボタン風の外観で、マウスをかざすとへこむようにしてみました。

ポイントは、border: outset を指定することで浮き出し効果、border: inset でくぼみ効果を出していることです。後は、padding、文字色、背景色 を微調整してより自然な感じになるようにしています。

追記: 現在の当ブログは jQueryを利用した光るボタンに変更しています。
サイドメニューのタイトルにも光るエフェクトを

拍手する

Leave a reply






Trackbacks

trackback URL
http://hatenachips.blog34.fc2.com/tb.php/65-2fabb4a9
該当の記事は見つかりませんでした。