FC2ブログのテンプレート工房

カスタマイズが簡単な共有テンプレートを配布しています。テンプレートをカスタマイズして自分だけのオリジナルブログを作りませんか?

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
[ --/--/-- --:-- ] スポンサー広告 | TB(-) | CM(-)

メニューバーに検索フォームを表示

以前に横メニューバーをブログタイトル下に表示する方法を紹介しましたが。

今回はこの中に検索窓を表示させる方法を紹介します。

HTMLを編集します。
赤い部分を加えてください。

<!--▼ メニューバー ▼-->
<ul id="menu_bar">
<li><a href="<%url>">トップページ</a></li>
<li><a href="<%url>archives.html">サイトマップ</a></li>
<li><a href="<%url>blog-entry-1.html">記事1</a></li>
<li><a href="<%url>blog-entry-2.html">記事2</a></li>
<li><a href="<%url>blog-category-1.html">カテゴリ1</a></li>
<li><a href="<%url>blog-category-2.html">カテゴリ2</a></li>
<li><a href="<%url>blog-category-3.html">カテゴリ3</a></li>
<li><form action="./" method="get">
<input type="text" name="q" value="" maxlength="200" class="msearch" />
<input type="submit" value=" 検索 " />
</form></li>

</ul>
<!--▲ メニューバー ▲-->


そしてスタイルシートの末尾に以下を加えてください。

/* メニューバーの検索窓 */
.msearch {
margin-left:20px; /* 左の余白 */
width:200px; /* 入力欄の幅 */
}


余白や幅の設定値はお好みにあわせて変えてください。
関連記事
[ 5590 ] 検索窓の設置について
lightframeを愛用させていただいております。

通常の公式プラグインでの検索フォーム設置とは別に、

「ページ下部(フッター上部)にフリースペースを設ける」
http://10plate.blog44.fc2.com/blog-entry-112.html

で出来たブログの最下部付近の(好きな)場所に検索窓を設置することは可能でしょうか?

試しに公式プラグインの【HTMLの編集】をコピペして、フリースペースの置きたい場所に設置しプレビューしてみたら、一応理想通りの表示はするものの、これが正しい方法なのか判断できない為、質問させていただきました。

また、

「意見・要望・感想・バグ報告等お聞かせ下さい vol.3」
http://10plate.blog44.fc2.com/blog-entry-275.html

に表示されているような記事内での検索窓設置も非常に魅力を感じております。

もし、可能でしたらご教示の程よろしくお願い申し上げます。
[ 2009/08/22 08:39 ] [ 編集 ]
[ 5591 ] > ろごきちさん
ページ下部に設けたフリースペースでも検索窓を設置することは可能です。

記事内での検索窓は、記事投稿時に検索用HTMLを貼付けるだけで表示できます。「改行の扱い」を「HTMLのタグのみ」で投稿するほうが簡単です。

コメントを含めた検索
http://10plate.blog44.fc2.com/blog-entry-195.html
[ 2009/08/22 21:11 ] [ 編集 ]
[ 5986 ]
この検索欄をもっと右に置きたいのですが何処を変更すればいいですか?
[ 2009/09/11 12:01 ] [ 編集 ]
[ 5991 ] > ZEROさん
スタイルシートを変更してください。

/* メニューバーの検索窓 */
.msearch {
margin-left:20px; /* 左の余白 */
width:200px; /* 入力欄の幅 */
}
[ 2009/09/11 18:57 ] [ 編集 ]
[ 5996 ]
数値を色々変更しても移動しません・・・。
どうしましょうか?
[ 2009/09/11 23:05 ] [ 編集 ]
[ 6000 ] > ZEROさん
ご使用のブラウザとURLを教えてください。
[ 2009/09/12 00:03 ] [ 編集 ]
[ 6011 ]
[ 2009/09/12 16:16 ] [ 編集 ]
[ 6015 ] > ZEROさん
スタイルシートのコメントアウトの前に不必要なドット「.」があります。
これを取り除いてください。

./* メニューバーの検索窓 */
[ 2009/09/12 17:50 ] [ 編集 ]
[ 6109 ]
できました!!
有り難うございます。
後出来れば検索する空白の部分の少し右側にちょっとした画像を入れてみたいのですがどうすればいいですか?
例:
http://gamehacksforraczip.blog53.fc2.com/
[ 2009/09/19 14:09 ] [ 編集 ]
[ 6118 ] > ZEROさん
検索フォームがあるリストに
<li class="lis">
とクラスを設定し、スタイルシートの末尾に以下を加えてください。

.lis {
background-image: url("画像URL");
background-repeat: no-repeat;
background-position: 20px 5px; /* 左余白、上余白 */
}
[ 2009/09/20 00:03 ] [ 編集 ]
[ 6128 ]
<li><form action="./" method="get">
<input type="text" name="q" value="" maxlength="200" class="msearch" />
<input type="submit" value=" 検索 " />
<li class="lis">
</form></li>
</ul>

このように付け足してみましたが
こんな感じですか?
[ 2009/09/20 21:18 ] [ 編集 ]
[ 6133 ] > ZEROさん
違います。フォームを囲んでいるリストにクラスを設定するのです。

<li class="lis"><form action="./" method="get">
[ 2009/09/21 01:03 ] [ 編集 ]
[ 6283 ]
iPhone(標準ブラウザ)からブログをみるとなぜかブログタイトルの下に表示ニューバーを設置し、検索フォームの位置しているのですがてしまい、メニューバーが変なところに移動してします・・・
ttp://art11.photozou.jp/pub/137/264137/photo/26973399.v1254151686.jpg
PCのブラウザだとこのようにずれたりしないのですが何とかできないでしょうか?
[ 2009/09/29 00:42 ] [ 編集 ]
[ 6293 ] > Geckoさん
スタイルシートの以下の数字を小さくしてもこの現象が見られますか?

/* メニューバーの検索窓 */
.msearch {
margin-left:20px; /* 左の余白 */
width:200px; /* 入力欄の幅 */
}
[ 2009/09/29 23:32 ] [ 編集 ]
[ 6469 ] Googleフォーム
Google検索フォームを表示したいのですが、どうやっても崩れてしまいます。どうすればいいでしょうか?

[ 2009/10/14 00:58 ] [ 編集 ]
[ 6473 ] > Tさん
この記事を参考にして、メニューバー全体を<div id="layer_base"></div>で囲み、その中の検索スクリプトを<div id="layer_1"></div>で囲んでみてください。

画像の上に文字等を重ねる
http://10plate.blog44.fc2.com/blog-entry-317.html
[ 2009/10/15 00:10 ] [ 編集 ]
[ 8718 ] 承認待ちコメント
このコメントは管理者の承認待ちです
[ 2010/07/15 08:37 ] [ 編集 ]
コメントの投稿









管理者にだけ表示
※現在カスタマイズに関するサポートを休止中です。
表示が崩れる場合は表示が崩れる原因の調査手順をお試しください。
その他の問題はFC2ユーザーフォーラムにお問い合わせください。
トラックバック
この記事のトラックバックURL

ブログ内検索1
プロフィール

Author:いたお
更新は非常にマイペースです
現在休止中です

当サイトはリンクフリーです。

いたおの他の運営サイト
カレンダー
09 | 2016/10 | 11
- - - - - - 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 - - - - -
なんでもスクロール
このように
縦に長く伸びた
プラグインを
スクロールバーによって
一定の長さに
抑えることが
出来ます。

※スクロールさせる文字やプラグインのHTMLをここに
今日の日付入りカレンダー

09 | 2016/10 | 11
- - - - - - 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 - - - - -
ユーザータグ


△ ページトップへ戻る
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。