TopMovable Typeカスタマイズ検索 > 2007年7月
2007年7月10日

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

July 10,2007 1:45 AM
Tag:[, , ]
Permalink

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

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

1.カラムレイアウト指定

検索結果画面にある 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">

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

2.左サイドバー追加

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

  :
<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 要素)を設定してから、各種リストを追加してください。

3.右サイドバー変更

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

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

4.検索関連タグについて

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

<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月号 [雑誌]Web Designing (ウェブデザイニング) 2007年 05月号 [雑誌]

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

Amazonで詳しく見る
by G-Tools
Comments [0] | Trackbacks [1]
Now loading...
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2020年
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3