今回ご紹介するサイトは、兵庫県尼崎市にある透析医療をされている
「黒田泌尿器科」様のWebサイトです。

黒田泌尿器科様のWebサイトの特長はスタッフ様の募集に力を入れられています。

各ページの下部に募集のバナーを設置し、実際に働かれている人の一日を分かり易く
写真とテキストで見せています。
「看護師の一日」として楽しく、明るい職場環境がよく伝わるページになっています。
看護師の方のお写真も元気な表情が、これから応募される方も良いイメージで応募さ
れると思います。
http://www.kurodahd.com/oneday.html

また、人間関係や休暇等も応募される方は不安が多いと思いますが、「看護師Ｑ＆Ａ」
のページでそういった不安も払拭できると思います。
http://www.kurodahd.com/voice.html

もちろん患者様向けに泌尿器科・人工透析の情報も掲載されています。

診察時間や診察案内等一般的な項目以外にも「透析室スタッフインタビュー」という
ページを設けました。

実際に透析室のスタッフ様の声を掲載し、患者様の不安をなくす事ができます。
単純にテキストだけでの説明では患者様も詳しくは読まない事もあり、あまり印象に
残らない事も多いと思います。
しかし、スタッフ様のお写真と共に掲載する事により、より効果的にお客様にはお伝え
できています。

通院が困難な患者様には自宅から病院まで送り迎えもされております。
http://www.kurodahd.com/support.html

また、キレイな院内や施設も掲載されていますのでご覧ください。
http://www.kurodahd.com/sisetu.html

よい職場環境で働きたい方は是非ご覧ください。
http://www.kurodahd.com/index.html

前回はテキストリンクをメニューボタンのように見せる方法を
お伝えしました。
前回→http://www.ryuumu.co.jp/ryuumu/stuffblog/e360.html
今回はさらにもう一工夫！マウスが乗ったら背景色を変更しましょう。
背景色の変更といってもリンクテキストだけではなく、
前回やったリンクが有効になっているブロックの背景を変更します。

今回も分かりやすくする為に、リストの背景は画像ではなく色にします。

まず前回同様、普通にリストを書きます。



このままだと、文字にだけリンクが貼られている状態ですね。

では次にスタイルシートです。



前回と違うところは、a:hoverが追加されたことです。
リストのリンクタグで、hover（マウスがのった時）の動きをどうするか、という指定をしています。
これも普通のリンクと同じように指定できますが、その前のリンクタグにdisplay:blockを指定しているので
リンクタグ内がブロック（長方形の形をした表示領域）になっている為、ブロックの背景色が変化しているのです。
ためしに、li aのdisplay:blockを削除してみてください。
リンクテキスト部分の背景しか色が変化しませんね？
　
いかがでしょうか？
普通のテキストリンクで物足りなくなった場合、このような装飾をすることで、デザインも見やすくなりますね！
　　
ではまた次回！

今回ご紹介するサイトは、楽天ストアでキッチン用品を販売されている
「くるちかも」様のWebサイトです。

くるちかも様のWebサイトの特長はとにかく取扱い商品の多さです。

料理をあまりしない私でも知っているブランドも多数あり、ル・クルーゼ
やジョゼフ・ジョゼフ等オシャレな調理器具メーカーの商品も取り扱われて
いるので見てるだけでも楽しめるWebサイトです。

また、カテゴリ分けが見やすいのも特徴です。
種類別やメーカー別だけでなく、用途別や金額別等も用意されているので
商品点数が多いですが、探しやすいWebサイトになっています。

お店をされている方だけではなく、一般のお客様でも購入できますので
プロが使用する調理器具をご家庭で使用する事ができます。

個人的に気になった商品を２つご紹介させて頂きます。

【焼鳥器】
http://item.rakuten.co.jp/culticamo/3-0507-0402/
今までフライパンで焼いていた焼き鳥がこれを購入すれば、家庭でも本格的
な香ばしい焼き鳥が食べれます。

【ニューキャベック】
http://item.rakuten.co.jp/culticamo/3-0427-1001/
簡単に誰でもキャベツの千切りを作ることのできる調理器具です。
普段包丁を使い慣れていない人でも怪我の心配はございません。
これで時間短縮できますね。

この他にも魅力的な商品が多数ありますので料理をよくされる方も
されない方も楽しんでお買い物できる「くるちかも」様のWebサイトを是非
一度ご覧ください。
http://www.rakuten.co.jp/culticamo/

さて、今回は前回までのリストをメニューボタンのように見せる方法に一工夫をし、リンクが貼られた文字以外をクリックしてもリンクが貼れるようにします。
・・・この説明で分かりますか？
百聞は一見に如かず！実際やってみましょう。

前回の記事→http://www.ryuumu.co.jp/ryuumu/stuffblog/e357.html
今回は分かりやすくする為に、リストの背景は画像ではなく色にします。


まず普通にリストを書きます。
リンクボタンにしたいので、リンクも今回から追加します。



このままだと、文字にだけリンクが貼られている状態ですね。

では次にスタイルシートです。

　

いかがでしょうか？
色背景がついたリスト部分（文字が無い部分）にマウスをのせてもリンクが有効になっていることが確認できましたでしょうか？
これは、liのaにdisplay:blockというスタイルシートを追加したからです。
リンクタグである、a　はインライン要素と呼ばれるものなので、通常ではリンクタグ内だけにリンクが有効になっています。
このインライン要素をブロック要素にすることで、文字通り、リンクタグ内をブロック（長方形の形をした表示領域）にしてやります。
　
これを利用することで、もっと表現の幅が広がります。
が、少し長くなりそうなので、次回にまわしたいと思います！
　
ではまた次回！