人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

はてダのスタイルシートカスタマについて、教えて下さい。
フォトライフと、はまぞうの画像で、下にボーダーが表示があるのを消したいのです。
スタイルシートで、a:linkの表示をアンダーライン入りから、薄い色のボーダー表示に替えたところ、こうした画像にも出てくるようになりました。
「border: none」というのを、色々入れまくってみましたがダメでした。→お手数ですが、http://d.hatena.ne.jp/YOW/20071120を御覧下さい。

どうぞよろしくお願いします。

●質問者: YOW
●カテゴリ:はてなの使い方 ウェブ制作
✍キーワード:border LINK はてダ はまぞう アンダーライン
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● Yuichirou
●100ポイント ベストアンサー

http://d.hatena.ne.jp/YOW/20071120 にあるソースについて、以下のように書き換えてください。

以下のソースに書かれていないセレクタ(設定)は無意味なので削除して構いません。

a:link {
 color: #333; word-break: break-all;
}

div.section a:link {
 border-bottom: 1px solid #cfcfe1;
}

/*==フォトライフの画像== */
div.section a.hatena-fotolife { border: none; }

/*== 画像によるリンクの際の枠線を消す==*/
img { border: 0; }

/*== はまぞうリンク ==*/
div.hatena-asin-detail { border-left: 4px double #cfcfe1; }

div.section a.asin { border: 0; }
div.hatena-asin-detail a { border: 0; }
div.hatena-asin-detail div a:link {
 border-bottom: 1px solid #cfcfe1;
}

フォトライフの画像のリンクは、a.hatena-fotolifeの中にimg.hatena-fotolifeが含まれているため、「img.hatena-fotolife a」とセレクタを指定しても意味がありません。また、単純に「a.hatena-fotolife { border: none; }」とするだけではうまくいきません。これは「a.hatena-fotolife」より「div.section a:link」の方がセレクタの記述が詳細とみなされ、より詳細なセレクタの設定を優先するというCSSの規則があるためです。なので「div.section a.hatena-fotolife」というセレクタを使用しています(「:link」と「.foo」は後者の方が詳細とみなされます。詳しくは「CSS 詳細度」で検索)。

はまぞうのイメージ表示については同様に「div.section a.asin」とすればよいのですが、詳細表示の場合は画像リンクにクラスが設定されていないので、ちょっと面倒なことをしています。最後の「border-bottom」はテキストリンクに表示させたいボーダーを設定してください。

◎質問者からの返答

ありがとうございます!

ご丁寧なアドバイスに感謝!

やってみましたら、消えました。助かりました。

なお、

http://d.hatena.ne.jp/YOW/20071120の日付け分は、はまぞうによってムダに検索上位にあがってしまうので、pm.21:00になったら消去致します。

消去しても、Yuichiroさんの解説で、後の人も分かると思います。

お世話になりました。

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ