Movable Type 備忘録

 MTSetVar / MTGetVar を使ってデザインする

こんばんわ^^

昨日から友人のサイトの立ち上げのお手伝いしてます。
思ってたよりスタイルシートの中がグッチャグチャで、ちょっとイジると他が影響する･･･というような状態でけっこう難儀しそう (;￣∇￣A はは

今後のことも考えて、友人が一人でスタイルシートを変更できるように Movable Type の MTSetVar / MTGetVar を使って一括置換できるようにしてあげました。

結構気に入ってくれたようで、初めてスタイルシートでデザインなどする人にとっては分かりやすいようです。

スタイルシートを書いてると幅や高さ、マージン、色は各要素で統一させたかったりしますよね。
また、レイアウトなどのように要素間で依存するようなときにも威力を発揮します。

MTSetVar / MTGetVar タグを使ってデザインする

MTSetVar、MTGetVar はある値を変数として格納して任意に取り出すことができる優れものですね (￣∇￣)b
これをスタイルシート内で使うことで幅変更、色変更さらにはレイアウト変更などがカンタンにできます。
以下に具体例を記します。

  • 共通な高さを一まとめにする

    たとえば、スタイルによっては幅や高さを統一したいことがありますね。そんなときは以下のように使います。

    1. <mt:setvar name="content_height" value="320">
    2. #content {
    3.     height: <mt:getvar name="content_height">px;
    4. }
    5. #sidebar {
    6.     height: <mt:getvar name="content_height">px;
    7. }

    上記例では高さ 320px を #content、#sidebar 要素で共通して使用する例です。
    フォントカラー、フォントサイズ、背景色にも使えますね。

  • ある要素の幅から計算して幅を設定する

    たとえば、ネガティブマージンを使うときなど便利です。以下に例を記します。

    1. <mt:setvar name="side_width" value="240">
    2.  
    3. #main {
    4.     margin: 0 <mt:getvar name="side_width" value="20" op="+">px 0 20px;
    5. }
    6. #sidebar {
    7.     margin-left: -<mt:getvar name="side_width">px;
    8.     width: <mt:getvar name="side_width">px;
    9. }

    上記は #sidebar 幅（240px）＋マージン（20px） を足した値を #main の右マージンにしたい場合の例です。
    変数 side_width の値を変更して再構築するだけで自動的に計算して決まった法則でレイアウトすることができます。

  • 配色を統一する

    スタイルシートでデザインするとき、各要素の配色を一箇所にまとめておくことで、全体の配色が分かりやすかったりします。
    以下にその例を記します。

    1. <mt:setvar name="anchor_color" value="a22041">
    2.  
    3. #asset a {
    4.     color: #<mt:getvar name="anchor_color">;
    5. }
    6. #sidebar ul li a {
    7.     color: #<mt:getvar name="anchor_color">;
    8. }

と、まぁこんなかんじでスタイルシートを作っていけば、後々変更したいときにきっと楽できると思います (￣∇￣)b

 Trackback Pings(0)

No trackbacks found.

 Comments(2)

#1: Posted by tomo787 @ February 21, 2008 [REPLY]
user-pic

いつも参考にさせていただいてます。

ご質問させていただきたいのですが、
タグの検索結果のページ上部に異なる画像を、検索タグに応じて変化させたいと考えています。

たとえば、MT備忘録さんでいえば、タグ「MovableType」の検索結果ページ上部には、Aという画像。
タグ「4.0」の検索結果ページ上部には、Bという画像を掲載といった感じです。

現状２つの方法を試してみました。


１、MTGetVarのnameに「MTSearchString」を入れる方法
２、MTIncludeのmoduleに「MTSearchString」を入れる方法


上記２つの方法をためしたのでしたのですが、MTSearchStringが動作しませんでした、
MTSearchStringの代わりに直接、「4.0」や「MovableType」を入力すると問題なく
表示できますが、なんとか検索タグに応じて柔軟に変化したいと考えています。
上記方法以外でも、効率的な方法がもしあれば、教えていただけないでしょうか？

長文、駄文ですみませんが、よろしくお願いいたしますブイブイ

 
#2: Posted by Author Profile Page bzbell @ February 21, 2008 [REPLY]
user-pic

>>1 tomo787 さん

こんばんわ^^

要するに 1. の MTSearchString が使えるようになればいいですかうぅ～ん
具体的には以下のようにすれば検索タグを取得することができます。 

<MTSearchResults>
<MTIfTagSearch>
<MTBlogResultHeader>
<mt:setvarblock name="searchtag"><$MTSearchString$></mt:setvarblock>
</MTBlogResultHeader>
検索タグ：「<mt:getvar name="searchtag">」
</MTIfTagSearch>
</MTSearchResults>
ポイントは、
  • 必ず MTSearchResults ブロックタグ内で使用すること。
  • MTSetVarBlock ブロックタグで MTSearchString を取得すること。

以上です。
これでタグに見合ったイメージの表示できますねワクワク !?

 

 Post a Comment

 

コメント用フィード