宮崎ロッド・Prime Time バンブーロッドPiggy's Tail

2010-08-23

リンクをタブのように見せるCSS

メニューのスクリーンショット
リンクの新旧比較・上が新しいタブスタイルのリンク

ホームページ・メインコンテンツのリンクを画像上のようにボタンからタブっぽく変更してみました。上が新しいタブのリンク、その下が今までのボタンタイプのリンクです。画像はお知らせのページです。

元のHTMLはそのままでCSSのみの変更で実現出来ました。CSS3的にはちょっとアレ(borderとbackgroundが同色指定、タブの角の丸めに-moz-border-radius)ですが見た目、リンクとコンテンツの関連が良くなったかなということでその辺りは後々改善しようと思います。

以下、リンクのHTMLです。<li>とか使っていないので至ってシンプルw

<div id="guide">
<span>お知らせ</span>
<a href="info.html">From "Prime Time"</a>
<a href="info_log.html">Log File</a>
&nbsp;
<a href="../content/searchsite.html" title="サイト内検索へ">Search</a>
</div>

以下、新しいタブ・タイプのリンクの主なCSSです。

/* #guide */

#guide {
   font-size          : 0.9em;
   margin             : 0;
   text-align         : right;
   border-bottom      : 2px solid #e9e9d1;
}
 
#guide a {
   color              : #666;
   background-color   : #ffffff;
   border-top         : 1px solid #808080;
   border-left        : 1px solid #808080;
   border-right       : 1px solid #808080;
   border-bottom      : 1px solid #c0c0c0; /* 他のページへのタブ */
   text-decoration    : none;
}

#guide span {
   color              : #000000;
   background-color   : #ffffff;
   border-left        : 1px solid #666;
   border-right       : 1px solid #666;
   border-bottom      : 3px solid #fff; /* 現在位置のタブ */
}

#guide a, #guide span {
   padding            : 1px 3px 1px 3px;
   -moz-border-radius : 4px 4px 0 0;
}

#guide a:visited {
   color              : #696969;
   background-color   : #ffffff;
}
 
#guide a:hover {
   color              : #000000;
   background-color   : #fae9a7;
   border-bottom      : 2px solid #fae9a7;
}

#guide a:hover, #guide span {
   border-top         : 3px solid #edb636;
}

/* 親divのbackground-colorは#e9e9d1 */

…というようにborder-bottomの設定(色と太さ)がミソになっています。コレ、なかなか気が付きませんでした。CSSの変更なので検索エンジンのキャッシュにも自動的に適用されるのもいいですね〜

付記:タブの角の丸めはFirefox 3ブラウザでご覧いただきますとそのようになります。

Posted by TM* at 2010-08-23 12:02 in Web関連 » miyazaki-rod.com | English | Permalink
Tagged as:

2010-08-19

ショートロッドでキャス練・奥多摩川

6フィート3インチ・4番ロッドの画像
グリップも短い6’3”ロッドでキャス練

久しぶりにキャス練。今回は6フィート3インチ・#4番ロッドで3番ラインを使って万世橋までアレコレとキャストしてきました。いつもは6’9”〜8’0”でキャス練していますが今回はかなり短めのロッドということになります。何度もバックの背の高い雑草にラインを絡ませました(汗;)。

また、一番手軽いラインを使いましたので本来は4番ラインで全体的に働くアクションがやはりバットが強く感じられて意識的にその部分をキャスティングで曲げて行くことが必要になるようです。ところがそういったことがメリハリのあるラインコントロールに役立つような部分もあるわけでとても面白かったです。

竿が短い分、長いライン+リーダー+ティペットが水面に乗っているわけですが流れを読んでのポジショニングと適したキャスト=ラインコントロールを心がけることがさらに大切になるなぁと思ったキャス練でした。

Posted by TM* at 2010-08-19 08:13 in フライフィッシング | English | Permalink
Tagged as:

2010-08-10

夏の渓のフライ

上流部では川虫が少なくなる季節です。それでもぼちぼちハッチする水生昆虫たちを見ることがありますが夏はやはり陸生昆虫に模したフライの出番が多くなります。フライボックスの中身も小型で細身なパターンばかりになったのでちょっと補充ということでフライを巻いてみました。

テレストリアルなフライの画像
陸生昆虫的なフライ5種

トレイの升目・左上から時計回りに…

  1. ロイヤルコーチマンのエルクヘア・カディス:ハックルはブラウンとグリズリーのミックス、ボディーはピーコック+アントロンヤーンのラスト+ピーコックにしてあります。胸の赤い大きなアリといったイメージですか。
  2. ディアヘアー・ウーリー:甲虫や蛾のようなシュルエット。形的にフッキングしずらそうですね〜。
  3. スパイダー:ディアヘアーでクモを模したフライ。意外に浮力があって見やすいです。フッキングするとバラバラになってしまうのが改良のしどころか。
  4. クリケット:緑色のパターンもあるといいかも。ディヘアーをハサミで刈り込むタイイングが面白いです。
  5. グリーン・ホッパー:たぶん使わないかも(笑)。よい淵で他のフライに反応がない時に試してみようと思います。

…といった感じです。

溜まりや淵などの静かなポイントはプレッシャーが高いとミッジと極細ティペットの釣りになってしまうでしょうがボリューム感があるフライも面白い季節ですね。さあ、盛夏の川に出掛けましょう!

Posted by TM* at 2010-08-10 05:19 in フライタイイング | English | Permalink
Tagged as: