検索結果ページをカスタマイズ (2/2)

j140421-04.gif

前回はこちら。
なぜ検索結果ページをカスタマイズする必要があるか知らない方は、まず前回の記事を読んでくださいね。

さて、今日は実際にHTMLに修正を加えていきますよ。
最終目標は上の図です。
落ち着いて考えれば、難しいことではないので大丈夫です。^^

 
 
SPONSORED LINK

 
 

1. HTMLを開く


メニュー一覧から、「HTML:PC」をクリックします。

j140426-01.gif

あるいは、

j140426-02.gif

デザイン → HTML の順にクリックしても同様です。


j140426-03.gif

変更を加えたいHTMLをクリックします。

まだ一度もHTMLをカスタマイズしたことがない場合は…

j140426-04.gif

右のほうにある「HTMLの追加」をクリックしてください。

j140426-05.gif

こういう画面が開きます。ここでは一旦、HTML名を入力し、保存ボタンをクリックします。

HTMLを選ぶ画面に戻りますので、今作ったHTMLをクリックして、編集画面を開きます。



2. HTMLの編集(1) - 場所はどこ?


j140426-06.gif

このHTMLがブログ全体の構成なわけですね。この中から、検索結果ページの部分を探します。

Ctrl + Fで、<% if:page_name eq 'search' -%> を探してください。

j140426-07.gif

ここです。

修正を加えるのはこの部分です。

j140426-08.gif

Seesaa独自タグは%が付いているけど、スラッシュの付いたタグで閉じるのは、普段目にしているHTMLと同じですね。



3. HTMLの編集(2) - ヒット件数ゼロの場合のメッセージ


j140426-09.gif

この部分のHTMLタグは、こういう構造になっています。
色分けすると分かりやすくなりますね。

<% /loop %><% /if -%>の間が不自然に開いていますね?
そう…

j140426-10.gif

そこに、該当記事がない場合のメッセージとして表示する言葉を挿入するのです。

j140426-11.gif

こんな具合に。

実際のHTMLはこちら。↓


<% unless:list_article %>
<p>入力された語句が含まれるページは見つかりませんでした。</p>
<% /unless %>


これで、検索したときにヒット件数がゼロでも、ブランクになるという事態を避けることができました。


4. HTMLの編集(3) - ブログトップへのリンク


もう1行、付け加えましょう。

ヒット件数がゼロだったよとお知らせしただけでは、行き止まりの道みたいです。そこからブログ内の記事のある場所へ誘導するのが賢明かと思います。

先ほど加えた「入力された語句が…」の次の行に、ブログトップへのリンクを貼ります。


<% unless:list_article %>
<p>入力された語句が含まれるページは見つかりませんでした。</p>
<p><a href="#ブログのURL">ブログトップへ戻る</a></p>
<% /unless %>

aの中は自分のブログのURLを入れてください。

この4行を加えるだけで、行き止まりの真っ白なページがなくなり、ユーザビリティがアップしました。

ここまでの文章は長いけど、要は4行足しただけです(笑)。



5. HTMLの編集(4) - タイトルを入れよう


さらに、もう一工夫しますよ。

記事ページとは違うことを印象付けるために、タイトルを付けましょう。場所はifのすぐ下です。

j140426-12.gif

実際のHTMLはこちら。↓


<% if:page_name eq 'search' -%>
<div class="tag-title">「<% blog.title %>」内の検索結果</div>

<% loop:list_article %>




タグページのタイトルのスタイルを流用しました。この辺はお好みで変えてください。

はい、これで作業は終わりです。


j140426-13.gif

保存をクリックしてすべて完了。

* *


j140421-04.gif

大体こんな感じになりましたか?

それぞれのブログで細かい設定が違うと思うので、余白は各自調整してください。

自分ならもっとこうするとか、これを入れるとか、アイデアがいろいろあると思うので、私にも教えてくださいね。よろしく♪

前回も書きましたが、アドセンスは入れちゃダメですよ。キケンです。


この記事が、あなたのブログをステップアップさせることに役立つと嬉しいです。
では、また。(^_^)/


↑ クリックありがとう♪ 更新の原動力です♪

この記事へのコメント

この記事へのトラックバックURL
http://blog.seesaa.jp/tb/395610582

※言及リンクのないトラックバックは受信されません。

この記事へのトラックバック


SPONSORED LINK