小粋空間  -  a cheap joke and a play on words site

≫ 「東京もつ鍋天国」が、Web Designing 1月号に紹介されました。 from crema design
Web Designing 2009年 1月号の第一特集は、「Webデザイナーの... [続きを読む]

≫ SEO対策セミナー・コンサルティング・塾 from SEO対策セミナー・コンサルティング・塾
本物のＳＥＯ対策！３億２１００万件中１位表示の実績！会員制ＳＥＯサポート塾が遂に開講！ [続きを読む]

ブログのデザインに関して質問してもよろしいでしょうか？　お忙しいところ申し訳ありません。

基本的に、本文（ブログ記事）と右サイドバーを考えています。この右サイドバーを、一部、縦２段にすることを考えています。今使っているわたしのブログが、そのような構成になっています。外国の方が作った WordPress の「テーマ」を使って実現しています。この構造を MT 4.23 で作りたいと思っています。一応、素人考えですが、カスケーディング・スタイルシートを工夫すればできるのではないかと考えました。特に、右のサイドバーを複雑な入れ子構造にすれば、できるように思うのですが。ただ、すごい複雑な入れ子構造を考えなければならないのではと危惧しています。

そこで質問ですが、今の規格で理論的にスタイルシートでこのようなことができますか？　それとも、こういう場合は、違う技術を使うのでしょうか？　それから、このような複雑な構造でも MT 4.23 のウィジェットに対応できますか？　質問は、この２点です。お忙しいところ申し訳ありません。

＞日下部理子さん
こんにちは。
ご質問の件ですが、現在日下部さんご使用のテーマがCSSで実現しているので、MTでも同様のレイアウトは可能と思われます。
どの程度複雑かということについては主観的なものだと思いますが、拝見させて頂いたところ、右サイドバーとCSSは次のようになっているので、それほど複雑ではないと思います。

<div id="sidebar_main">
  <div class="sidebar_full">
    上段
  </div>
  <div id="sidebar_left">
    中段の左
  </div>
  <div id="sidebar_right">
    中段の右
  </div>
  <div class="sidebar_full">
    下段
  </div>
</div>

右サイドバーのレイアウトに関するCSSは次のようになっています。

/* Sidebar */
#sidebar_main {
  float:left;
  margin: 0 0 0 15px;
  padding: 0 0 20px 0;
  width: 380px;
  height: 100%;
}
 
#sidebar_left {
  float: left;
  margin: 0;
  padding-top: 25px
  width: 180px;
}
 
#sidebar_right {
  float: left;
  margin-left: 15px;
  padding-top: 25px;
  width: 180px;
}
 
.sidebar_full {
  float: left;
  margin-top: 15px;
  width: 380px;
}

MTのウィジェットを利用する場合、分割する単位は、現在ご利用のリストで例えると「Recent Entries」「Categories」「Archives」「Pages」「Recent Comments」などと思いますが全く問題ないと思います。
上の(X)HTMLマークアップであれば、次のようなサイドバー用のテンプレートを作成し、

<div id="sidebar_main">
  <div class="sidebar_full">
    <$mt:WidgetSet name="サイドバー上"$>
  </div>
  <div id="sidebar_left">
    <$mt:WidgetSet name="サイドバー中左"$>
  </div>
  <div id="sidebar_right">
    <$mt:WidgetSet name="サイドバー中右"$>
  </div>
  <div class="sidebar_full">
    <$mt:WidgetSet name="サイドバー下"$>
  </div>
</div>

「サイドバー上」というウィジェットセットに、ウィジェット「Recent Entries」を配置（管理画面でドラッグするだけ）すればOKです。

ウィジェット「Recent Entries」の内容は次のような感じです（省略しているのでそのまま使わないでください）。

<mt:Entries>
  <mt:EntriesHeader>
<h2>Recent Entries</h2>
<ul>
  </mt:EntriesHeader>
  <li><a href="<$mt:EntryPermalink$>"><$mt:EntryTitle$></a></li>
  <mt:EntriesFooter>
</ul>
  </mt:EntriesFooter>
</mt:Entries>

こうしておけば、各ウィジェットを幅のことなるウィジェットセットに入れ替えても対応できるのではないかと思います（多分）。

簡単と思われる手順は次です。

• MTに、サイドバーの（X）HTMLマークアップを（WPの(X)HTMLで）作りこむ
• MTのCSSを、現在使用中のWPのCSSに丸ごと入れ替える（この時点ではレイアウトは当然崩れます）
• MTの既存のマークアップを、WPのCSSに併せて直していく
• どうしても崩れる部分は、WPの(X)HTMLマークアップと照らし合わせて修正

それではよろしくお願い致します。

[2] Posted by yujiro : December 22, 2008 10:01 AM

具体的なところにまで踏み込んで教えていただきありがとうございました。この為に貴重なお時間を使ったのではないかと恐縮いたしております。理解できました（多分！）、と同時に、この内容を読んで「こうやるのか！」と感じ入りました。重ねがさねありがとうございました。

がんばって、 Movable Type 4.23 で自分のデザインを作り上げようと思いました。

＞日下部理子さん
ご連絡ありがとうございました。
一部説明が誤っていたので修正しました（「ウィジェットセット上」→「サイドバー上」）。
ではでは！

[4] Posted by yujiro : December 22, 2008 10:18 PM