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

前回はこちら。

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

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

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

　
　

SPONSORED LINK

　
　

１． HTMLを開く

メニュー一覧から、「ＨＴＭＬ：ＰＣ」をクリックします。



あるいは、



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




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

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



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



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

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

２． HTMLの編集(1) - 場所はどこ？

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

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



ここです。

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



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

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

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

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



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



こんな具合に。

実際のHTMLはこちら。↓

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

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

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

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

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

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

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

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

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

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

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

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

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



実際のHTMLはこちら。↓

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

<% loop:list_article %>
・
・
・

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

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




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

* *

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

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

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

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


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


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