wordpress3.5およびCSSに関しての質問です。


現在下記サイト
http://dca-labo.info/demo8

のヘッダーの左上に「サイトマップ」「お問い合わせ」のリンクを貼りたいと思っています。
その際のCSSの記述はいくつかあると思うのですが(といっても思い浮かぶのはpositionくらいしか
ないのですが・・)今回の場合どのような記述方法がベストでしょうか?

回答の条件
  • URL必須
  • 1人5回まで
  • 登録:
  • 終了:2013/03/18 11:37:18
※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

ベストアンサー

id:a-kuma3 No.1

回答回数4973ベストアンサー獲得回数2154

ポイント150pt

header の左上というと、グレーになっている部分をイメージしているんでしょうか?
質問で提示されたサイトでは、この部分は、header タグではなく、それを囲んでいる DIV#page の margin と、BODY の padding で作られています。

その位置にリンクの要素を配置するとしたら、サイトマップやお問い合わせのリンクの要素を囲む DIV などを作って、

  • DIV#page の margin-top を 0 にして、DIV#page 要素の前に入れ込む
  • DIV#page とは関係なく、リンクを囲む要素に対して position: absolute; を指定して、絶対座標で位置を指定する

のどちらかになるのかなあ、と思います。

# こんなので、回答になってますか?



追記です。

「サイトマップ」「お問い合わせ」を入れたいポイントは下記をみて頂ければと思います。

まず、header タグ近辺の文書の構造がこんな感じです。
f:id:a-kuma3:20130314223407p:image
header の範囲が、
f:id:a-kuma3:20130314223408p:image
hgroup の範囲が、
f:id:a-kuma3:20130314223409p:image
h1 の範囲が、
f:id:a-kuma3:20130314223410p:image
h2 の範囲が、
f:id:a-kuma3:20130314223411p:image
となってます。
# Firefox の「要素の調査」を使ってます。

んで、文書の構造を大切にするなら、リンクを囲む要素は hgroup の中で、h2 の後かな、と思います。
その位置に挿入して、h2 よりも上で、h2 の終了位置よりも、開始位置を左にするなら、

  1. position: absolute にして、top と left をページ内の座標で指定する
  2. position: relative にして、h2 の位置を基準に top と left を決める

のどちらかだと思います。

文書の構造なんか知ったこっちゃない、ということであれば、h1 の前に挿入して、

  • リンクの要素の padding-left または margin-left を調整してリンクの位置を決める
  • h1 の padding-top (現状は、3.65625em) を減らして、リンクの要素が収まるようにする

という感じで、位置を調整。

文字のサイズやフォントなどの修飾はお好みで、という感じでしょうか。

他1件のコメントを見る
id:a-kuma3

例によって私の質問の表現がまずいみたいです。

まだ、ぼくのエスパーレベルは未熟なようです。
というわけで、回答に追記しました。

2013/03/14 22:49:56
id:mkusume

ありがとうございます。確認してみます。

2013/03/14 23:14:06

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

回答リクエストを送信したユーザーはいません