Paroday

Paroday：ニュースやアニメのレビュー、FC2ブログのテンプレート・プラグインなどを配信しています。

もしかして Parody ではありませんか？　yes

FC2ブログ検索バーの仕様とデザイン・表示の変更方法

FC2検索バー

　2011年3月10日からサーバごとに順次導入されています。ブログ検索バーは強制広告の類ではないため、ユーザ側で非表示にすることができます。利用中のテンプレートによってはスタイルシートなどを変更しないと、正常に表示されなかったり、レイアウトが崩れることがあるかもしれません。

FC2総合インフォメーション - 検索バーの導入のお知らせ / サンプル

主な仕様 : 表示非表示の方法と挿入されるコード

　設定は [環境設定の変更]→[ブログの設定]→[検索バーの設定] で行います。

　デフォルトは「利用する」で、検索先の初期設定は「Web全体」です。

　「利用する」にすると、すべてのページ上部に検索バーが表示されます（検索エリア未対応のFC2ブログテンプレート検索ページなどは除く）。テキストボックスの初期値には最近の人気キーワードが適当に入ります。

　検索先の「このブログ内」は自分のブログ内を通常通り検索します（q=keyword）。

　「Web全体」（ブログ上の表記は『ウェブ全体』）はFC2検索で検索します。結果は別ウインドウで表示されます。

　FC2検索は上下に最大3つの広告が表示され、そのあいだに検索結果が表示されます。

「blog」を検索

　Googleなどと同じように、頭に「-」をつけて特定のキーワードを除外したり、サイト内を検索することができます。さすがに広告のキーワードの除外まではできいないようです。

「blog -ameba」amebaを除外して検索
「blog site:blog.fc2.com」blog.fc2.com内を検索

文字化け

HTMLコード

　検索バーのコードが挿入される個所は「<body>」直後です。

<div id="sh_fc2blogheadbar">
 <div class="sh_fc2blogheadbar_body">
  <div id="sh_fc2blogheadbar_menu">
   <a href="http://blog.fc2.com/" title="FC2ブログ">
    <img src="https://blog-imgs-1.fc2.com/image/headbar/sh_fc2blogheadbar_logo.png" alt="FC2ブログ" />
   </a>
  </div>
  <div id="sh_fc2blogheadbar_search">
   <form name="barForm" method="get" action="" target="blank" onsubmit="if(this.range.options[0].selected == false) {this.action='http://search.fc2.com/';target='blank';} else {this.action='./';target='';}">
    <input class="sh_fc2blogheadbar_searchform" type="text" name="q" value="沢尻会見" maxlength="30" onclick="this.style.color='#000000';" onfocus="this.select();" onblur="this.style.color='#999999'" />
    <select class="sh_fc2blogheadbar_searchselect" name="range">
     <option value="blog" >このブログ内</option>
     <option value="web" selected="selected">ウェブ全体</option>
    </select>
    <script>
    <!--
    document.barForm.range.options[1].selected=true;
    -->
    </script>
    <input type="hidden" name="is_adult" value="false" />
    <input type="hidden" name="s" value="y" />
    <input type="hidden" name="charset" value="eucjp-win" />
    <input class="sh_fc2blogheadbar_searchbtn" type="submit" value="検索" />
   </form>
  </div>
  <div class="sh_fc2blogheadbar_link">
      <a href="https://secure.id.fc2.com/bokin" title="東北地方太平洋沖地震の募金につきまして" target="_blank">東北地方太平洋沖地震の募金につきまして</a>
  </div>
 </div>
</div>
<div class="sh_fc2blogheadbar_clear"></div>

　サーバ番号なしの新blogサーバ（blog.fc2.com）では、eucjp-winがutf-8になります。

　テキストリンク部分（sh_fc2blogheadbar_link）については、震災により後から追加されたものなので、募金が終わると、何も表示されなくなるかもしれません。あるいはFC2の告知スペースになるのかもしれません。

スタイルシート

　外部ファイルです。挿入箇所は「</head>」直前です。

現在 : http://blog-imgs-1.fc2.com/css/common/headbar/110315style.css
初期 : http://blog-imgs-1.fc2.com/css/common/headbar/style.css

　スタイルシートも募金の告知以降は110315style.cssに変更されています。サーバ番号なしの新サーバ（blog.fc2.com）では呼び出すファイルが異なるかもしれません。

<link href="https://blog-imgs-1.fc2.com/css/common/headbar/110315style.css" rel="stylesheet" type="text/css" media="all" /></head>

　直前のため、テンプレートで使用しているスタイルシートよりも後に挿入されることに注意します。例えば、同じスタイルのセレクタをテンプレートで指定しても、後に挿入された外部ファイルのスタイルが優先されます。

#sh_fc2blogheadbar .sh_fc2blogheadbar_body {
 height: 30px;
}

　とテンプレートで指定しても検索バーの高さは26pxのまま変わりません。

body #sh_fc2blogheadbar .sh_fc2blogheadbar_body {
 height: 30px;
}

　とするなどして優先順位をあげる必要があります。末尾に height: 30px !important; をつけると確実です。

デザインコード作成

FC2ブログ FC2からの告知
全体　

背景開始色 背景終了色
下線色 グラデ無背景色
未対応ブラウザ
テキストボックス 線色 ロゴ
背景色 文字色
セレクトボックス 線色 告知リンク
背景色 文字色
検索ボタン 線色 検索選択
背景色 文字色
告知リンク　 左位置（数値） 外背景
文字色 hover
サンプル ■　■　■　■　■　■　■　■

▲生成されたコードをスタイルシート欄に貼り付けます。

　[OK]ボタンは押さなくても反映されます。値は半角入力です。色の値は16進数[0-9a-f]の3桁か6桁です。「□未対応」はグラデーションをサポートしていないブラウザで見たときの確認です。「グラデ無背景色」で指定した色が反映されます。

　検索選択を表示しないにすると、管理画面の[検索先の初期設定]で指定した検索に限定されます。

　文字サイズなどの個別のスタイルについては、デザイン変更をご覧ください。IEでセレクトボックスの線の色を変えるときはdocumentModeの変更を。

デザイン変更

　必要なコードをテンプレートのスタイルシート欄に追加します。まとめてデザインを指定する場合は、デザインコードを作成してください。

文字サイズの変更

　最初の 11px がテキスト（リンク）の文字サイズで、後の 11px はフォーム内（テキストボックスなど）の文字サイズです。

#sh_fc2blogheadbar {
 font-size: 11px !important;
}
#sh_fc2blogheadbar input, #sh_fc2blogheadbar select {
 font-size: 11px !important;
}
フォントの変更

#sh_fc2blogheadbar * {
font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif !important;
}

　!important を使いたくないとき。

#sh_fc2blogheadbar,
body #sh_fc2blogheadbar #sh_fc2blogheadbar_search .sh_fc2blogheadbar_searchform,
body #sh_fc2blogheadbar #sh_fc2blogheadbar_search .sh_fc2blogheadbar_searchselect,
body #sh_fc2blogheadbar #sh_fc2blogheadbar_search .sh_fc2blogheadbar_searchbtn {
font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
}

検索バーの高さを変更する
html { top: 30px !important; }
.sh_fc2blogheadbar_body { height: 30px !important; }
html body { margin-top: 30px\9; background-position-y: 30px; }
最小の横幅を変更する
body #sh_fc2blogheadbar { min-width: 700px; }
FC2のロゴを非表示にする
#sh_fc2blogheadbar_menu {display: none;}
FC2の告知テキストリンクを非表示にする
.sh_fc2blogheadbar_link {display: none;}
検索のセレクトボックスを非表示にする
#sh_fc2blogheadbar select {display: none;}
全体の下線と背景を変更する
body #sh_fc2blogheadbar {
 border-bottom: 1px #dddddd solid;
 background: #f6f6f6 !important;
}

　背景を画像にする。

body #sh_fc2blogheadbar {
 border-bottom: 1px #dddddd solid;
 background: #f6f6f6 url(画像アドレス) left top repeat !important;
}
テキストボックスのスタイルを変更
body #sh_fc2blogheadbar #sh_fc2blogheadbar_search .sh_fc2blogheadbar_searchform {
 プロパティを指定
}

　2pxの余白をつけて、入力欄を広げる。

body #sh_fc2blogheadbar #sh_fc2blogheadbar_search .sh_fc2blogheadbar_searchform {
 padding: 2px;
}

　クリック時などに文字色を変更しない場合は color に !important をつける。

body #sh_fc2blogheadbar #sh_fc2blogheadbar_search .sh_fc2blogheadbar_searchform {
 color: #000000 !important;
}
セレクトボックスのスタイルを変更
body #sh_fc2blogheadbar #sh_fc2blogheadbar_search .sh_fc2blogheadbar_searchselect {
 プロパティを指定
}

　IEでも線の色を変更するときは、使用しているテンプレートHTMLの <head> の直後に以下を追加。documentModeを8以上にします。利用しているテンプレートによってはデザインに影響がでる可能性があります。FC2ブログは2010年5月末からレスポンスヘッダでIE=EmulateIE7を指定しています。

<head>
<meta http-equiv="X-UA-Compatible" content="IE=8" />
ボタンのスタイルを変更
body #sh_fc2blogheadbar #sh_fc2blogheadbar_search .sh_fc2blogheadbar_searchbtn {
 プロパティを指定
}

検索の動作変更

　
　
URL
テキスト

　[OK]ボタンは押さなくても反映されます。生成されたコードは利用しているテンプレートHTMLの <body>内 の適当な位置に追加します。あるいは、どのページでも表示しているプラグイン（最新記事など）のHTMLに貼り付けます。

[例]

<body>
←
←
</body>

　テンプレートを頻繁に変更したり、コードを追加するのが面倒な場合は、プラグインのHTML内に貼り付けると楽です。大抵のテンプレートで使用されていると思われるプラグイン1に属するプラグインを推奨します。

　自分のブログのHOMEリンクを表示するときは [URL] に「./」、[テキスト] に「HOME」を入れて、同じウインドウで開くをチェックします。

　リンクの位置は生成されたコードの下から4行目あたりにある次の箇所を変更します。5pxが上部からの距離で、120pxが左からの距離です。

a.style.top='5px';a.style.left='120px';

　FC2のロゴやテキスト（リンク）を非表示にするときは、デザイン変更やデザインコード作成より、非表示にするコードをスタイルシートに追加してください。

　外部ファイルを利用する場合は、<!-- --> 内のコードをコピーして、jsファイルに保存します。ファイルを設置する場所は、head要素内ではなく、body要素内です。

不具合・デザインの崩れ

　細かなデザインの崩れについては、個別の内容になるため、省きます。

テンプレートによっては検索バーのスタイルシートが読み込まれない

　この不具合は2011年3月24日に調整を確認しています。現在は大文字でも挿入されます

　テンプレートHTMLを </HEAD> で保存しても、実際に出力されるときには、 </head> に置換されます。これにより、スタイルシートが挿入されるようになりました。

　ただし、開始タグ <HEAD> については置換されず、そのまま表示されます。

　</head> がないとスタイルシートは読み込まれません。これはすべて小文字の場合に限定されます。headの一部またはすべてが大文字になっているテンプレートでは出力されません。

<link href="https://blog-imgs-1.fc2.com/css/common/headbar/110315style.css" rel="stylesheet" type="text/css" media="all" />
</head>


</HEAD>

　大文字が使われている場合は </head> に変更する必要があります。

背景やページ上部などのデザインが崩れる

　背景の表示がおかしい場合は、テンプレートのスタイルシートで指定している背景に !important をつけるなどします。

body {
 background: url(画像) right bottom !important;
}

body {
 background-image: url(画像);
 background-position: right bottom !important;
}
html { background: url(画像) !important; }

html { background: #000000 !important; }

　IEでページ上部が変に重なっているときは、検索バーの高さを加えた次のようなコードをスタイルシートに追加すると、どうにかなるかもしれません。数値は適宜変更してください。marginの方は使えないかもしれません。細かな点はテンプレートを見てみないとわかりません。

html body { padding-top: 27px\9; }

html body { margin-top: 50px\9; background-position-y: 50px; }
ウェブ全体の検索ページが正常に表示されない

　この不具合は2011年3月24日に修正を確認しています。現在は正常に表示されます

　検索キーワードの末尾に半角・全角スペースがあると、FC2のスポンサー広告が文字化けします。

　「blog 」の検索結果

文字化け

　スペースの後に「/」があると、検索キーワードによってはb要素のネストが壊れます。

　「あ　/」の検索結果

太字

　スペースの後に「\」があると、ページが完全に壊れます。

warning

テンプレートや記事によっては複数挿入されることがある

　検索バーのコードは </head> と <body> に反応して挿入されるため、複数ある場合は複数挿入されます（adsensec.jsが挿入されると同様）。ただし、複数あるbody要素については記述箇所やclass、id属性などの有無によって、挿入されない場合もあります。

サンプル 

</head>
<!--
</head>
<body>
-->
<body>

<link href="https://blog-imgs-1.fc2.com/css/common/headbar/110315style.css" rel="stylesheet" type="text/css" media="all" />
</head>
<!--
<link href="https://blog-imgs-1.fc2.com/css/common/headbar/110315style.css" rel="stylesheet" type="text/css" media="all" /></head>
<body><div id="sh_fc2blogheadbar">
 （略）
</div>
<div class="sh_fc2blogheadbar_clear"></div>
-->
<body><div id="sh_fc2blogheadbar">
 （略）
</div>
<div class="sh_fc2blogheadbar_clear"></div>

　記事内に </head> と </body> を投稿しても同様に挿入されます。例えば、迂闊にもtextarea内にエスケープしていない要素を入れると次のようになります。

【記事を投稿】

以下をコピーしてください。
<textarea>
<html>
<head>
 <title>hoge</title>
</head>
<body>
 配布テンプレート
</body>

</html>
</textarea>

【記事の表示】

以下をコピーしてください。

　 </head> を &lt;/head&gt; <body> を &lt;body&gt; とすることで挿入を防ぎます。

【記事を投稿】

以下をコピーしてください。
<textarea>
&lt;html&gt;
&lt;head&gt;
 &lt;title&gt;hoge&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
 配布テンプレート
&lt;/body&gt;
&lt;/html&gt;
</textarea>

【記事の表示】

以下をコピーしてください。

コメントアウト内に <body> を入れてはいけない

　<body> の直後に出力されるコードには、コメントアウトを内包するscript要素が含まれています。したがって、コメントアウト内に <body> があると、コメントアウト内にコメントアウトが含まれることになります。

<!--
コメントアウト
<body>
<div id="sh_fc2blogheadbar">
 （略）
    <script>
    <!--
    document.barForm.range.options[1].selected=true;
    -->
    </script>
 （略）
</div>
<div class="sh_fc2blogheadbar_clear"></div>
ここまで
-->

　IEの場合は、最初の --> がコメントの終わりと判断され、</script> 以降のコード（ここまで-->など）が表示されてしまいます。div要素の閉じタグも出力されるので、テンプレートのレイアウトも崩れます。

　<body> をコメントアウトするときは、「<」を削ったり、改行したりします。

<!--
コメントアウト
body class="hoge">
ここまで
-->
<!--
コメントアウト
<
body>
ここまで
-->

ページ先頭へのリンクのずれを直す

　ページ先頭へのリンクに onclick属性「onclick="scrollTo(0,0);return false;"」をつけるなどします。

<a href="#top" onclick="scrollTo(0,0);return false;">ページ先頭へ</a>

<a href="#pagetop" onclick="scrollTo(0,0);return false;">Pagetop</a>

　公式テンプレートの場合は、テンプレートHTMLを「<%template_go_top>」で検索するとページ先頭リンクを見つけることができます。

<a href="#header" title="<%template_go_top>"><%template_go_top></a>

<a href="#header" title="<%template_go_top>" onclick="scrollTo(0,0);return false;"><%template_go_top></a>

　onkeypressもつけるときは、

<a href="#pagetop" onclick="scrollTo(0,0);return false;" onkeypress="this.onclick();">Pagetop</a>

共有テンプレートの注意点

　検索バーを利用すると、以下のスタイルが適用されます。

* html {
 background: url(null) fixed;
}
html {
 position: relative;
 top: 27px;
}
body {
 position: relative;
}
/* for all IE only */
html {
 position: static\9;
}
body {
 margin-top: 27px\9;
 background-position-y: 27px;
}

　IEでbody要素に背景画像があり、縦位置に「top」以外の「bottom」「center」「30%」などを指定しても、検索バーの「background-position-y: 27px;」が優先されます。

/* テンプレートのスタイルシート */
body {
 background-image: url(画像);
 background-position: right bottom;
}
/* 検索バーのスタイルシートで上書きされる */
body {
 background-position-y: 27px;
}
/* position 適用結果 */
 background-position: right 27px;

　一括で指定している場合も同様です。

/* テンプレートのスタイルシート */
body {
 background: url(画像) right bottom;
}
/* 検索バーのスタイルシートで上書きされる */
 background: url(画像) right 27px;

　これを回避するには「body」の前に「html 」をつけたり、末尾に「 !important」を付加します。

/* テンプレートのスタイルシート */
html body {
 background-image: url(画像);
 background-position: right bottom;
}
/* テンプレートのスタイルシート */
html body {
 background: url(画像) right bottom;
}
/* テンプレートのスタイルシート */
body {
 background-image: url(画像);
 background-position: right bottom !important;
}
/* テンプレートのスタイルシート */
body {
 background: url(画像) right bottom !important;
}
検索バーを非表示にする

　サイドバーに検索プラグインやGoogleカスタマイズ検索などのフォームを設置しているブログがほとんどなので、テンプレート側で検索バーを非表示にしてしまうのもいいかもしれません。

html {
 background: none !important;
 position: static !important;
}
html body {
 margin-top: 0;
 position: static;
}
#sh_fc2blogheadbar {
 display: none;
}

　bodyがrelativeの場合は「position: relative;」にします。marginが指定されているときは、margin-topの値も変更します。

IE6向け

　html に背景画像を指定してあり、IE6でも正常に背景画像を表示するには「 !important」を付加します。

/* テンプレートのスタイルシート */
html {
 background-image: url(画像) !important;
}
html {
 background: url(画像) left top !important;
}

　IE6をサポートし続けても仕方がないので、IE6では検索バーを表示しないようにしてもいいと思います。

* html body { margin-top: 0; }
* html body #sh_fc2blogheadbar { display: none; top: 0; }

　body にmarginが指定してるテンプレートの場合は 上記margin-top に同じ値を入れるか、元からあるプロパティの値に「!important」を付加します。

body {

 margin: 15px 0 30px !important;
}

備考・更新履歴など

twitter@paroday

　3月20日時点でblog60サーバまで実装されています。番号ありのサーバについては、今月中に実装完了しそうなペースです。

　ご利用は自己責任でお願いします。コード作成はずっとテストバージョンです。

　「テンプレートのカスタマイズに関することはサポート対象外です」の回答を受けそうですが、左のロゴを消したりするのは規約違反かは念のため確認中です。検索バー自体、非表示にできるので、たぶん問題ないと思います。できなかったら、自分で設置するだけです。

　環境設定から利用せずに、ロゴの部分にブログタイトル画像を入れるなどした検索バーのコード（HTML+CSS）をテンプレートに直接張り付ければ、もう少し簡単に動作やデザインの変更などができると思います。ロゴのリンクは設置ブログのトップページにして欲しいところです。

  • 2011 03-24 - 検索バーのスタイルシートが挿入されない不具合と「ウェブ全体」の検索ページが正常に表示されない不具合が調整されました。
関連記事
  1. comment

コメント

Icon ※必須 :
Pass 　※入力した英数字を識別コードとしてNoに表示(123→LkZag.iM)

トラックバック

https://paro2day.blog.fc2.com/tb.php/681-f79048d4

  1. trackback