【Seesaaブログ新デザインシステム】ブログ内検索結果ページに記事リストを作る|ブログカスタマイズの雑談BLOGスマートフォン専用ページを表示ブログカスタマイズの雑談BLOGブログのカスタマイズやパソコン・ネットに関する雑談をするブログです。前回の記事<■カテゴリページに記事リストを作る>でカテゴリページにタイトルだけの記事リストを作ったので、ブログ内検索結果ページ(検索結果ページ)でも同じように記事リストを作りたいと思います。カテゴリページの次にブログ内検索結果ページのカスタマイズをするのかというと、その順番でHTMLに記述されているからです。記事リストについては、HTMLの記述順にカスタマイズしていきます。当記事の関連記事■カテゴリページに記事リストを作る■ブログ内検索結果ページに記事リストを作る■タグ一覧ページに記事リストを作る(1)■タグ一覧ページに記事リストを作る(2)■過去ログページ(アーカイブページ)に記事リストを作るSeesaaブログにはブログ内検索のコンテンツがあります。いわゆる検索ボックスってヤツです。右カラム」の検索ボックスとは少し違うと思います。スタイルが違っていたとしても今回のカスタマイズには何の関係もありません。「検索」ボタンをクリックした時に開くページの表示を変えましょう、という話です。現時点のブログ内検索結果ページまずは、ブログ内に検索結果が存在する場合(ブログ内で使われている言葉を検索した場合)の検索結果ページです。検索したワードが存在する記事がリスト表示されますが、短文表示(決められた文字数で表示)されて「続きを読む」リンクが表示されます。次に、検索したワードが存在しない場合です。記事そのものが存在しないためタイトル部分に『キーワード「○○」がありませんでした』と表示されます。上記2つの画像を確認してもらったらわかるんですが、カテゴリページとは違って、ブログ内検索結果のページにはページ案内リンク(1ページ目や2ページ目を案内するボタン)がありません。ブログ内検索結果ページは「検索結果すべてを表示するページ」なのです。考えてみたんですが、この設定はそのまま受け入れることにして、記事リストの下にページ案内リンクを作るのはやめました。(何件で次のページに切り替えるのか、その設定を探すのは疲れるし、やるつもりもありません)通常のブログ内検索結果ページはカテゴリページと同じように、本文が途中まで入った記事が検索結果の数だけ表示されます。検索結果数が多ければ、スクロールしないと記事タイトルがわかりません。検索したワードを含む記事で一番古い記事(一番下に表示される記事)をチェックするためには、相当スクロールしなければいけませんので、閲覧者に迷惑をかけることになります。ページの上部に記事リストを表示させた方がいいのではないか、と思うわけです。下記で紹介するコードでは、私が独自に作ったclass「article_kobetu」と「subheading」を使用しています。1つ目の「article_kobetu」は「記事を点線で囲む」というclassで、もう1つの「subheading」は「上部に100pxの余白を入れる」というclassです。100px;}この2つのclassをCSSに記述していない方は、CSSの空いている部分に記述してください。「線で囲まないし、余白もいらない」という場合は、下記で紹介する「入れ替えるコード」内で該当部分を緑色で表示していますので、その部分を外した状態でご自分のHTMLにコピペしてください。l-left">」の位置を変更しました。カテゴリページとかタグ一覧ページとか、そういうページのタイトルも、トップページや個別記事ページと同じように「記事のタイトル」という意味で、同じ位置(高さ)に置きたかったので、このような処理をしています。上記のタグを移動させていない場合は、どのような表示になるのかわかりません。大丈夫だとは思いますが、私自身のカスタマイズとは異なる場合のことは関知しませんのでご了承ください。ブログ内検索結果ページに記事リストを作るHTMLを編集します。-%>」で検索すると2ヶ所がヒットしますが、そのうちの2つ目を編集します。デフォルトのテンプレートだと28行目です。このタグ部分の7行分を、以下のコードと丸ごと入れ替えてください。ページ下部の本来の記事リスト(元から設定されていた記事リスト)のタイトルは『キーワード「○○○○」の記事一覧』『キーワード「○○○○」がありませんでした』です。-->●コピペした後は、おそらくタグが左端に寄った状態で表示されると思いますので、キーボードの「タブキー(Tabキー)」でタグを1つずつ移動させ、体裁よく並べてください。タグが全部左端に寄っていても気にしない方はそのままでいいと思います。●記事リストを線で囲まないし、短文表示の記事リストのタイトルに上余白はいらないという場合は、緑色で表示している部分を外してください。コード編集後のHTMLと実際のページ●検索したワードが存在しない場合、文章部分が真っ白なのもどうかと思うので「該当記事なし」という言葉を表示するように設定しています。【調整】記事リストの行間変更(classの変更)上記のようにコードを全部コピペすると、記事リストを表示させることができます。実際に作ってみると、ちょっと行間が狭いような気がしてきました。class="article_kobetu">」を変更すればいいのですが、「article_kobetu」はここだけではなく他の箇所でも使用しているclassなので、「article_kobetu」そのものを変更することはできません。新しくclass「article_kobetu2」を作って対処したいと思います。記事リスト内の行間が気になる方は、下記のように編集してみてください。「article_kobetu」を使用していなくて記事リストの行間が気になる場合も、同じように編集すればいいと思います。class="article_kobetu2">」と終了タグ「</div>」を追加すればいいです。class="article_kobetu2">」に変更します。(見出しを抜いて上から4行目、下から5行目の2箇所あります)「article_kobetu」の後ろに「2」を入れればいいだけです。CSSに新しく作ったclassを追加するCSSに下記の記述を追加します。空いている部分にコピペしてください。2.3em;」を追加しました。a」を作り、リンク部分(つまり記事タイトル部分)のフォントを少し大きくしました。コード編集後のブログ内検索結果ページ次の記事の紹介この記事ではブログ内検索結果ページの上部に記事リストを作りました。次の記事では「タグ一覧ページページ」に記事リストを作りたいと思います。タグ一覧ページに記事リストを作る方法ですが、文章量が多くなったので記事が2つになりました。1つ目の記事を案内しておきます。■【Seesaaブログ新デザインシステム】タグ一覧ページに記事リストを作る(1)記事リスト作成シリーズ、第三弾は「タグ一覧ページ」です。内容を書いていたらあまりにも長くなったので「1」と「2」に分けて掲載します。タグ一覧ページに表示される記事数は6件です。同じタグが付けられた....関連記事の紹介この記事を書いた後で、記事リストのスタイルを少しだけ変更しました。上記で記事リストの行間を少し広くしましたが、通常はいいんですけど記事タイトルの文字数が多い場合は広くした行間のまま折り返されてしまうんです。私としては、記事タイトルと記事タイトルの間(行間)は広めにして、記事タイトルの途中で折り返される時はもう少し狭い間隔で折り返してほしいわけです。そのためには、この記事で書いているような、デフォルトのHTML記述をそのまま利用したコード記述では無理なわけですね。リストタグ「li」を利用した記述に変更して、リストスタイルとして行間を設定した方がいいのです。ついでに、この記事では記事タイトルの先頭に「◆」マークを付けていますが、リストタグを使えば、簡単に自分が準備したリストマーク(画像)を使えます。変更した記事はこの記事でのカスタマイズが前提になっていますので、まずはこの記事の通りに編集してもらいたいと思います。その上で、こちらの記事をお読みください。■【Seesaaブログ新デザインシステム】ブログ内検索結果ページの記事リスト先頭にマークを付ける前回の記事では「カテゴリページ」の記事リストを調整したので、今回は「ブログ内検索結果ページ」を調整します。リストマーク(画像)を準備しましたからね、使わないともったいないです。[必須入力]※画像の中の文字を半角で入力してください。