スポンサードリンク

2010年10月16日

勝手に七日間チャレンジCメニューをボタンのように背景もクリックできるようにする

訪問ありがとうございます。
勝手に七日間チャレンジを始めたけれど、明日が
いよいよ最終日の七日なのに全然思うように作業できていない
もしもドロップシッピング店長の銀です。

まあ自分で勝手に始めたことなので、言い訳しても
何の意味もないんですけどね。

さて、いよいよデザイン的な部分に取り掛かりました。

このブログではほとんど紹介したことのない「CSS」を
いじり始めましたよ。

まだまだ、ほとんど変わってないのですが、こちらの
ページを見てください。

内食グッズ 通販

背景に色付けして、もしみんこと柿内ひとみ先生の著書
付いていた背景画像を入れました。

背景画像をCSSを使って入れるのは簡単で、今回の場合以下のように
追記しました。

background: url(画像ファイルのURL) repeat-y;

repeat-yとすることで、y方向に同じ画像を繰り返してくれます。

あともう一点変更したのがサイドバーのメニュー部分です。

他のサイトを見ているとメニュー部分がボタンのようになっている
ことっておおいですよね。

でもaタグを使って指定しても、テキストのみしかリンクを張れないし
これはどうやっているんだろうと疑問に思っていました。

今回思い立って検索してみると意外と簡単にできるものだと
わかったのでご紹介します。

背景をクリックしてもリンクが飛ぶように設定したい箇所に
以下のように記述します。

display:block;

これだけです。
本当に簡単だったでしょ^^;

ちなみに私が参考にしたサイトはこちらで、ロールオーバー時に
反転させてボタンのように見せる方法も紹介されています。

http://www.tokiwa.ac.jp/~shio/el/css/menu.htm

本当はサイト上部にメニューバーも作ろうと思っているのですが、
まだそこまで手を出せていません><

自己満足じゃなくユーザビリティの高い構造にしていきたい
と思っているのですが、なかなかどうして。

まだまだ頑張ります。

[PR]ポップコーンメーカー | スロークッカー | ティファール ホームベーカリー | クックマジック | スムージーメーカー
タグ:もしもドロップシッピング CSS
posted by 銀(gingnangboy) at 00:12 | Comment(0) | ページ作りのコツ | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
fx
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。