TOP ブログの基本 アフィリエイト アクセスアップ カスタマイズ ブログ・HTML ブログ・CSS




ハイサイ(ようこそ)利爺のブログへ


●ブログの基本、アフィリエイト、HTML・CSSまで
初めての方にも分かり易いように下記のシリーズで纏めています。

・・・・・・・・・・・・・・・・ 各章の項目(目次) ・・・・・・・・・・・・・・・
= 現在、シリーズ記事を書いているブロックです。

エントリー順に確認できるように【目次】を作ってありますので
上段のコンテンツバー(menu)または上記の項目から各ブロックに入れます。


●本文中に表示しているアイコンは
= 参照記事  = 頁中の章  = 注釈  = 記事ブロック
を表します。

2009年06月14日

検索ツールを新しく作る(2)

■ 4-16 検索結果の表示

ブログデザインを自分なりの納得する形にするため、カスタマイズをすることは、決して悪いことではないのです。

しかし、カスタマイズに捉われすぎて、本来の目的を忘れてしまっては「木を見て森を見ず」の例え通りになってしまいます。

●ブログを作って何をするのか。 … 第一の命題です。
●目的に沿うカスタマイズをする。… 第一を生かすための命題です。

ブログ作成の目的とブログのカスタマイズ。
本末転倒にならないように、目標をハッキリとさせておくことが重要です。

● 検索の結果で「検索項目無し」を表示させる。

前回はブログ内の記事を検索する「窓」を作成しました。



検索するキーワードを入力して、該当する項目が抽出された時は
結果として、記事のタイトルとサブタイトルが表示されるようにしました。

抽出の無い、キーワードに該当しない結果には何も表示しませんね。

【画像1】検索項目無し
befor01a.jpg
 ↑ 画像をクリック・元画像が開きます。

「画像1」の様に何も表示されないため、まだ検索中なのかどうかと迷ってしまいます。

検索に抽出する項目が無くても、無い項目には無いなりの結果を表示をするように、HTMLに書き換えます。


検索ツール(フォーム)を作るHTMLは「検索コンテンツのHTML」でしたが
今回は検索(search)を行う(司る)HTMLを書き換えます。

前回と同様、左上段の 「デザイン」から ⇒ 「HTML」に入り開きます。

<% if:page_name eq 'search' -%>

のタグを探し出します。

HTML

<% if:page_name eq 'search' -%>
<% loop:list_article %>
<div class="blog">

<h2 class="date"><% article.createstamp | date_format("%Y年%m月%d日") %></h2>
<div class="blogbody">
<h3 class="title"><a href="<% article.page_url %>"
class="title"><% article.subject %></a></h3>
<div class="text"><% article.entire_body | text_summary(240) %></div>
<div class="posted">posted by <% article.nickname %> at
<% article.createstamp | date_format("%H:%M") -%></div>
</div>
</div>
<% /loop %>

<!-- 検索結果表示 ここから-->
<% unless:list_article %>
<br>【該当する項目が見つかりません】<br>別の語句で検索お願いします。
<br><a href="<% blog.page_url %>">▲トップページに戻る</a>
<% /unless%>
<!-- ここまで-->
<% /if -%>

  注)HTMLの「 <> 」は記入段階で小文字の「 < > 」にします。

検索の終了を示すタグ
<% /loop %> と  <% /if -%> の間に

<!-- 検索結果表示 ここから-->  〜  <!-- ここまで-->
間に記入しているタグを追加します。

HTMLタグの

<% unless:list_article %> 〜 <% /unless%>

は抽出項目が無ければ 〜 を処理するのという意味になりますので
青文字で記入した

【該当する項目が見つかりません】

の文言が表示されます。文言は、自由に変えて構いません。

緑色で表示したHTMLタグ

<a href="<% blog.page_url %>">▲トップページに戻る</a>

は【ブログのトップページに戻る】のリンクタグです。

結果表示のページから、トップページに戻れるようにタグを追加しておきます。

タグの中に<br>(強制改行)を使用しているのは、
文言の表示位置が高い位置に行き過ぎていますので、改行(空白行)を入れて表示する位置を調整しています。

<br>(空白行)は
連続でいくつ使って構いませんので、空白行を調整して、好みの位置に表示させて下さい。


【画像2】検索項目無しの表示
after01a.jpg
 ↑ 画像をクリック・元画像が開きます。

「画像2」は修正後のブログです。
検索して該当する項目が無いときの結果を表示をしています。


● 表示文字数を制限する

橙文字で表示した

<div class="text"><% article.entire_body | text_summary(240) %></div>

のタグの(240)は、前回も確認した文字数の制限です。
検索して該当する項目を抽出して、表示するときの文字数を表しています。

●(240)ですから漢字表記で「120文字」という事になりますね。

表示される文字が「120文字」では多過ぎて、表示領域を取り過ぎますので
記事タイトルと記事の内容を2行程度に抜粋して、簡潔な表示にします。

●(240)を(40 =20字)〜(100 =50字)くらいの数字に書き換えておきます。
●表示文字数が多くても構わなければ、書き換えしなくてもいい」箇所です。

以上が
「検索項目無し」を表示させるHTMLの追加と、表示を簡潔にするHTMLの書き換えです。

HTMLに慣れていないと、何故ブログには

【HTML】
【各コンテンツHTML】
【CSS】

があるのかと悩みますが、ブログの作成やカスタマイズの経験を積み重ねて行くと、その仕組みが分かってきます。

焦らずに、ゆったりと進んで行きましょう。




▲カスタマイズの関連記事 【別窓での表示です】
   holder01.gif ブログのカスタマイズ-目次ー
    http://tosiji-dreamafi.seesaa.net/article/115424617.html

▲HTMLの関連記事 【別窓での表示です】
   holder01.gif ブログで使うHTML-目次ー
    http://tosiji dreamafi.seesaa.net/article/133635358.html

★ご協力お願いいたします★   
      kame.jpg
    banner_01.gif
……人気ブログランキング……




×

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