2011年01月10日

【第29回】検索窓を別のサイドコンテンツに設置する

第27回からの検索ボックスの編集を続けます。

前回は、検索オプションのデフォルト設定を、Yahoo!ウェブ側から記事側に変更しました。

SD_028_01.JPG

これはこれでいいのですが・・・

「そもそも、検索ボックスを独立で設置する必要なくない?
どこか別の、例えば最近の記事ボックスとかに入っていれば良いような・・・」

って、思いません?

私だけでしょうかね?

ならば、その私だけかもしれない思いを形にしてみましょう!

ということで、今回は検索ボックスを、最近の記事ボックス内に設置してみます。

今回もHTML編集です。

★検索ボックスを別のサイドコンテンツに設置する方法★

Seesaaブログのコンテンツ画面検索のコンテンツHTMLを取得し、それを別のコンテンツのHTMLに貼りつける。

<手順1>
前回と同様、コンテンツ画面検索コンテンツHTML編集画面を開き、HTMLをコピーする。
コピーで取得するのは、HTMLのうちサイドコンテンツのタグを除く以下の青字部分。

<div class="sidetitle"><% content.title %></div>
<div class="side">
<% content.header -%>
<form method="get" action="http://search.yahoo.co.jp/search" class="sASform" name="form<% content.id %>" onSubmit="return sfcheck<% content.id %>()">
<table class="seesaaArticleSearch">
<tr>
<td colspan="5"><input value="" name="keyword" type="text" size="34" /> <input value="検索" type="submit" class="input-submit" /></td>
</tr>
<tr>
<td class="sASnone"><input type="radio" name="vs" value="" id="radio1" /></td>
<td class="sASweb"><label for="radio1">ウェブ</label></td>
<td class="sASnone"><input type="radio" name="vs" value="<% blog.page_url %>" id="radio2" checked="checked" /></td>
<td class="sASarticle"><label for="radio2">ブログ記事</label></td>
</tr>
</table>
<input type="hidden" name="fr" value="sb-sesa" /><input type="hidden" name="ei" value="Shift_JIS" />
</form>
<style type="text/css">
.seesaaArticleSearch{border-collapse:collapse;overflow:hidden;font-size:12px;text-align:left;}
.seesaaArticleSearch td{padding:0;}
.sASnone{width:7px;}
.sASnone img{border:none;background:none;border:solid 0px #000;}
.sASweb{width:65px;background:url(<% site_info.blog_url %>/img/ico_y.gif) no-repeat 0 3px;border:solid 0px #000;white-space:nowrap;}
.sASweb label{padding-left:25px;padding-right:5px;}
.sASarticle{width:40px;border:solid 0px #000;white-space:nowrap;}
.sASarticle label{padding-left:2px;}
.sASform{margin:0;padding:0;}
</style>
<script type="text/javaScript"><!--
function sfcheck<% content.id %>(){
if (document.form<% content.id %>.vs[0].checked){
document.form<% content.id %>.action='http://search.yahoo.co.jp/search';
document.form<% content.id %>.keyword.name='p';
}
if (document.form<% content.id %>.vs[1].checked){
document.form<% content.id %>.action='<% blog.page_url %>pages/user/search/';
document.form<% content.id %>.keyword.name='keyword';
}
return true;
}
//--></script>

<% content.footer -%>
</div>

<手順2>
設置先(ここでは最近の記事)のコンテンツHTML編集画面を開き、コピーして取得した検索ボックスのHTMLを設置したい箇所に貼りつける。

▼▼▼ 変更前 ▼▼▼
<div class="sidetitle"><% content.title %></div>
<div class="side">
<% content.header -%>
<% loop:list_article -%>
(<% article.createstamp | date_format("%m/%d") %>)<a href="<% article.page_url %>"><% article.subject | tag_break %></a><br />
<% /loop -%>
<% content.footer -%>
</div>

▼▼▼ 変更後 ▼▼▼
<div class="sidetitle"><% content.title %></div>
<div class="side">
<% content.header -%>
<form method="get" action="http://search.yahoo.co.jp/search" class="sASform" name="form<% content.id %>" onSubmit="return sfcheck<% content.id %>()">
<table class="seesaaArticleSearch">
<tr>
<td colspan="5"><input value="" name="keyword" type="text" size="34" /> <input value="検索" type="submit" class="input-submit" /></td>
</tr>
<tr>
<td class="sASnone"><input type="radio" name="vs" value="" id="radio1" /></td>
<td class="sASweb"><label for="radio1">ウェブ</label></td>
<td class="sASnone"><input type="radio" name="vs" value="<% blog.page_url %>" id="radio2" checked="checked" /></td>
<td class="sASarticle"><label for="radio2">ブログ記事</label></td>
</tr>
</table>
<input type="hidden" name="fr" value="sb-sesa" /><input type="hidden" name="ei" value="Shift_JIS" />
</form>
<style type="text/css">
.seesaaArticleSearch{border-collapse:collapse;overflow:hidden;font-size:12px;text-align:left;}
.seesaaArticleSearch td{padding:0;}
.sASnone{width:7px;}
.sASnone img{border:none;background:none;border:solid 0px #000;}
.sASweb{width:65px;background:url(<% site_info.blog_url %>/img/ico_y.gif) no-repeat 0 3px;border:solid 0px #000;white-space:nowrap;}
.sASweb label{padding-left:25px;padding-right:5px;}
.sASarticle{width:40px;border:solid 0px #000;white-space:nowrap;}
.sASarticle label{padding-left:2px;}
.sASform{margin:0;padding:0;}
</style>
<script type="text/javaScript"><!--
function sfcheck<% content.id %>(){
if (document.form<% content.id %>.vs[0].checked){
document.form<% content.id %>.action='http://search.yahoo.co.jp/search';
document.form<% content.id %>.keyword.name='p';
}
if (document.form<% content.id %>.vs[1].checked){
document.form<% content.id %>.action='<% blog.page_url %>pages/user/search/';
document.form<% content.id %>.keyword.name='keyword';
}
return true;
}
//--></script>

<% loop:list_article -%>
(<% article.createstamp | date_format("%m/%d") %>)<a href="<% article.page_url %>"><% article.subject | tag_break %></a><br />
<% /loop -%>
<% content.footer -%>
</div>

最近の記事のコンテンツHTMLをこのように修正すると、検索窓を設置することができます。

SD_029_01.JPG

いかがでしょうか。

検索ボックスを設置する/しない、およびどこに設置するかは、好みによって分かれると思います。
ただ、このように他のコンテンツに検索ボックスを設置する方法を知っておけば、自分の好きなデザインにするための自由度が増えると思います。

今回は以上です。

▼▼▼▼▼▼▼▼▼▼▼▼▼
参考になりましたら
クリック&応援をお願いします
にほんブログ村 ブログノウハウへ
▲▲▲▲▲▲▲▲▲▲▲▲▲

【PR】FXシステムトレードで着実に利益を重ねる長期資産運用方法o(^0^)o ほくほくFX
【PR】日々の運用成績やユーザーの情報満載のブログo(^0^)o ほくほくポートフォリオ
ラベル:検索 HTML
posted by o(^0^)o ほくほく at 18:15| Comment(1) | PCブログデザイン | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
こんにちは。この検索窓はほんとその通りですね。記事ボックスにあった方が便利、デフォルトも記事にするし。でも移動するとか、頭固くて思いつかなかったw このSeesaaブログのデザインを自由に変えてみようのブログも記事探しやすかったです。
いい記事ありがとです。
Posted by shiu at 2013年03月03日 01:39
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
※ブログオーナーが承認したコメントのみ表示されます。
×

この広告は180日以上新しい記事の投稿がないブログに表示されております。