STMX 検索窓を付ける

カスタム検索

HELP > チュートリアル > ６．内容を充実させる > STMX 検索窓を付ける

STMX 検索窓を付ける

１．準備２．ホームページを作る３．サーバーへアップする４．電脳卸に登録する５．商品ページを作る６．内容を充実させる７．ブログを書く８．集客する

トップページを充実させる STMX 検索窓を付ける

STMX 検索窓 TAG取得

はい、先ずは、ストアミックスの検索窓のTAGを取得します。

電脳卸にログインすると、お知らせの下に

STMX検索窓リンクボタン

のボタンが有るので、クリックしてTAGを取得するページへ移動します。

このページには、STMX検索窓のTAGが数種類並んでいるので、ホームページのデザインにマッチするものを選択してください。

今回は、サンプルサイトの左側サイドエリアに配置しようと考えているので、146×80 の大きさの TAG を取得してみます。

すべて選択＆コピー（IEのみ）をクリックして、タグをコピーできます。

STMX 検索窓 TAGのコピー

↓のようなダイアログが表示される場合は、アクセスを許可するボタンを押してください。

IEアクセス許可確認ダイアログ

これで、Windowsのクリップボードに TAG がコピーされています。
テキストエディタ等に貼り付けて、保存しておきましょう。

このTAGは、電脳卸サイトからいつでも取得できるので、特に心配ないです。

プラグイン

DNO-CBWeb で複数のページに同じコンテンツを配置する場合は、プラグインを使います。
（詳しくは、機能詳細にて記載します。）

テンプレートによりますが、サンプルサイトでは、

サイドエリアの上下
ナビゲーションエリア
メインエリアの上下

等にプラグインを配置できます。

STMX検索窓を貼り付ける

では、先ほど取得した STMX検索窓の TAG をプラグインとして貼り付けてみます。

プラグインコンテンツの作成

先ずは、サンプルサイトに プラグインコンテンツ を作成します。

DNO-CBWeb のサンプルサイトのを開いてください。
サンプルサイトでは、既にプラグインページ１が用意されています。

DNO-CBWEB サンプルサイトのプラグインメニューを開いた状態

今回はこのプラグインページ１の下にプラグインコンテンツを作成します。

DNO-CBWEB プラグインコンテンツを作成中のツリー

プラグインページ１の上で右クリックして
子コンテンツ作成を実行します。

DNO-CBWEB プラグインコンテンツを作成した直後のツリー

← はプラグインコンテンツ作成直後のツリーです。
作成したコンテンツを選択してください。

作成したプラグインコンテンツを選択したツリー

通常のコンテンツと同様に
プラグインコンテンツを選択すると、ツリーの下にプロパティ編集Windowが表示されます。

コンテンツ - プロパティ編集Window で
今作成したのプロパティを↓のように編集してください。

これで、STMX検索窓を配置するコンテンツプラグインが作成できました。

TAGを設定する

では、STMX検索窓にTAGを入力します。

STMX検索窓を選択して、コンテンツHTML編集 Windowを開いてください。

プラグインコンテンツにSMTX検索窓を設定するため開いた状態

コンテンツの初期TAGとして、

と入っているので、このTAGを削除して、取得した STMX検索窓のTAGを貼り付けます。

プラグインコンテンツにSTMX検索窓TAGを貼り付けた状態

はい、貼り付けました。
（TAGには、分かりやすいように改行を入れました。）

これで、プラグインページのプレビューに STMX検索窓が表示されると思います。

STMX 検索窓のプレビュー初期状態

しかし、なんだか背景の色が電脳卸のサンプルと違います。。。
まぁこれでも良いですが、文字が読みにくいですね。

ちょっと、TAGの内容を見てみましょう。

背景色の設定

FORMタグに囲まれた TABLEが配置されています。

見て欲しいのは、４行目の <td bgcolor="#FFFFFF">
ここで背景色を白（#FFFFFF）に設定してるようです。


<form style="margin:0;" method="get" action="http://www.store-mix.com/search/result.php?hid=142342">
 <table width="146" border="0" cellpadding="0" cellspacing="1" bgcolor="#66CC00">
  <tr>
   <td bgcolor="#FFFFFF">
    <table width="100%" border="0">
     <tr valign="middle">
      <td>
       <input type="text" size="18" name="cond">
       <input type="hidden" name="hid" value="142342">
      </td>
      <td>
       <input name="image" type="image" src="http://sun.d-064.com/han/images/banner_program/GO.gif" width="19" height="19" border="0">
      </td>
     </tr>
     <tr>
      <td colspan="2">
       <div align="center">
        <font size="2" color="#808080">欲しい物を入力し買う。</font>
       </div>
      </td>
     </tr>
    </table>
   </td>
  </tr>
  <tr>
   <td colspan="2">
    <a href="http://www.store-mix.com/index.php?hid=142342">
     <img src="http://sun.d-064.com/han/images/banner_program/kensaku2.gif" alt="stmx" width="146" height="30" border="0">
    </a>
   </td>
  </tr>
 </table>
</form>

普通は、これで文字の背景が白になる筈なのですが、
スタイルシートでエリアの背景を指定している場合には、そちらの指定が優先される場合があります。

詳しくは分かりませんが、問題の背景色をスタイル指定したら改善できました。

４行目の <td bgcolor="#FFFFFF"> を
<td style="background-color:#FFFFFF"> へ変更してみてください。

検索窓確認

では、検索窓の表示と動作を確認してみましょう。

表示確認

ツリーでいくつかのページを選択して、プレビューを確認します。

プラグイン確認のため、ページを選択したツリー

プレビューされたページ全ての左サイドエリアの上部に ”STMX検索窓” が表示されていればOKです。

動作確認

次に動作を確認します。

STMX 日本茶で検索テスト

いずれかのページのSTMX検索窓で
適当な文字を入力して検索してみてください。

ここでは、”日本茶” を入力してみました。

GOボタンを押すと STMX の検索結果にジャンプします。

↓は、"日本茶" で検索した時の結果ページです。

STMX 検索結果　（日本茶）

はい、これで OK です。

もとのページのプレビューに戻る場合は、

CBWEB- プレビューブラウザ戻るボタンをクリックする

プレビューブラウザの戻るボタンを押してください。

今回は、STMXの検索窓をつけて商品検索ができるようになりました。

ファイルを保存しておきましょう。
※ 名前を付けて保存をしておくと、バックアップにもなって安心です。

次は、商品をブログで紹介してみましょう。
ブログで紹介するへ進んでください。

DNO-CBWeb HOME PAGE