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

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

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

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

●質問者: mkusume
●カテゴリ:インターネット ウェブ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● a-kuma3
●150ポイント ベストアンサー

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

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

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

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



追記です。

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

まず、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 の前に挿入して、

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

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


mkusumeさんのコメント
回答ありがとうございます。 例によって私の質問の表現がまずいみたいです。「サイトマップ」「お問い合わせ」を入れたいポイントは下記をみて頂ければと思います。 http://dca-labo.info/demo8/testimg/sample.jpg

a-kuma3さんのコメント
>> 例によって私の質問の表現がまずいみたいです。 << まだ、ぼくのエスパーレベルは未熟なようです。 というわけで、回答に追記しました。

mkusumeさんのコメント
ありがとうございます。確認してみます。
関連質問

●質問をもっと探す●



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