2009年11月アーカイブ

MT4になってブログツールからCMS構築ツールとなったMovableType。
MT4.0→4.1→4.2とバージョンアップするにつれて、ようやく誰でもちょっとだけ頑張れば!
CMS構築ツールとして使うことができるようになってきました。

そこで、MT4.2がインストールされているという条件付きで
(講座のPC環境上、FTPができず、インストール作業、レクチャーが不可^^;)

MTをCMS(Webサイト)として作成するという講座を行いました。
1人に1台のPCのもと、自分のMTへログインしての実技講座です。
 
そのレジメをもとに、改定も加え全3回シリーズでアップしました。
 
■第1回CMSとしてのMT基礎を学ぼう
 
■第2回具体的なページを作ってみよう
 
■第3回効果的なカスタマイズをしよう
 
 
なお、レジメは、講座のメイン教科書ではなく、あくまで講座説明の内容を補足する意味合いが強いものです。なので、MT関連図書やWeb上のMT情報などを参考にして、進められるとよいかと思います。
 

0.インストール設定の確認

0-1.メニュー「設定」

1) 全般

 名前:ブログのタイトル → ショップ名
 説明:ショップのコンセプトなどキーワードを入れた文章を作ります。

  p005-2_02.gifSEOに効果的な重み付けが自動で行われる
  
       名前(MTBlogName) → h1
    説明(MTBlogDescription) → h2

mt0-11.jpg
1-1.サンプルショップのサイトマップ

このような構造のサイトをサンプルとして作成する。

sitemap-mt.jpg

2.ショップのコンテンツを作ろう

メニューの設定が完了したので、各ページ(ブログ記事)を作成します。

2-1.商品ページの作成

1)メニュー「新規作成」?ファイルのアップロード

2)商品写真のアップロード

  ・ 「参照」ボタンをクリック、写真を選択
  ・ アップロード先:サイトパス/images を入力。画像はimagesフォルダに保存
  ・ 「アップロード」ボタンをクリック

mt2-1.jpg
16-security-key.pngtips:その2:便利なプラグイン
 アイテムの種類によってフォルダを自動で振り分けてくれるプラグイン

 MovableType用UploadDir Plugin(作:エムロジック放課後プロジェクト)

 画像 → images、エクセルファイル → xls、 PDF → pdf など


3.スタイルを選択しましょう

3-1.メニュー「デザイン」?スタイル

 デザインスタイルを、デフォルトデザインから『Hills Green 2カラム 小・大』 に変更します。

mt3-1.jpg
 
「デザインを適用」ボタンをおすと、上部(緑バック)に保存しました。再構築してください。とメッセージが表示されるので、再構築のリンクをクリックすると、ページの再構築がはじまります。
終了後、ページを確認すると、選択されたデザイン、赤イメージからグリーンに、3カラムから2カラムに変更されています。
このデザインテンプレートを採用して、次回以降、進めて行きます。
これで、第1回(3時間コース)は終了。

次回からは、第2回「具体的なページを作ってみよう」がはじまります。

4.第2回講座までの宿題!

0-3章までが、第1回の講座内容として進めました。
次回、第2回の講座までに受講者のみなさんに、宿題を出しました。

1) フォルダ作成したメニューの内容(ブログ記事)を考えてくる

    会社案内、プライバシーポリシー

2)商品写真を用意する

    サイズ:幅300?500pxの画像 × 4枚
    ファイルのアップロード機能でアップロードしておく。

3)忘れないように次回までに最低2回はログインすること。
 
    とにかく触ってみることがいちばんです。怖がらずにいろいろ試してみましょう!

5.ウェブページを作ってみよう

第2回「具体的なページを作ってみよう」の5?9章です。

5.ウェブページを作ってみよう

5-1.「ウェブページ」と「ブログ記事」との違い

「ウェブページ」は、MT4になってから加わった機能です。つまりCMS強化されたときに生まれた機能で、CMS構築しやすくするための機能の一つとして考えます。

「ブログ記事」- 基本的には時系列に表示されるためのデータ
           ページの追加、更新としてWebコンテンツを成長させていく。

「ウェブページ」- 単独ページとして存在します。
            具体的には、Webサイトの基本情報、会社案内、特定商取引法など
            第1回で設定した「会社案内」「プライバシーポリシー」「お問合せ」

p005-2_02.gifわかりやすい図解として、MovableType.jp MTドキュメントのページの下方図を参考にしてください。


またウェブページは、カテゴリメニューの表示の制御が難しいため、ヘッダーメニューなどグローバルメニューとして設定されるメニューコンテンツを対象としても利用されます。


MT4以前では、カテゴリにすべてのメニューを割り当てていたため、カテゴリの制御が難しいことがありましたが、ウェブページと区分けすることで、カスタマイズ、デザイン設定などが柔軟に行えるようになりました。

そこで、会社案内、プライバシーポリシー、(特定商取引法)のページを作ることにします。


6.テンプレートの構成を理解しよう

6-1.カスタマイズするときに必要

1)メニュー「デザイン」-テンプレート

mt6-1.jpg
・テンプレートの構成

【インデックステンプレート】
 ・ メインページ index.html
 ・ アーカイブインデックス archives.html
 ・ スタイルシート styles.css
 ・ Javascript mt.js
 ・ RSD red.xml
 ・ 最新記事のフィード atom.xml


【アーカイブテンプレート】
 ・ ウェブページ
 ・ カテゴリ別ブログ記事リスト
 ・ ブログ記事
 ・ 月別ブログ記事リスト

【システムテンプレート】
 ----------------------------------------------------------------------------------------------------

 ●テンプレートモジュール?上記のテンプレートを構成する部品
  ・ HTMLヘッダー
  ・ コメント
  ・ サイドバー
  ・ トラックバック
  ・ バナーフッター
  ・ バナーヘッダー
  ・ ブログ記事の概要


 自分でオリジナルのモジュールを作ることで、カスタマイズしやすくする。
 テンプレート共通で使用するものはモジュール化すると便利。
 MT4からは、MTIFタグが加わったことで、テンプレート毎の場合分けもできるようになり、構成がよりわかりやすくなった。

●ウィジェットセット
 さらに細かい部品の集まり。ウィジェットの集まりがウィジェットセット。
 

7-1.カスタムフィールドの設定

1)商品価格の作成

 ・「設定」- カスタムフィールド
 ・システムオブジェクト:ブログ記事
 ・名前:価格
 ・説明:フォームを入力する際の注意書き
 ・種類:テキスト
 ・テンプレートタグ:item_price

mt7-1.jpg

「種類」の選択によって、ラジオボタン、プルダウン、チェックボックスなどの選択項目としても利用できる。


8-1.現状のスタイルシート

1)スタイルシートとは?

 ・デザイン設定を行っているところ。
  枠(ブロック)のサイズ設定。 文字や画像のデザイン設定。
 ・テンプレートのhtmlタグを制御
 ・テンプレートにid、classを設定してデザインを制御

2)styles.css でCSSを管理している

 現状、importで、2つのスタイルシートがリンクされていて、管理ページでは変更することができない。

 ・blog.css - ベースとなるCSS。「デザイン」。
           スタイルで、デザインスタイルを変更してもこのスタイルシートは、
           どれも共通に使用している。(ブロックサイズはすべて同じ)

 ・hills-green.css - デザインが変わると、このスタイルシート名も変わる。
               このスタイルシートでデザインのスタイルが変更される。

9.第3回講座の宿題!

 第2回の講座が終了しました。
 次回、3回の講座のための、事前準備の課題を用意してください。
 
  1)新着情報を5件
   カテゴリ「新着情報」の記事を「タイトル」を工夫して作成
   → 内容が見えるようなタイトル、少し長め
    「本文」もテキスト文のみでよいので、適当な文章をいれておく。
 
 ※記事を書く練習、ブログ記事の入力になれる練習です。
  自社の商品もどんどん登録します。価格も設定できますから商品ページが即座に作れます。

 2)トップページに入れるイメージ画像
   550pxの画像。文字入れなどOK。
 
   自社のイメージ画像、もしくは売れ筋商品など、なんのサイトかすぐにわかる画像がよいですね。

 3)ヘッダー画像
   900pxの画像。
   もしなければ、こちらでダミーの画像を用意。
 
  社名、Webショップ名、連絡先などが明記されている画像がおすすめ!。
 
 次回は、最終第3回「効果的なカスタマイズをしよう」です。

10.トップページのカスタマイズ

いよいよ最終章、第3回です。
Webショップらしくなるように、カスタマイズを行なっていきます。

10-1.新着情報カテゴリの最新記事を3件表示しよう。

1)モジュールを流用・変更

 ・ウィジェットテンプレート「最近のブログ記事」を参考にします。
  メニュー「デザイン」?ウィジェット?ウィジェットテンプレート一覧

mt10-1.jpg
最近のブログ記事:


 <mt:If tag="BlogEntryCount">
   <mt:Entries lastn="10">
      <mt:EntriesHeader>
 <div class="widget-recent-entries widget-archives widget">
   <h3 class="widget-header">最近のブログ記事</h3>
   <div class="widget-content">
     <ul>
     </mt:EntriesHeader>
       <li><a href="<$mt:EntryPermalink$>">
                              <$mt:EntryTitle$></a></li> 
     <mt:EntriesFooter>
     </ul>
   </div>
 </div>
    </mt:EntriesFooter>
    </mt:Entries>
 </mt:If>


解説:
 ・ <mt:If tag="BlogEntryCount"> ブログ記事が存在している場合

 ・ <mt:Entries lastn="10"> ブログ記事、最新10件を表示

 ・ <a href="<$mt:EntryPermalink$>"><$mt:EntryTitle$></a> エントリータイトル表示、その記事へのリンク


2)テンプレートモジュールの作成

メニュー「デザイン」?テンプレート?テンプレートモジュールの作成

名前:top-news

 上記テンプレートの変更内容
   ・カテゴリ「新着情報」の最新記事を3件
   → <mt:Entries category="<100>新着情報" lastn="3">
   ・タイトルの変更 → ○○ショップ新着情報
   ・出力内容:日付、本文の頭の20文字表示
   → <$mt:EntryBody words="40"$> <$mt:EntryDate format="%x">

top-news テンプレートモジュール

 <mt:If tag="BlogEntryCount">
    <mt:Entries category="<100>新着情報" lastn="3">
        <mt:EntriesHeader>
 <div class="widget-recent-entries widget-archives widget">
  <h3 class="widget-header">○○ショップ新着情報</h3>
  <div class="widget-content">
    <ul>
    </mt:EntriesHeader>
  <li><$mt:EntryDate format="%x"$>:
 <a href="<$mt:EntryPermalink$>"><$mt:EntryTitle$></a><br />
      <$mt:EntryBody words="40"$> 
 </li>
    <mt:EntriesFooter>
    </ul>
  </div>
 </div>
    </mt:EntriesFooter>
    </mt:Entries>
 </mt:If>

「保存」ボタンで新規作成、保存。

 
3)「メインページ」テンプレートへモジュールを挿入

 <$mt:Include module="top-news"$> 

  ・<mt:Entries>の上に挿入

21行目あたり


       <div id="alpha">
          <div id="alpha-inner">
 
 <mt:Entries>
 <mt:Ignore><!-- Use the Entry Summary module for each entry published on this page --></mt:Ignore>
                            
   <$mt:Include module="ブログ記事の概要"$>
                            
 </mt:Entries>


 ・「保存と再構築」ボタンで、ページを再構築する。

  新着情報カテゴリが、右コンテンツ上部に表示される。

11.MTでのSEO対策

11-1.ブログ記事にキーワード、概要の適用
 
 SEO対策の基本であるHTMLヘッダーのmetaタグであるKeywords、Descriptionを自動で出力する。

1)アーカイブテンプレート「ブログ記事」のカスタマイズ

 ブログ記事の作成の入力項目である

 「キーワード」→ Keywords
 「概要」→ Description

 を対応させる。

2)テンプレートモジュールの作成

 名前:meta-seo


 <meta name="Description" content="<$MTEntryExcerpt$>" />
 <meta name="Keywords" content="<$MTEntryKeywords$>" />

3)アーカイブテンプレート「ブログ記事」に挿入

<$mt:Include module="meta-seo"$>

</head>の前に挿入




  16-security-key.pngtips:その6:初期設定からSEO対策

<title><$mt:EntryTitle encode_html="1"$> - <$mt:BlogName encode_html="1"$></title>

SEO対策に重要なタグであるtitleタグには、すでに「ブログ記事のタイトル?ブログ名」が自動的にセットされる。

その他、初期設定で高いSEO効果をもたらしている。
 

12.MTでのスパム対策

12-1.コメント、トラックバックの運用方法

 今回の講座では、コメント、トラックバックをオープンしていないが、運用方法によっては、各機能を利用することも有効になる。
 オープンにすることで、スパムコメントやスパムトラックバックが入ってくる。

 標準プラグインで、スパム対策が施されているが、それでもやはりスパムは避けられない。
 メニュー「設定」の
  ・コメント
  ・トラックバック
  ・登録/認証
  ・スパム
 で、調整しながら対策を考える必要がある。


1)MT4からのコメントスパム対策機能 - コメント認証CHAPHA画像

 メニュー「設定」 - コメント - 表示オプション:CAPTHAプロバイダ

 なし → 「Movable Type 既定」を選択。

 これで、コメント表示するものには、認証画像が表示される。

mt12.jpg

参考記事:
MTのコメント設定[CAPTCHA 認証]:その4(タスクマザー)

13.運営をしていくための注意事項

13-1.定期的なバックアップ

1)ブログまるごとバックアップ

 ・システムメニュー「ツール」 - バックアップ
  このメニューで、複数ブログ、またはブログ毎にバックアップすることが可能。

2)エクスポート
 
 ・メニュー「ツール」 - エクスポート
  基本的なデータ(記事、コメント、トラックバック)の保存。

3)FTPでのバックアップ

 ・html、画像ファイルなどをダウンロード
 ・データベースが、SQLiteの場合、そのファイルを定期的にダウンロードする。
 ・MySQLの場合は、phpMyAdminなどのツールがあるので、それを利用。

14.ちょっとだけMTスタイルシート

必ず、CSSのバックアップをとって挑戦してみて下さい。
 
テンプレート>スタイル(StyleCatcher)で選択したhikks-greenのテンプレートcssの変更例。
ヘッダー画像の入れ替え、サイズ変更に伴う各ブロックのサイズ変更についての簡単な変更です。

14-1.ヘッダー画像の変更

1)hills-green.cssの改造



 #header { 
    border-color: #5283b1;  
    background: #cdeaff url(header.png) no-repeat bottom left; 
 }

↓↓↓↓↓↓↓↓↓↓↓


 #header { 
    border-color: #5283b1;  
    background: #cdeaff 
               url(http://トップドメイン/images/変更画像ファイル名)
                  no-repeat top left; 
 }


○元画像とのサイズが、全く同じであればこれでOKですが、幅、高さが違う場合、
以下のCSS変更が最低限必要になってきます。

画像の高さ調節


 #header-content {
    width: 770px; 
    min-height: 74px; 
    margin: 20px 0 116px 20px;
 }


↓↓↓↓↓↓↓↓↓↓↓


  #header-content {
    width: 770px; 
    min-height: 74px; 
    margin: 20px 0 0 20px;
 }

 
  16-security-key.pngtips:その7:CSS編集できる便利なツール
   Firefoxのみで動作
   Web Developer 日本語ツール:ミナトラボ

15.MovableType4.2基礎講座のまとめ

全3回シリーズのMT基礎講座のレジメをアップしました。

この講座は、1回3時間、1人1台PCを使って自分のMTを操作するという形式のものでした。

このレジメ(ページ)は、あくまでも講座で行なう補足用のテキストなので、講義で話す内容は載せてありません。なので、非常にわかりにくいところも多々あると思いますがご了承ください。

MTのノウハウやTips、Q&Aなどは、Web上にたくさん情報がありますので、是非そちらとあわせてお役に立てればよいなぁと思っています。

MTの参考記事として、タスクマザーのプラグイン活用なども参考にしていただければ幸いです。

 

このアーカイブについて

このページには、2009年11月に書かれたブログ記事が新しい順に公開されています。

次のアーカイブは2011年8月です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。