質問: wordpress3.5およびCSSに関しての質問です。 現在下記サイト のヘッダーの左上に「サイトマップ」「お問い合わせ」のリンクを貼りたいと思っています。 その際のCSSの記述はいくつかあると思うのですが(といっても思い浮かぶのはpositionくらいしか ないのですが・・)今回の場合どのような記述方法がベストでしょうか?
回答: 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) を減らして、リンクの要素が収まるようにする という感じで、位置を調整。 文字のサイズやフォントなどの修飾はお好みで、という感じでしょうか。