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

前回の記事＜■カテゴリページに記事リストを作る＞でカテゴリページにタイトルだけの記事リストを作ったので、ブログ内検索結果ページ（検索結果ページ）でも同じように記事リストを作りたいと思います。


なぜカテゴリページの次にブログ内検索結果ページのカスタマイズをするのかというと、その順番でHTMLに記述されているからです。記事リストについては、HTMLの記述順にカスタマイズしていきます。






Seesaaブログにはブログ内検索のコンテンツがあります。
いわゆる検索ボックスってヤツです。




この画像は私がカスタマイズした後の検索ボックスなので、デフォルトのテンプレート「シンプルA. ホワイト 右カラム」の検索ボックスとは少し違うと思います。
スタイルが違っていたとしても今回のカスタマイズには何の関係もありません。
「検索」ボタンをクリックした時に開くページの表示を変えましょう、という話です。

現時点のブログ内検索結果ページ

まずは、ブログ内に検索結果が存在する場合（ブログ内で使われている言葉を検索した場合）の検索結果ページです。
検索したワードが存在する記事がリスト表示されますが、短文表示（決められた文字数で表示）されて「続きを読む」リンクが表示されます。


検索結果アリの場合




次に、検索したワードが存在しない場合です。
記事そのものが存在しないためタイトル部分に『キーワード「○○」がありませんでした』と表示されます。（以前の記事＜■各ページのタイトル表記を変更する＞でこのように表示するように設定済み）


検索結果ナシの場合




上記2つの画像を確認してもらったらわかるんですが、カテゴリページとは違って、ブログ内検索結果のページにはページ案内リンク（1ページ目や2ページ目を案内するボタン）がありません。ブログ内検索結果ページは「検索結果すべてを表示するページ」なのです。


色々と考えてみたんですが、この設定はそのまま受け入れることにして、記事リストの下にページ案内リンクを作るのはやめました。正直、面倒です。（何件で次のページに切り替えるのか、その設定を探すのは疲れるし、やるつもりもありません）



通常のブログ内検索結果ページはカテゴリページと同じように、本文が途中まで入った記事が検索結果の数だけ表示されます。
検索結果数が多ければ、スクロールしないと記事タイトルがわかりません。
検索したワードを含む記事で一番古い記事（一番下に表示される記事）をチェックするためには、相当スクロールしなければいけませんので、閲覧者に迷惑をかけることになります。
やはり、ページの上部に記事リストを表示させた方がいいのではないか、と思うわけです。


編集後のイメージ

【注意！】「article_kobetu」と「subheading」

下記で紹介するコードでは、私が独自に作ったclass「article_kobetu」と「subheading」を使用しています。1つ目の「article_kobetu」は「記事を点線で囲む」というclassで、もう1つの「subheading」は「上部に100pxの余白を入れる」というclassです。


＜私が勝手に作ったclass＞


この2つのclassをCSSに記述していない方は、CSSの空いている部分に記述してください。
もしも「線で囲まないし、余白もいらない」という場合は、下記で紹介する「入れ替えるコード」内で該当部分を緑色で表示していますので、その部分を外した状態でご自分のHTMLにコピペしてください。



それと、私は以前の記事＜■【Seesaaブログ新デザインシステム】カテゴリページ・タグ一覧ページのタイトルを記事タイトルと同じ位置に置く・「heading」を編集する＞で、HTMLに記述されている「<div class="l-content">」と「<div role="main" class="main l-left">」の位置を変更しました。


カテゴリページとかタグ一覧ページとか、そういうページのタイトルも、トップページや個別記事ページと同じように「記事のタイトル」という意味で、同じ位置（高さ）に置きたかったので、このような処理をしています。
もしも上記のタグを移動させていない場合は、どのような表示になるのかわかりません。おそらく大丈夫だとは思いますが、私自身のカスタマイズとは異なる場合のことは関知しませんのでご了承ください。

ブログ内検索結果ページに記事リストを作る

HTMLを編集します。
管理画面の「HTML編集」画面を開き、「<% if:page_name eq 'search' -%>」で検索すると2ヶ所がヒットしますが、そのうちの2つ目を編集します。
デフォルトのテンプレートだと28行目です。
このタグ部分の7行分を、以下のコードと丸ごと入れ替えてください。



コードを入れ替えると、ページ上部に表示される記事リストのタイトルは『キーワード「○○○○」の検索結果【目次】』という表記になります。
ページ下部の本来の記事リスト（元から設定されていた記事リスト）のタイトルは『キーワード「○○○○」の記事一覧』『キーワード「○○○○」がありませんでした』です。


＜元コード＞



＜入れ替えるコード＞


●コピペした後は、おそらくタグが左端に寄った状態で表示されると思いますので、キーボードの「タブキー（Tabキー）」でタグを1つずつ移動させ、体裁よく並べてください。
タグが全部左端に寄っていても気にしない方はそのままでいいと思います。

●記事リストを線で囲まないし、短文表示の記事リストのタイトルに上余白はいらないという場合は、緑色で表示している部分を外してください。

コード編集後のHTMLと実際のページ

●検索したワードが存在しない場合、文章部分が真っ白なのもどうかと思うので「該当記事なし」という言葉を表示するように設定しています。

【調整】記事リストの行間変更（classの変更）

上記のようにコードを全部コピペすると、記事リストを表示させることができます。
実際に作ってみると、ちょっと行間が狭いような気がしてきました。


行間の調整のためには、上記コードで使った「<div class="article_kobetu">」を変更すればいいのですが、「article_kobetu」はここだけではなく他の箇所でも使用しているclassなので、「article_kobetu」そのものを変更することはできません。
なので、新しくclass「article_kobetu2」を作って対処したいと思います。
記事リスト内の行間が気になる方は、下記のように編集してみてください。



もしも「article_kobetu」を使用していなくて記事リストの行間が気になる場合も、同じように編集すればいいと思います。下記で紹介している「<div class="article_kobetu2">」と終了タグ「</div>」を追加すればいいです。（コードの記述位置は、上記「入れ替えるコード」の緑色で記述している位置です）

HTMLでclassを変更する

HTMLで上記コードの「<div class="article_kobetu">」を「<div class="article_kobetu2">」に変更します。（見出しを抜いて上から4行目、下から5行目の2箇所あります）
「article_kobetu」の後ろに「2」を入れればいいだけです。

CSSに新しく作ったclassを追加する

CSSに下記の記述を追加します。空いている部分にコピペしてください。


＜追加するコード＞


●「.article_kobetu2」では行間を持たせるために「line-height: 2.3em;」を追加しました。
●「.article_kobetu2 a」を作り、リンク部分（つまり記事タイトル部分）のフォントを少し大きくしました。

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

次の記事の紹介

この記事ではブログ内検索結果ページの上部に記事リストを作りました。
次の記事では「タグ一覧ページページ」に記事リストを作りたいと思います。
タグ一覧ページに記事リストを作る方法ですが、文章量が多くなったので記事が2つになりました。1つ目の記事を案内しておきます。

関連記事の紹介

この記事を書いた後で、記事リストのスタイルを少しだけ変更しました。


上記で記事リストの行間を少し広くしましたが、通常はいいんですけど記事タイトルの文字数が多い場合は広くした行間のまま折り返されてしまうんです。
私としては、記事タイトルと記事タイトルの間（行間）は広めにして、記事タイトルの途中で折り返される時はもう少し狭い間隔で折り返してほしいわけです。そのためには、この記事で書いているような、デフォルトのHTML記述をそのまま利用したコード記述では無理なわけですね。リストタグ「li」を利用した記述に変更して、リストスタイルとして行間を設定した方がいいのです。
ついでに、この記事では記事タイトルの先頭に「◆」マークを付けていますが、リストタグを使えば、簡単に自分が準備したリストマーク（画像）を使えます。


変更した記事はこの記事でのカスタマイズが前提になっていますので、まずはこの記事の通りに編集してもらいたいと思います。その上で、こちらの記事をお読みください。