このサイトでは、MT4.2での構築ステップが書かれています。

作成した当時の最新バージョンがMT4.2だった経緯からです。

その後、MT5.0 → MT5.1 がリリースされています。

MT5からは、ウェブサイト>ブログ という概念が新しく加わりました。

そのため、CMSで構築する場合、ウェブサイトをメインとし、複数ブログで構築する手法が推奨されています。

但し、大規模サイトでなければ、MT4.2でのCMS構築手法で、充分イト構築は可能です。

理画面のUIは、MT4とMT5では、上部メニューから、左メニューに変更になっています。

ただ、テンプレートに関しては、ほとんど変更はありません。

ウェブサイトが追加されたので、このテンプレートに関しては、新たなMTタグが加わりましたが、ブログ単位では、ほとんど変更がありません。

なので、MT5ユーザでも、テンプレートのカスタマイズは、この講座ステップでも、活用できると思っています。

多少、メニューなどのナビゲーションが違っていたり、提示されている画像が違うところはありますが、MT5への置き換えが可能でしょう。

CMS構築の一助になれば幸いです(^^)v

このサイトは、スマートフォン表示に対応しています。

スマートフォンでTOPページにアクセスすると、

「このサイト「MovableTypeでCMS構築しよう」にはスマートフォン用のサイトがあります。表示しますか?」とウィンドウが表示されます。

OKをクリックすると、スマートフォン用にカスタマイズされたページが表示されます。

ページ下部に、PCとスマートフォン表示の切り替えリンクがあるので、どちらでも閲覧可能です。

スマートフォン用のテンプレートを追加して構築しました。

jQuery mobile」というフレームワークを利用して、作成してあります。

たくさんのスマートフォンの機種で互換性が保たれており、デザイン、レイアウトなどを気にしないで、HTML5を基本に簡単に作れるツールです。

とはいっても、まだベータ版として、日々改良がなされています。

バージョンアップされ機能追加がされたタイミングで、このサイトのスマートフォン用テンプレートのカスタマイズにも、改良を加えていきたいと思っています。




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タグが加わったことで、テンプレート毎の場合分けもできるようになり、構成がよりわかりやすくなった。

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

PC | スマートフォン