小粋空間: 検索結果画面のカラムレイアウトを変更する

Top ＞ Movable Type ＞カスタマイズ＞検索＞検索結果画面のカラムレイアウトを変更する

News

各種ブログテンプレート

2007年7月10日

エントリー本文

検索結果画面のカラムレイアウトを変更する

Posted at July 10,2007 1:45 AM
Category：[検索]
Tag：[Customize, MovableType, SearchResult]

当サイトの Movable Type 配布テンプレートで検索結果画面のカラムレイアウト変更方法についてご質問を頂きましたので紹介します。

サンプルとして、検索結果画面の2カラム固定レイアウト（右サイドバー）から3カラムレイアウトに変更します。

１．カラムレイアウト指定

検索結果画面にある body 要素の class 属性値（赤色部分）

<body class="<MTNoSearch>layout-one-column<MTElse>layout-two-column-right</MTElse></MTNoSearch>">

を下記のように変更します。

<body class="<MTNoSearch>layout-three-column<MTElse>layout-three-column</MTElse></MTNoSearch>">

上記はMTNoSearchタグとMTElseタグのいずれの場合も3カラムにしていますので、どのような検索結果でも3カラムで表示されます。

というか、振り分ける必要がなければ

<body class="layout-three-column">

でなんら問題はありません。

２．左サイドバー追加

下記に示す位置に左サイドバーを追加します。

　　：
<div id="header">
<h1 id="blog-name"><a href="<$MTBlogURL$>" accesskey="1"><$MTBlogName encode_html="1"$></a></h1>
<MTIfNonEmpty tag="BlogDescription"><p class="blog-description"><$MTBlogDescription encode_html="1"$></p></MTIfNonEmpty>
</div>
 
[ここに左サイドバーの（X）HTMLを追加]
 
<div id="content">
<div class="blog">
　　：

「追加」という部分には、左サイドバー自体（id 属性値が links-left-box の div要素と id 属性値が links-left の div要素または dl 要素）を設定してから、各種リストを追加してください。

３．右サイドバー変更

右サイドバーの内容を変更したい場合は、下記に示す部分を適宜修正してください。

　　：
<!-- 右カラム開始 -->
<div id="links-right-box">
<div id="links-right">
 
[ここに右サイドバーの（X）HTMLを追加または修正]
 
</div><!-- links-right -->
</div><!-- /links-right-box -->
　　：

４．検索関連タグについて

検索結果画面はかなりごちゃごちゃしていて分かりにくいので、指標となるタグを説明しておきます。

<MTSearchResults>～</MTSearchResults>: 検索がヒットした場合にこのタグで括られた内容が実行される
<MTNoSearchResults>～</MTNoSearchResults>: 検索がヒットしなかった場合にこのタグで括られた内容が実行される
<MTNoSearch>～</MTNoSearch>: 検索文字列が入力されなかった場合にこのタグで括られた内容が実行される
<MTIfStraightSearch>～</MTIfStraightSearch>: サイト検索時にこのタグで括られた内容が実行される
<MTIfTagSearch>～</MTIfTagSearch>: タグ検索時にこのタグで括られた内容が実行される
<MTBlogResultHeader>～</MTBlogResultHeader>: 検索結果画面のヘッダ
<MTBlogResultFooter>～</MTBlogResultFooter>: 検索結果画面のフッタ
<MTIgnore>～</MTIgnore>: このタグで括られた内容は無視される
<MTSetVar>～</MTSetVar>: 変数の設定
<MTSetVarBlock>～</MTSetVarBlock>: 変数の設定
<MTGetVar>～</MTGetVar>: 変数の取得

MTSetVar/MTSetVarBlock/MTGetVar については「Movable Type 4 のテンプレート構造」を参照ください。

検索結果画面のカスタマイズについては、下記の雑誌に寄稿したものもあります（宣伝）。

Web Designing (ウェブデザイニング) 2007年 05月号 [雑誌]

毎日コミュニケーションズ 2007-04-18
売り上げランキング :

Amazonで詳しく見る by G-Tools

Posted by yujiro ReTweet This!

« 「Webデザインの新しいルール Movable Type 4.x」執筆中 | Main | Web標準XHTML+CSSデザインクリエイターが身につけておくべき新・100の法則。 »

この記事を読んだ人はこんな記事も読んでいます

人気エントリー

Hatena Hot Entries

Hatena Entries

トラックバックURL

このエントリーのトラックバックURL:

トラックバック

≫ 検索結果のページを作成 from ひとかげwatch
エントリ少なくてサイト内検索もタグクラウドも縁がなかったのできがつきませんでした... [続きを読む]

Tracked on July 21, 2007 9:28 PM

コメントする

greeting

名前（N）: *必須

メールアドレス（M）:

URL（U）:

情報を保存する？

ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

コメント（C）:

[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り（プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り）、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「<」、「>」は「>」と入力してください。例えば「<$MTBlogURL$>」は「<$MTBlogURL$>」となります（全て半角文字）