＞ ＞ ＞ 「Movable Type WEBデザインの新しいルール」発売

「Movable Type WEBデザインの新しいルール」発売

Posted at October 17,2007 1:33 AM
Tag：[Amazon, Book, MovableType]

「Movable Type WEBデザインの新しいルール」がいよいよ発売になります。

Movable Type WEBデザインの新しいルールMovable Type WEBデザインの新しいルール
荒木 勇次郎 松永 英明

翔泳社 2007-10-17
売り上げランキング : 205

Amazonで詳しく見る by G-Tools

「16日発売」と聞いていたので、閉店間際に某書店に行ってみたのですが、これから販売の準備をするようでした（下）。誤った情報を流してしまったこと、お詫び申しあげます。

Movable Type WEBデザインの新しいルール

書籍の内容は次の通りです。

Chapter 01 ｜ MovableType でできること
  • 1-1 効果的・効率的にWeb サイトを運営するために有用なCMS
  • 1-2 CMS として使えるブログツールMovableType
  • 1-3 ブログツールでブログらしくないWeb サイトを作るメリット
  • 1-4 複数ブログを組み合わせた企業サイト運営というアイデア
  • 1-5 Movable Type を使ったWeb サイトの紹介
Chapter 02 ｜はじめてのMovableType
  • 2-1 Movable Type をはじめる際に準備すべきもの
  • 2-2 インストールの概要
  • 2-3 Movable Type4 をダウンロードする
  • 2-4 Movable Type のディレクトリ構成
  • 2-5 サーバへのアップロードとパーミッションの変更
  • 2-6 Movable Type をインストールする
  • 2-7 ブログ記事を投稿・編集する①
  • 2-8 ブログ記事を投稿・編集する②
  • 2-9 ウェブページを作成する
  • 2-10 ファイルをアップロードする
  • 2-11 カテゴリを管理する
  • 2-12 タグを管理する
  • 2-13 アイテムを管理する
  • 2-14 フォルダを管理する
  • 2-15 Movable Type の詳細設定①
  • 2-16 Movable Type の詳細設定②
  • 2-17 ファイルをPHP 化する
  • 2-18 ダイナミック・パブリッシングの概要
  • 2-19 ダイナミック・パブリッシングを設定する
Chapter 03 ｜サイトの見た目を変えてみよう
  • 3-1 テンプレートとは何か
  • 3-2 テンプレートを編集する
  • 3-3 Movable Type のテンプレート構成
  • 3-4 テンプレートを入れ替えてデザインを変更する
  • 3-5 テンプレート・タグの基礎知識
  • 3-6 テンプレート・タグのカスタマイズ
  • 3-7 CSS（スタイルシート）の基礎知識
  • 3-8 CSS プロパティ一覧
  • 3-9 CSS を変更し、テンプレートのデザインを変える
  • 3-10 背景画像を利用する
  • 3-11 カラムレイアウトを変更する
  • 3-12 カラムサイズを変更する
  • 3-13 サイドバーの情報をフッタメニューに追加する
Chapter 04 ｜サイトの構成とMT の設定
  • 4-1 Web サイトの構造を設計する
  • 4-2 ウェブページを使ってカタログ型サイトを作成する
  • 4-3 ブログ記事の保存先を変更してカタログ型サイトを作成する
  • 4-4 必要のないテンプレートタグを削除する
  • 4-5 他のブログツールとMovable Type を組み合わせて使用する
Chapter 05 ｜効果的なサイトへのカスタマイズ
  • 5-1 グローバルナビゲーションでページを切り替える
  • 5-2 パンくずリストを表示する
  • 5-3 コメントリスト・トラックバックリストをブログ記事ごとにツリー表示する
  • 5-4 Feed アイコン・バナーリンクを追加する
  • 5-5 カテゴリーリストにエントリーを表示する
  • 5-6 ブログ記事に同一カテゴリーのブログ記事リストを表示する
  • 5-7 ソーシャルブックマークリンクを追加する
  • 5-8 タグによる効果的なカスタマイズ
  • 5-9 メールフォームを設置する
  • 5-10 SEO 対策とMovable Type
  • 5-11 サイトマップを作り、Google ウェブマスターツールに登録する
  • 5-12 更新PING を送り、アクセスを集めやすくする
  • 5-13 アクセス解析ツールを設置する
  • 5-14 他のブログの更新情報を自動的に掲載する
  • 5-15 Web サイト引っ越しの場合の告知方法
Chapter 06 ｜効率的なブログの管理
  • 6-1 PHP モジュール化とAjax モジュール化
  • 6-2 コメント・トラックバックの管理
  • 6-3 アーカイブマッピングとアーカイブテンプレートの作成
  • 6-4 スケジュール・タスクを設定する
  • 6-5 管理系フィードを利用する
  • 6-6 フィードウィジェットでフィードをブログに表示する
  • 6-7 複数ブログの作成・管理とブログの複製
  • 6-8 ポータル・ブログを構築する
  • 6-9 複数ユーザーを管理する
  • 6-10 ブログデータのインポート・エクスポート
  • 6-11 ブログのバックアップと復元
  • 6-12 Movable Type のアップグレード
  • Movable Type テンプレート・タグ・リファレンス

私が執筆を担当させて頂いたのは、Chapter 02 の2-2～2-19、Chapter 03、Chapter 05の5-1～5-9、Chapter 06、Movable Type テンプレート・タグ・リファレンス、です。

先日講師を担当させて頂いた「WebSig24/7 MT4分科会 第１回イベント」では、MTIf と MTSetVar による条件分岐が話題になりましたが、その技も入っています。

例えば「5-2 パンくずリストを表示する」では、これまで　PHP で制御していたパンくずリストを、MT タグだけで各アーカイブに対応させています。

また、本書でMTのブログ別管理画面で触れていない項目は、「デザイン」→「スタイル」と「デザイン」→「ウィジェットセット」「設定」→「アドレス帳」の3つだけだと思います。これらを除いた他のほぼ全ての操作について網羅しています（多分）。
なおシステムメニューについては一部端折ってますので予めご了承ください。

Posted by yujiro   このページの先頭に戻る
関連記事
関連記事をもっと読む
トラックバックURL


トラックバック

≫ 【レビュー】Movable Type WEBデザインの新しいルール from fakelife
小粋空間で発売を知って先月予約していた書籍が届いたのでレビューを。一応、一通り目... [続きを読む]

Tracked on October 21, 2007 4:22 AM

≫ サイト開設に着手しました from 東京都 港区新橋のトランクルームならSea Trunk Room（シー トランクルーム）
オペレーション部のそれぞれのホームページをサブドメインで管理する目的で、昨日、独... [続きを読む]

Tracked on October 26, 2007 3:01 PM

≫ Movable Type WEBデザインの新しいルール from webkun.org
Movable Type WEBデザインの新しいルール荒木 勇次郎, 松永 英明... [続きを読む]

Tracked on October 26, 2007 4:24 PM
コメント

＞urakibiさん
こんにちは。
コメントありがとうございます。
カスタマイズはある程度3.xでも対応できるものはありますが、明記はしておりません。可能であればサポートサイトで情報を提供していきます（内容的にはコピー＆ペーストが基本です）。
また3.3xからのアップグレードについては触れておりませんので、こちらもサポートサイトで関連情報（というかこのブログで公開している情報へのリンク）は提供していきたいと思います。

MT4の管理画面については画像をふんだんに使っていますので、かなり分かりやすいです。
ではでは！

[1] Posted by yujiro logo : October 17, 2007 2:39 PM

はじめまして。

amazonで予約していましたが、今日発送メールが来ました。
16日とのことだったので、amazonが遅いのかなとおもい、会社近所の書店にほぼ毎日いくので見張っていました（笑

16日というのは出荷だったのかもしれませんね。

自分はMT4からのユーザーなので、4．0ベースの書籍は助かります。
多少は標準テンプレいじってますが、タグなど一通りじっくり見るには自分には書籍があっているのでうれしいかぎりです。

[2] Posted by kalze : October 18, 2007 7:23 PM

＞kalzeさん
こんばんは。
コメント＆ご予約ありがとうございます。
おっしゃるとおり、出荷が16日だったようです。
すでに届いている頃でしょうか。
ではでは！

[3] Posted by yujiro logo : October 20, 2007 2:21 AM

早速書籍を購入しました。MT4対応の書籍と予約で購入し、到着をウキウキしながら待ってました。
しかし、ちょっと私が今、ぶつかっている問題につながる文章は残念ながらありませんでした。
現在、MT4で展開しているのですが、スタイルシート(メイン) styles.cssへカスタマイズすると、再構築後、Mac safari以外は、ことごとくサイト上部にインポートされたはずのcssがテキストで表示されます。

/* This is the StyleCatcher theme addition. Do not remove this block. */ /* Selected Layout: */ @import url(base_theme.css); @import url(/mt-static/themes/minimalist-red/screen.css); /* end StyleCatcher imports */ 以下カスタマイズしたcssが表示の為、省略

styles.cssで、@import urlが効いていない状態です。
この様な方はいらっしゃいませんか？
また、解決方法をご存知の方はいらっしゃいませんか。
情報を集めていますが、今のところ打つ手なしの状態です。
どうぞ、宜しくお願いします。

[4] Posted by くせげ : October 26, 2007 11:18 AM

＞くせげさん
こんにちは。
ご質問の件ですが、「Movable Type 4 のデフォルトテンプレートで @import が表示される問題」が該当しないでしょうか？（異なる事象でしたら申し訳ありません）
それではよろしくお願い致します。

[5] Posted by yujiro logo : October 26, 2007 1:05 PM

早速のコメント、ありがとうございます。
で、結果は「Movable Type 4 のデフォルトテンプレートで @import が表示される問題」が該当しました。ビンゴです！
Perl 5.8.0 のバグとは・・・。
とても助かりました。ありがとうございます。

[6] Posted by くせげ : October 26, 2007 1:41 PM

＞くせげさん
こんにちは。
ご連絡ありがとうございました。
前後しましたが、拙著のご購入、ありがとうございます！

[7] Posted by yujiro logo : October 26, 2007 4:27 PM

はじめまして、書籍を購入した者です。
私は、つい最近Movable Typeを知り、初めて導入したMTが4.01でした。
ネット上にもあまり4.01の情報が無く、何をしていいのやら途方に暮れていました。
「Movable Type WEBデザインの新しいルール」を、じっくり読んでみて、
初心者の私はとても助かりました。ありがとうございます。

現在、「5-6 ブログ記事に同一カテゴリーのブログ記事リストを表示する 」を
実際に挑戦してみているのですが・・・・
「ブログ管理画面より「デザイン→テンプレート→スタイルシート(メイン)」を
選択し、CSSに記事タイトル表示用セレクタ(青地部分)追加する。」
というところで、スタイルシート(メイン)を表示すると、下記のようになっており、

/* This is the StyleCatcher theme addition. Do not remove this block. *//* Selected Layout: */@import url(base_theme.css);@import url(/mt/mt-static/support/themes/005/005.css);/* end StyleCatcher imports */

書籍の説明通りには進まず困っています・・・。
なにか解決方法がありましたら教えてください。
お忙しいところ申し訳ありませんが、どうぞよろしくお願いします。

[8] Posted by 彦にゃん : November 18, 2007 10:40 AM

＞彦にゃんさん
こんにちは。
ご質問の件ですが、5章は基本的に3章のカスタマイズを前提に記載ししています（説明不足で申し訳ありませんが、5章のスタイル関係の変更は、3章のスタイルを変更するカスタマイズを行っておく必要があります。他のカスタマイズもその前提でお読みください）。
もし、デフォルトテンプレートのまま5-6を設定する場合は、手順2の内容を

<div class="comments">
  <h2 class="comments-header">このブログ記事と同じカテゴリのブログ記事</h2>
  <div class="comments-content">
    <ul>
      <MTEntryCategoryEntries>
        <li><a href="<$MTEntryPermalink$>"><MTEntryTitle></a> <$MTEntryDate format="%Y/%m/%d"$></li>
      </MTEntryCategoryEntries>
    </ul>
  </div>
</div>

にしてみてください。
手順3の内容は設定する必要はありません。

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

[9] Posted by yujiro logo : November 19, 2007 1:19 PM

ご返答有り難うございます。
こちらのテンプレートをお借りして、きちんと3章からやってみることにしました。
今、色々試してみてるところですので、がんばってみます。

ありがとうございました。

[10] Posted by 彦にゃん : November 22, 2007 9:41 AM

＞彦にゃんさん
こんにちは。
ご連絡ありがとうございました。
また何かございましたらご質問ください。
ではでは！

[11] Posted by yujiro logo : November 22, 2007 10:41 AM

こんばんわー
かなり遅くなりましたが　やっと著書購入いたいしました。
Webページと連動していて　つかいやすいですね＾－＾
今回　すこしだけ？？？とおもったことがあったので　
生意気にも　フォールドバックしときました＞＜
わたしの　間違いでしたら　申し訳ありません
これからも　お世話になるとおもいますが　よろしくおねがいいたします

[12] Posted by ましゅ : November 27, 2007 6:44 PM

＞ましゅさん
こんにちは。
拙著お買い上げくださりありがとうございました。
フィードバックの内容は別途確認させて頂きます。
ご連絡ありがとうございました。

[13] Posted by yujiro logo : November 27, 2007 7:49 PM

お世話になります。
いつもMTの作成では書籍とともに参考にさせていただいております。

ところで当書籍のChapter3-10で、タイトルを背景画像に入れ替える方法が紹介されていますが、この「タイトルテキストを隠す」ことについて何らかの問題が発生したことはありませんでしょうか？

と申しますのは、私のサイトがつい最近Googleインデックスから除外される事態となり、Googleが「ガイドラインに抵触する隠しリンク・隠しテキスト」だとして指摘された部分が、まさにこのChapter3-10を利用してテキストではなく背景画像を表示させた部分だったからです。

CSSでテキストを隠して画像を表示させるテクニックは多く使われており、書籍で紹介してある例だけが問題となることはありえないのですが、もしそのようなケースを聞いたことがあれば？と思いコメントさせていただきました。

現状ではこちらの掲示板で相談中ですが、まだ解決の決め手は見つかっておりません。
http://www.seobbs.jp/viewtopic.php?t=766

もし情報等ありましたら、お教えいただければ幸いです。
ありがとうございました。

[14] Posted by Fuga : November 17, 2008 11:40 PM

＞Fugaさん
こんばんは。
拙著お買い上げくださりありがとうございます。
またこのたびはご迷惑をおかけしてしまったようで申し訳ありません。
私の方では同様のご連絡は受けておりませんが、隠しテキストと判断されるようであれば、下記のカスタマイズではいかがでしょうか（デザインが書籍のサンプルと異なっているのでコピー＆ペーストでは若干ずれるかもしれませんが）。

http://www.koikikukan.com/archives/2007/11/21-010101.php

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

[15] Posted by yujiro logo : November 18, 2008 1:23 AM

yujiroさん、早速のお返事ありがとうございます。

実はその後確認したところ、著書にあるとおりの利用方法ではなかったことが判明しました。

・h1タグ（ブログタイトル）後にブログの概要を表示するpタグがあった。
・h1タグ、pタグの両方を画像により置換していた。
・その画像にはタイトルロゴもなければ概要の文章も表示していなかった。

以上の件は他のヘッダー項目要素との兼ね合いでこうした対応をしていたのですが、要するに私のCSSテクニックの無さから出てしまったものです。

今回は画像置換無しで、普通にテキスト表示させることで対応しました。

CSSテクニックはこれから磨いて、今後のサイト作成に活かしたいと思います。

これからも著書等でお世話になっていくと思います。
ありがとうございました。

[16] Posted by Fuga : November 19, 2008 12:14 PM

＞Fugaさん
こんばんは。
ご連絡ありがとうございました。
無事にインデックスが再開されることを願ってます。
ではでは。

[17] Posted by yujiro logo : November 21, 2008 11:56 PM
コメントする
greeting

*必須

*必須（非表示）


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

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

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

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