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

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

●質問者: 中野拓
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● うぃんど
●180ポイント ベストアンサー

一例です。

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

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

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

form#search_box {
 position:relative;
 top:-375px;
 left:2px;
 width:20em;
 height:0px;
}

うぃんどさんのコメント
見直してみると、 h1タグのmaeginで相対指定を利用しているので、 ブラウザで拡大縮小するとズレますね。 form#search_boxにも下記のようにして、 まずはマージンの部分を相殺してから、 top値を調整したほうがよさそうです。 >|css| form#search_box { position:relative; margin:-2.8em 0em 0em; top:-375px; left:2px; width:20em; height:0px; } ||<

中野拓さんのコメント
ご回答ありがとうございます。 お二方のともためしてみましたが、うまくいかないようです。今は、windofjulyさんの書いたのを参考に、ヘッダを <hatena name="searchform"> <form id="search_box" 以降はそのままで変更ありません。 form#search_box { position:relative; margin:-2.8em 0em 0em; top:-375px; left:2px; width:20em; height:0px; } <div class="main"> <p><span style="font-weight:bold;color:#000066;" class="deco">中野拓のブログ。書評や映画評を中心に。このページへのリンクは自由です。</span></p> <p><span style="font-weight:bold;color:#000066;" class="deco"><a href="https://twitter.com/#!/nakanotaku">Twitterへのリンク</a></span></p> <p><span style="font-weight:bold;color:#000066;" class="deco"><a href="http://www.facebook.com/profile.php?id=791540322">Facebookへのリンク</a></span></p> としていますが、元のまま、変わりません。。。

中野拓さんのコメント
(そのままここに貼り付けたらちゃんと表示されないんですね…)form#search_box { の前には、 <hatena n...="searchf..m"(鍵閉じる) (鍵始まり)...id="search_box" 以降は...。 と書いています。

中野拓さんのコメント
今気づいたのですが、フッタに書いてた、カレンダーや記事履歴が勝手にずれてしまっています。触ったのはヘッダだけなのに…。 プログラム言語の仕組みが全然わからないです…。

うぃんどさんのコメント
(1)疑問とお願い いつ新しいformが増えたのですか? >|| <form id="search_box" class="main"> ||< 1つの話が終わる前に他の改造を加えると何が原因なのかがわからなくなって、 こちらとしても、どう対応すればよいのか困ります…… 検索窓を移動させたいという要望であれば、まずはそれだけに集中しませんか? 一度にあれもこれもでは、お教えしたくても無理です。 まずは質問を投稿した時点に戻して、それから下記を行ってみてください。 (2)ヘッダの欄に書くのはHTMLタグだけです。 idを挿入すべき箇所は下記になります。 >|| <form id="search_box" class="hatena-searchform" action="/nakanotaku/searchdiary" method="GET"> ||< 検索窓は1つだけだったので、 どこに書くべきかを端折ったのが失敗のようで、すみませんでした。 (3)スタイルはスタイルシートの欄に書きます。 この書き込みをしている今現在、スタイルの書き込みは以前ご質問でのh1だけしか見当たりません。 今回のスタイルシートは以前h1のスタイルシートの続きに書きます。

中野拓さんのコメント
ご回答ありがとうございます。(2)のをヘッダの最初に、スタイルシートの最後にform#search_box以下を貼り付けたのですが、検索窓や記事履歴などすべて消えてしまいました。 慣れないスマフォからですので、後ほどプログラムを全部貼り付けます。ありがとうございます。

中野拓さんのコメント
以下ヘッダとスタイルシートです。 >|html| <form id="search_box" 以降はそのままで変更ありません。 class="hatena-searchform" action="/nakanotaku/searchdiary" method="GET"> >|html| <div class="main"> <p><span style="font-weight:bold;color:#000066;" class="deco">中野拓のブログ。書評や映画評を中心に。このページへのリンクは自由です。</span></p> <p><span style="font-weight:bold;color:#000066;" class="deco"><a href="https://twitter.com/#!/nakanotaku">Twitterへのリンク</a></span></p> <p><span style="font-weight:bold;color:#000066;" class="deco"><a href="http://www.facebook.com/profile.php?id=791540322">Facebookへのリンク</a></span></p> ||< >|html| h1 { font-family: 'Times New Roman'; font-style: italic; font-size: 300%; /* 文字サイズ指定 */ height: 375px; background-image: url("http://d.hatena.ne.jp/images/diary/n/nakanotaku/titleimg.png"); background-position: right; background-repeat:no-repeat } form#search_box { position:relative; top:-375px; left:2px; width:20em; height:0px; } ||<

うぃんどさんのコメント
コードはダイアリーを見ればわかるのでスマホから送らなくても大丈夫です。 (私がモタモタしている間に投稿なさったようで…応答悪くてごめんなさい) (1)ヘッダ欄の勘違い部分 私が回答した早朝6時ごろには、ヘッダに下記の様なformタグが入ってました。 >|html| <form style="position:relative; top:-140px; margin:-1em 0em 0em; left:2px; width:20em; height:0px;" class="hatena-searchform" action="/nakanotaku/searchdiary" method="GET"> <input class="hatena-searchform searchform-word" type="text" value="" name="word"> <input class="hatena-searchform searchform-button" type="submit" value="検索" name=".submit"> <br> <label class="searchform-label-detail"> <input class="searchform-radio" type="radio" checked="checked" value="detail" name="type"> 詳細 </label> <label class="searchform-label-list"> <input class="searchform-radio" type="radio" value="list" name="type"> 一覧 </label> </form> ||< だから、私は、上記にid="search_box"を書き加えて下記のようにすると回答しました。 違うのはid="search_box"が1箇所有るか無いかだけなんです。 >|html| <form id="search_box" style="position:relative; top:-140px; margin:-1em 0em 0em; left:2px; width:20em; height:0px;" class="hatena-searchform" action="/nakanotaku/searchdiary" method="GET"> <input class="hatena-searchform searchform-word" type="text" value="" name="word"> <input class="hatena-searchform searchform-button" type="submit" value="検索" name=".submit"> <br> <label class="searchform-label-detail"> <input class="searchform-radio" type="radio" checked="checked" value="detail" name="type"> 詳細 </label> <label class="searchform-label-list"> <input class="searchform-radio" type="radio" value="list" name="type"> 一覧 </label> </form> ||< ところが今はinputやlabelなどが全て消えて下記だけになってしまっています。 だからデザインが崩れています。 >|html| <form action="/nakanotaku/searchdiary" method="GET" class="hatena-searchform" id="search_box"> ||< (2)スタイルシート欄で文字化け スタイルを書く場所はOKになったのですが、 コピペで文字化けして以下のようになってしまっています。 スマホでやっているからかもしれません。 スマホで行うならば先頭の空白を削除して左詰にしてしまいましょう。 >|css| form#search_box { &#160;&#160;&#160;position:relative; &#160;&#160;&#160;margin:-2.8em 0em 0em; &#160;&#160;&#160;top:-375px; &#160;&#160;&#160;left:2px; &#160;&#160;&#160;width:20em; &#160;&#160;&#160;height:0px; } ||<

中野拓さんのコメント
おかげさまで、ページの崩れは直りました! ただ、検索窓を、トップの黒い細い横向きのバーの上に載せるという当初の目標はまだ実現できていないようです。もう少し付き合っていただいて、ご助言賜れればと思います。 プログラムの言語の意味はほとんど分かっていないです。本を買って近くに置いておこうと思っています。

うぃんどさんのコメント
私のダイアリーでテストしてたので朝のコードが残ってたのですが、 私のダイアリー用に無用なコードが入ってました。重ね重ねすみません。 formタグの中の下記の部分を消してください。 >|| style="position:relative; top:-140px; margin:-1em 0em 0em; left:2px; width:20em; height:0px;" ||<

中野拓さんのコメント
ありがとうございます!!無事解決しました。ほんとうにほんとうにありがとうございました!!!

2 ● a-kuma3
●20ポイント

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

<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>
 ...

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


中野拓さんのコメント
ありがとうございます。ご回答して下さった方法をためしてみましたが、検索窓が手前に表示されただけで、位置は全くうごきませんでした…。

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

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

●質問をもっと探す●



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