私のブログhttp://d.hatena.ne.jp/nakanotaku/の検索窓を、ブログの左上端、黒いバーに重なるように小さく表示させたいのですが、自分で色々調べても(position等ヘッダのところに入力してみました)全くうまくいきません。具体的にどこに何を入力したら、検索窓を希望の位置に動かせるのでしょうか。ご教示をどうぞよろしくお願い致します。

回答の条件
  • 1人50回まで
  • 13歳以上
  • 登録:2012/09/17 04:35:31
  • 終了:2012/09/17 15:55:42

ベストアンサー

id:windofjuly No.1

うぃんど回答回数2625ベストアンサー獲得回数11492012/09/17 06:12:21

ポイント180pt

一例です。

まずはformタグにidを追加。

<form id="search_box" 以降はそのままで変更ありません。

スタイルシートに下記を追加。
ただしtopとleftとwidthの数値は適宜調整。

form#search_box {
    position:relative;
    top:-375px;
    left:2px;
    width:20em;
    height:0px;
}
他9件のコメントを見る
id:windofjuly

私のダイアリーでテストしてたので朝のコードが残ってたのですが、
私のダイアリー用に無用なコードが入ってました。重ね重ねすみません。
formタグの中の下記の部分を消してください。

style="position:relative; top:-140px; margin:-1em 0em 0em; left:2px; width:20em; height:0px;"
2012/09/17 15:08:01
id:nakanotaku

ありがとうございます!!無事解決しました。ほんとうにほんとうにありがとうございました!!!

2012/09/17 15:53:14

その他の回答(1件)

id:windofjuly No.1

うぃんど回答回数2625ベストアンサー獲得回数11492012/09/17 06:12:21ここでベストアンサー

ポイント180pt

一例です。

まずはformタグにidを追加。

<form id="search_box" 以降はそのままで変更ありません。

スタイルシートに下記を追加。
ただしtopとleftとwidthの数値は適宜調整。

form#search_box {
    position:relative;
    top:-375px;
    left:2px;
    width:20em;
    height:0px;
}
他9件のコメントを見る
id:windofjuly

私のダイアリーでテストしてたので朝のコードが残ってたのですが、
私のダイアリー用に無用なコードが入ってました。重ね重ねすみません。
formタグの中の下記の部分を消してください。

style="position:relative; top:-140px; margin:-1em 0em 0em; left:2px; width:20em; height:0px;"
2012/09/17 15:08:01
id:nakanotaku

ありがとうございます!!無事解決しました。ほんとうにほんとうにありがとうございました!!!

2012/09/17 15:53:14
id:a-kuma3 No.2

a-kuma3回答回数4488ベストアンサー獲得回数18572012/09/17 11:47:55

ポイント20pt

多分、今はページのヘッダのところに、以下のように書かれていると思います。

<div class="main">
    <hatena name="searchform">
    ...

これを、以下のように書き換えると、検索窓の位置が黒いバーの辺りに移動して、入力領域とラジオボタンが一列になると思います。

<div class="main">
<div style="position: absolute; top: 0px;">
    <hatena name="searchform">
</div>
<style>
.hatena-searchform br {
    display: none;
}
</style>
    ...

後は、文字のサイズを小さくするか、黒いバーの方を太くするか、どちらかの方法で、バーの中に納めることができると思います。

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

あれ?
自分のところで試してから回答したんですけどね。
差支えなければ、ページのヘッダの内容を、そのまま見せてもらいたいんですけど。
回答のコメント(ここ)に貼り付けるときには、HTML のタグが解釈されちゃうので、貼り付ける内容の前後に、以下のようなおまじないを書いてください。


>|html|
(ここに、ページのヘッダの内容を貼り付ける)
||<

2012/09/17 12:40:01
id:nakanotaku

慣れないスマフォからですので、後ほどプログラムを全部貼り付けます。ありがとうございます。「おまじない」教えてくださって感謝感謝です!

2012/09/17 13:19:58

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

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

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

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

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません