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

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

タイトルの横に検索窓を設置する

タイトルが左に寄せられていると、右にスペースが空きます。
このスペースに検索窓を設置しるカスタマイズを紹介します。

HTMLのh1タグの下に以下の記述を加えてください。

<div class="top_search">
<form action="./" method="get">
<input type="text" size="20" name="q" value="" maxlength="200" />
<input type="submit" value=" 検索 " />
</form>
</div>

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

.top_search {
float:right;
margin-top:10px; /* 検索窓の上間隔 */
margin-right:20px; /* 検索窓の右間隔 */
}

h1 {
float:left;
}

ここから更に加える記述がテンプレートにより異なります。

standardの場合

h2 {
clear:both;
}

lightframeの場合

.intro {
clear:both;
}

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

検索窓の位置は検索窓の上間隔、検索窓の右間隔の数値を変更して調整してください。

2010/01/03 追記HTMLに不備があったので修正しました。
</form>が欠けていました。誠に申しわけありません m(__)m

関連記事

[ 2009/04/29 23:50 ] カスタマイズ共通カスタマイズ | TB(1) | CM(25)

≪ カレンダーの中央寄せ | HOME | コメント投稿・編集欄のレイアウト ≫

[ 4023 ]

さっそくのご回答ありがとうございました。
その後タイトル下に横メニューも設置して、順調にカスタマイズを進めております。
すでに十分見やすいブログになったと思っておりますが、細かな疑問が浮かんだので、再度質問させてください。

ヘッダー内で、ブログタイトル文字を中央に、検索窓を右端に設置することは可能でしょうか？
現在のところは、スタイルシートに以下のように書き込むことで対応しています。
h1 {
float:left;
margin-left:420px;
}

しかしこれではサイト幅が変わったときにわずかですが中央からずれてしまいます。
サイト幅が変わることが多いブログなので、できれば気を配りたい部分ではあるのですが、可能でしょうか？
よろしくお願いいたします。

[ 2009/04/30 10:11 ] [ 編集 ]

[ 4029 ] > rothmansordunhillさん

HTMLに加える記述をh1の下ではなく、上に挿入し、スタイルシートの末尾に

h1 {
clear:right;
}

と加えてみてください。

[ 2009/04/30 18:36 ] [ 編集 ]

[ 4030 ]

成功しました。立て続けに２回も質問してお手をわずらわせてしまい、申しわけありません。
迅速かつ丁寧な対応、ありがとうございます。

[ 2009/04/30 19:44 ] [ 編集 ]

[ 4841 ] 検索フォームの表示件数について。

いつもお世話になっています。質問よろしくお願いします。

自分のブログの左上にあります検索フォームでの検索結果が現在、10件ずつ表示されるようなっています。これを好きな数だけ表示させることは可能でしょうか?
例えばその検索結果に該当する記事が50件あるのであれば40件表示させて、残りは次のページで表示という感じで。

加えて、検索結果の該当記事が300件あるとすると、一番下の次のページというリンクの部分を1 2 3 4 5 6のような感じで表示できないでしょうか？ヤフーやGoogleで検索した時の様な感じにしたいのですが。

ご回答よろしくお願いします。

[ 2009/07/06 20:38 ] [ 編集 ]

[ 4842 ] ▼AKさん

検索結果の表示件数は
管理画面→環境設定の変更→ブログの設定→記事(検索結果)
で出来ます。

「次ページへ」の言葉を変更することは出来ますが、Google等のような設置は2ページ以降目へ飛ばす変数が無いので出来ないと思います。

[ 2009/07/06 22:34 ] [ 編集 ]

[ 4845 ] > AKさん、ちゃんさん

ちゃんさん、ありがとうございます＾＾

AKさん、ちゃんさんのおっしゃる通り、検索結果の表示件数は環境設定で指定できます。

Googleのような12345・・・というページ移動リンクは難しいと思っていたのですが、なんと「ページナビ」という共有プラグインがありました。

空があんなに高い: ページ移動スクリプト
http://dongpan.blog95.fc2.com/blog-entry-255.html

記事リストにページナビゲーションを追加 - hatena chips
http://hatenachips.blog34.fc2.com/blog-entry-115.html

上記説明ページを読んでも解ると思いますが、私もそのうちにこの共有プラグインを取り上げた記事を書こうと思います。

[ 2009/07/06 23:55 ] [ 編集 ]

[ 4847 ] ありがとうございます。

ちゃんさん、いたおさん、ありがとうございました。

環境設定で指定できたなんてお恥ずかしいです。次からはきちんと確認して質問します。

一応１２３４５と表示する設定はできたのですが、Javaスクリプトを外部ファイル化してHTMLに設定しようとしたのですが、なぜかできませんでした。

いたおさんの記事楽しみにしています。

ともあれ一応理想の形にできたのでよかったです。お二人ともありがとうございました。

[ 2009/07/07 03:49 ] [ 編集 ]

[ 4848 ] ▼いたおさん・AKさん

共有プラグインであったんですね
ちゃんと調べれば良かったです(^^;)

記事内設置(記事を12345…と分割表示)の方法で、FCafe様配布「DivideEntry」は知っていましたが、検索結果の該当記事は無理だと思い込んでいました。

私こそお恥ずかしい(汗)

[ 2009/07/07 08:45 ] [ 編集 ]

[ 4854 ] > AKさん、ちゃんさん

> AKさん
では近日中に記事にしますね。

> ちゃんさん
いえいえ、私もこれは無理だと思っていたので、見つけたときは驚きました＾＾；
制作した方は凄いです。

[ 2009/07/08 00:49 ] [ 編集 ]

[ 5764 ] 検索窓ではなく画像を表示することは？？

タイトルが左に寄せられていると右にスペースが空きますが、検索窓ではなく、画像を表示させることはできるのでしょうか？？
すみません、教えてください。

[ 2009/09/02 15:05 ] [ 編集 ]

[ 5767 ] >じゃんさんへ

可能だと思います。用途にもよりますが、わたしがよく見るのは編集ボタン　もしくは　はてなブックマークの表示です。
固定表示ですけど。

ちゃんさんの
http://tanpoko.blog70.fc2.com/blog-entry-748.html
指定が綺麗です。

ランダム画像ということですと、いたおさんにお任せします。

[ 2009/09/02 15:49 ] [ 編集 ]

[ 5770 ] ▼じゃんさん

タイトル＝ブログ名ですよね？

【ヘッダー背景に画像を表示する】
http://10plate.blog44.fc2.com/blog-entry-105.html

[ 2009/09/02 15:53 ] [ 編集 ]

[ 5771 ] >ちゃんさん

誤解してしまったようです♪
フォロー有難うございます。

[ 2009/09/02 16:01 ] [ 編集 ]

[ 5787 ] > じゃんさん、ちゃんさん、通行人さん

> じゃんさん
テンプレートによりますが、lightframeをお使いなら、ちゃんさんが教えてくれた記事を参考にしてください。

> ちゃんさん、通行人さん
ありがとうございます＾＾

[ 2009/09/02 20:34 ] [ 編集 ]

[ 7643 ] 個別記事内で検索を行うと、コメント送信になってしまう

こんにちは、お世話になっております。

こちらの手順に従ってタイトルの検索窓を設置する事が出来ました。
しかし、下記のような個別の記事から検索を行うとコメント送信になってしまいます。

http://mac8080.blog88.fc2.com/blog-entry-310.html

検索ボタンがコメント送信ボタンと同様の事をしてるのは分かるのですが、どのように解決すればよろしいでしょうか。

[ 2010/01/02 18:23 ] [ 編集 ]

[ 7647 ] > macさん

申しわけありません。記事に不備がありました。
赤い部分を加えてください。

<div class="top_search">
<form action="./" method="get">
<input type="text" size="20" name="q" value="" maxlength="200" />
<input type="submit" value=" 検索 " />
</from>
</div>

[ 2010/01/02 23:04 ] [ 編集 ]

[ 7660 ] まだ検索が出来ません

いたおさん、ご指摘ありがとうございます。
</from>を追加しましたが、
個別記事のページから検索が出来ない状態のままでした。

HTMLの部分は下記の場所、スタイルシートは末尾に記述しています。
何か問題があるのでしょうか。

HTML

<div id="header_outline">
<div id="header_body">
<h1><a href="<%url>" title="<%blog_name> <%sub_title> トップページへ"><%blog_name> <%sub_title></a></h1>

<div class="top_search">
<form action="./" method="get">
<input type="text" size="25" name="q" value="" maxlength="200" />
<input type="submit" value=" 検索 " />
</from>
</div>

<div class="intro"><%introduction></div>
</div>
</div>


スタイルシート
.top_search {
float:right;
margin-top:10px; /* 検索窓の上間隔 */
margin-right:20px; /* 検索窓の右間隔 */
}

h1 {
float:left;
}

.intro {
clear:both;
}

[ 2010/01/03 06:25 ] [ 編集 ]

[ 7661 ]

プラグインの検索フォームで
検索ボタンを横にしたいんですか、どうやってできますか？

後この記事には関係ないことですが
メニューバーのボタンにマウスを乗せるとタイトル画像に
リンクを貼るやり方を教えて下さい。
http://roxas0914.blog56.fc2.com/
上のブログのセナさんのようにコメントにマウスを合わせると
タイトル画像に最新コメントが載ったり．．．
勝手にURL載せたらいけないと思うので見たら削除して下さい。
お願いします。

[ 2010/01/03 10:00 ] [ 編集 ]

[ 7669 ] > macさん、夜露死苦さん

> macさん
申しわけありません。私がスペルミスをしていました。
</from>
を
</form>
としてください。

> 夜露死苦さん
「カテゴリー＋月別アーカイブ」のプラグインHTMLに以下の様に箇所があるはずです。

<input type="text" size="20" name="q" value="" maxlength="200"><br>
<input type="submit" value=" 検索 ">

<br>を削除し、size="20"の値を小さくしてみてください。

メニューバーのしくみは良く解りません。申しわけありません。

[ 2010/01/03 18:16 ] [ 編集 ]

[ 7679 ] ありがとうございます。

無事、記事内から検索できるようになりました。

margin-top:10px; /* 検索窓の上間隔 */
margin-right:20px; /* 検索窓の右間隔 */

検索窓を右端に設置したいのですが、
上記の数値を変更しても、現在の位置から変わりません。

[ 2010/01/03 19:56 ] [ 編集 ]

[ 7681 ] > 冒険者(mac)さん

コメントアウトはHTMLとスタイルシートで異なります。スタイルシートの中にHTMLのコメントアウトがあるのでスタイルシート用に直してください。




↓

/* ▼▼ 検索 ▼▼ */
/* ▲▲ 検索 ▲▲ */

あと名前は統一してくれるほうが助かります。

[ 2010/01/03 20:31 ] [ 編集 ]

[ 7682 ] 解決しました。

こちらの記述ミスにも対応して頂いてありがとうございます。
色々勉強になりました。

[ 2010/01/03 20:45 ] [ 編集 ]

[ 7684 ] > macさん

解決して良かったです＾＾

[ 2010/01/03 21:11 ] [ 編集 ]

[ 7828 ] "コメントが空欄です"エラー解決。

>></form>が欠けていました。

これでしたか！
コメント投稿が、投稿時に急に"コメントが空欄です"のダイアログ窓の出現により一切受け付けられなくなっていることをブログ読者からの指摘により気付き、どうしたものやらと頭を抱えていたのでした。

いたお様の各種カスタマイズを施しまくりで、もはやデフォルトのテンプレートへ戻すことすら躊躇していたので、この一行の追記で現状復旧できてホッとしました。

タグ一つで思いがけないところにも影響が出るのですね、私も心します。。。

[ 2010/01/11 02:11 ] [ 編集 ]

[ 7834 ] > ひまわりさん

記事の不備により迷惑をかけてしまい申しわけありません。もし他にも何かバグと思われるものがあれば知らせてくださいね。

[ 2010/01/11 19:03 ] [ 編集 ]

コメントの投稿