ブログカスタマイズの雑談BLOG

FC2ブログには「検索フォーム」つまり「検索ボックス」を設置することができます。
公式プラグインに「検索フォーム」があるので、これを追加すればいいです。



元々私は「検索フォーム」を導入していなかったんですが、今回テンプレート「basic_white」をいじっている時に、自分でも何について記事を書いたのかを把握しやすいと思って「検索フォーム」のプラグインを追加してみたんです。


「検索フォーム」って便利ですね！
なんで私は設置していなかったんでしょうね。



で、嬉しくて色々と検索しまくってたんですが、表示された検索結果ページを見ているうちに、なんだかあまり美しくない表示だなぁ、と思い始めまして。（あ、私が美しくないと思っているだけで他の方は何とも思っていないでしょうから、怒らないでくださいｗ）


あと、私のブログではサイドメニューに「検索フォーム」を表示していましたが、検索結果ページを表示させて、じゃあ次にまた何か検索しようと思った時に、いちいちサイドメニューの「検索フォーム」部分までスクロールしなければいけなかったんです。
「検索フォーム」をサイドメニューのけっこう下部分に表示させていたのが原因ですが、これって正直、めんどい（´・ω・｀）



ということで、使い勝手が悪いと自分で思った検索結果ページに、「検索フォーム」を表示させることにしました！
もう完全に、私がメンドクサイからやり始めた作業なんですけどね（笑）
うん、なかなか便利になったじゃないですか！！（*´▽｀*）




ついでに、美しくない（笑）検索結果の表示方法も変更しました。
元々のテンプレートでは「日付→カテゴリ→記事タイトル」という順番でしたが、これを「日付→記事タイトル→カテゴリ」の順番に変更し、カテゴリ部分の色を変えました。
曜日の表示も英語表記から日本語表記に変更しました。



あと、ページ案内（次のページへのリンク）も付けました。これは「カテゴリページ」の記事一覧表示で使っていたコードをそのままパクりました。
でもよく考えたら、「basic_white」は記事一覧リストのすぐ下に「＞」ボタンが出る仕様なんで、ページ案内が必要だったのかよくわからないけど、まあ、いいや（笑）



とりあえず、どんな感じになるのか画像を掲載しておきます。


編集前の検索結果ページ



テンプレート「basic_white」の表示から何も変更しないままなので、なんとなくダラダラとリスト表示されているような気がしますね。ちょっと美しくないです。（あ、私だけの感覚ですから怒らないでくださいｗ）



編集後の検索結果ページ



まあ、見やすくなったんじゃないでしょうか。
日付部分から投稿時間を外してしまって、記事タイトルの後ろにカテゴリ名を持ってきたので、けっこうスッキリした表示になったと思います。

ブログ内検索結果ページに検索フォームを表示する（HTMLの編集）

管理画面のサイドメニュー「テンプレートの設定」を開き、自分が使用しているテンプレート名の「編集」を選択してください。「○○のHTML編集」画面になるので、「<!--search_area-->」というタグを探します。（「Ctrlキー」＋「Fキー」で検索するとすぐにわかります。）


「<!--search_area-->」から「<!--/search_area-->」までの間にあるコードをすべて、下記の「追加するコード」に置き換えます。文字色は気にせずにすべてのコードをコピペしてください。


ちなみに「<!--検索結果一覧ページ-->」「<!--検索結果一覧ページ　ここまで-->」という文言はコメントアウト（Web上では表示させないけれどもHTMLコードとしては記述しているもの）です。置き換える時はこのコメントアウト部分も含めて置き換えると表題代わりになるので、コードを探す時に便利です。


＜追加するコード＞


●赤色文字「search_box」は「検索フォーム 」、「search_space」は「記事リスト本文」、「search_nav」は「次ページ案内」を指します。それぞれCSS（スタイルシート）で指示を出します。


●水色文字の「<img src="http://□□□.com/マーク(2).gif" />」は、私が自分で作った画像（記事タイトルの頭に付けている画像「」）を指します。
これは以前の記事＜■FC2ブログ【basic_white】（5）＞で作ったマーク（画像）のアップロード先のURLですので、ご自分の画像のURLに書き換えてください。


●上記コードの青色文字「<< 新しい記事一覧へ」「古い記事一覧へ >>」一連の部分は、以前の記事＜■FC2ブログ【basic_white】（9-3）＞で紹介した「カテゴリ・月別アーカイブ・タグページ上部に記事一覧リストを表示する方法」と同じで、記事一覧リストの件数が多い場合に次のページを案内するためのコード記述です。
「<< 新しい記事一覧へ」「古い記事一覧へ >>」ではなく別の言葉にしたい場合は、この言葉の部分を変更してください。


●紫色の部分「<!--/prevpage-->　<!--nextpage-->」にはスペース（空間）を入れています。スペースを入れないと案内文言「<< 新しい記事一覧へ」と「古い記事一覧へ >>」がくっついて表示されてしまいます。
スペースがイヤな場合は「■」などに変更してもかまいませんが、そうすると表示が美しくなくなってしまうかもしれません。まあ、ご自由にどうぞ。

ブログ内検索結果ページに検索フォームを表示する（CSSの編集）

次は、CSS（スタイルシート）を編集します。
「スタイルシート編集」画面を開いて、一番下に記述してください。（文字色は気にせずにすべてのコードをコピペしてください）


＜追加するコード＞


●CSS編集画面では、CSSコードにそれぞれどこをいじっているかをコメントアウトで表記しています。「検索フォーム」「リスト本文」「次ページ案内」という部分がコメントアウトしている部分です。

●例えば検索フォームの余白などを変更したい場合は「.search_box」の数値を変更してください。次ページ案内の文字サイズを変更したいなら「.search_nav」の数値を変更してください。

今回のコードの「class名」について

さて、今回はHTML編集部分でリスト表示の順番を、デフォルトの表示順番から「日付→記事タイトル→カテゴリ」の順番で表示するようにしています。曜日表示も日本語表記に変更しました。これ以外にも文字サイズを小さくしたり、カテゴリ部分に色を付けたりしています。


でも、これらの変更は上記CSSの記述では出来ません。上記のCSS（スタイルシート）ではあくまでも「検索フォーム」について設定をしました。
その他のデザインについては別のCSS部分を編集しなければいけません。



上記で紹介したHTMLコードのうち、「class名」を付けているものが複数あります。
いきなり「class名」と言っても意味がわからないかもしれませんが、CSSで命令を出すための目印みたいなものです。
CSS編集画面では、ある部分の「ココ」に対して「線を赤色に」などの指示を出します。「ココ」が指定できなければ命令を出す相手がわかりません。「ココ」がつまり「class（クラス）」なのです。



上記HTMLコードの中で「class名」が付いているものを抜き出してみます。
開始タグのみ書いておきます。（検索フォームに関してはメンドイので無視しておきますｗ）





勝手に番号を振っておきましたが、8個のclass名があります。
1番のclass名「content」と2番の「sub_header」は、何か記事を書く場合に必要なclassです。既にCSSで指示が出されていて、しかも変更する必要はないので、何もせずにスルーしておいて大丈夫です。



3番の「search_box」と4番の「search_space」と8番の「search_nav」については、上記のCSS編集画面で既にCSSで指示を出したclassなので大丈夫ですよね。「検索フォーム」「記事リスト本文」「次ページ案内」とコメントアウトでCSSに表示していた部分です。



残りの5番「list_body」、6番「color_tit」、7番「color_cate」が、まだ何も指示を出していないclass名です。3つともブログ内検索結果ページの記事リスト表示に関する指示です。
6番と7番に関しては新しく作ったclassなのでこの記事の最後で説明するように素直にCSSに追加してもらえばいいんですが、5番「list_body」だけは、注意が必要です。


5番「list_body」は、ブログ内検索結果ページ（search_area）と全記事一覧ページ（titlelist_area）で共通の表示設定です。どちらも同じclass名「list_body」を使っているので、CSSで設定をすると、どちらのページも同じように表示されます。

全記事一覧ページと共通のclass「list_body」について

「list_body」への命令は、デフォルトのCSSでは「/* titlelist search */」とコメントアウト表題が付けられた状態で既に記述されています。
「/* titlelist search */」という表題をそのまま読むと「タイトルリスト（記事リスト）のsearch（検索）」という意味になるので、まるでブログ内検索結果ページ（search_area）に対してのみ指示を出しているように見えます。
でも、全記事一覧ページ（titlelist_area）でも同じclass名「list_body」が使われていますので、これは共通指示になります。


結果、このまま「list_body」の内容を変更すると、ブログ内検索結果ページだけでなく全記事一覧ページのリスト表示の設定（フォントサイズなど）が同時に変わります。



同時に変更されることを避けたいならば、上記HTMLコードの中の「list_body」部分を別のclass名に変更してから改めて命令文をCSSに記述してください。命令するための名前をブログ内検索結果ページと全記事一覧ページで別にしてしまう、ということです。
いきなり別のclass名を付けろと言われても迷ってしまうかもしれませんが、例えば「list_body2」にしちゃえば問題ないです。


HTMLのclass名を「list_body2」に変更したら、CSSの方にもちゃんと「.list_body2」とclass名を書いて、命令文のコードを記述してください。CSSの命令内容は「list_body」を利用すればいいと思います。
元々の「list_body」の命令文をそっくりコピーして貼り付けて、class名部分を「.list_body2」に変更し、命令内容で「list_body」と違わせたい部分を編集したり新しいコードを記述すればいいだけなので簡単だと思います。



なんだか別のclass名に設定することをおススメしているような文章になってしまいましたｗ
ちなみに私の場合は、別のclass名には設定していません。ブログ内検索結果ページと全記事一覧ページのリスト表示は共通（同じ）にしています。だって、同じようなページ表示なんだから、同じように表記した方が「同じブログ内のページ」って感じがしていいでしょ？（なんじゃそりゃｗ）



ということで、以下は「list_body」をいじった場合のコードを紹介します。
しつこいですが、以下のコード変更をすると、ブログ内検索結果ページだけでなく全記事一覧ページのリスト表示も同時に変更されますのでご注意ください。
以下、CSSを編集します。

ブログ内検索結果ページのリスト表示（フォントサイズ）を変更する

まずはブログ内検索結果ページのリスト表示の文字の大きさ（フォントサイズ）を変更します。ちょっと小さ目にしたいと思います。下線の色も変更してみましょう。
しつこいですが、全記事一覧ページのリスト表示も同時に変更されますのでご注意ください。



とりあえずデフォルトのCSS（元々のテンプレートのコードそのまま）を書いておきます。
CSS編集画面で「titlelist search」または「list_body」を探してください。（「Ctrlキー」＋「Fキー」で検索するとすぐにわかります。）


＜元コード＞



フォントサイズを変更したいので、上記のコードに「font-size」を追加します。
文字サイズをちょっと小さ目に設定したいので90%にしますが、80%でも110%でも好きな数値を入れてください。（デフォルトの文字サイズを100％と考えて、それより大きくしたいのか小さくしたいのかで数値を変更してください。）
あとは下線の色（カラーコード）を変更したり、余白（margin）をいじります。貴方様のブログに合うように数値を変更してください。


＜編集後＞

ブログ内検索結果ページのリスト表示（文字の色）を変更する

次に、リスト表示のタイトル部分とカテゴリ部分の文字色を変更したいと思います。CSS編集画面の一番下にでも下記のコードを放り込んでおけばいいです。
もちろん、文字の色を変更する必要がない方はいじる必要はありません。



ちなみに、タイトル部分とカテゴリ部分の文字色に関しては、全記事一覧ページに同じclass名はありません。
上記の項目『今回のコードの「class名」について』部分で書いていた、6番「color_tit」と7番「color_cate」のclassを今から編集します。
この2つのclassは今回新しく追加するclassなので、下記のコードをCSSに追加しても全記事一覧ページに影響はありません。


もちろん、全記事一覧ページのHTMLコードに「<span class="color_tit">」と「<span class="color_cate">」を記述すれば同じように文字色を変更することができます。




では、リスト表示のタイトル部分とカテゴリ部分の色を変更します。
CSS編集画面の一番下にでも下記のコードをコピペしてください。（文字色は気にせずにすべてのコードをコピペしてください。）


＜追加するコード＞



これでタイトル部分とカテゴリ部分の文字色が変更されます。
「a:visited」の後ろに書いている「{color:#〜}」がページを開いた時に見える文字色（カラーコード）です。タイトル部分とカテゴリ部分、それぞれにお好きなカラーコードを入れてください。


「a:active」の後ろの「{color:#〜; background-color:#〜;}」の指示は、マウスポイントを当てた時の文字色と背景色です。
私は「background-color」を記述して背景に色を付けていますが、不必要な場合は「background-color:」部分を削除してください。（「}」で閉じないと命令文として成立しませんので、「background-color:」部分を削除する場合は最後の「}」まで消してしまわないように注意してください。）

コード編集後のブログ内検索結果ページ

こんな感じになります。
あくまでも私自身がこんな風にいじったよ、という紹介なので、説明が非常にわかりにくい感じですが、私は全く気にしません！ｗ
検索結果の表示件数はFC2ブログの管理画面から設定してくださいね。（ちなみに私は15件に設定しています。）