Web Designing (ウェブデザイニング) 2009年 01月号

Web Designing (ウェブデザイニング) 2009年 01月号

Posted at December 21,2008 12:55 AM
Tag:[Amazon, Book]

出遅れましたが、現在発売中の「Web Designing (ウェブデザイニング) 2009年 01月号」に Movable Type 4 の特集が掲載されています。

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

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

Amazonで詳しく見る
by G-Tools

「WebデザイナーのためのMovable Type事例&テクニック集」という特集です。約20ページにわたって、Movable Type を利用して運営されている各サイトのテクニックが紹介されています。

Introduction
  • 今、Movable Typeでできること
Movable Type 事例&テクニック集

また、コラムにはAjax検索・SEOの優位性・いくつかのプラグインが紹介されています。

COLUMN
  • 高速検索を可能にするAjax検索のススメ
  • SEOにおけるMovable Typeの優位性とは?
  • 素晴らしきプラグインの世界

MTファン必見の1冊です。発売されてからあまり日が経っていませんが、街の本屋さんでは品薄のようです。

関連記事
zenback
人気エントリー
トラックバックURL


トラックバック

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

Tracked on December 21, 2008 3:18 AM

SEO対策セミナー・コンサルティング・塾 from SEO対策セミナー・コンサルティング・塾
本物のSEO対策!3億2100万件中1位表示の実績!会員制SEOサポート塾が遂に開講! [続きを読む]

Tracked on December 21, 2008 4:32 AM
コメント

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

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

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

[1] Posted by 日下部理子 : December 22, 2008 1:37 AM

>日下部理子さん
こんにちは。
ご質問の件ですが、現在日下部さんご使用のテーマが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 logo : December 22, 2008 10:01 AM

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

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

[3] Posted by 日下部理子 : December 22, 2008 7:59 PM

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

[4] Posted by yujiro logo : December 22, 2008 10:18 PM
コメントする
greeting

*必須

*必須(非表示)


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

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

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

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