MovableTypeでCMS構築しよう

MT5のテンプレートは、MT4.2のテンプレートとほとんど同じです。

2011-08-18T08:06:52Z

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

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

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

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

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

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

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

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

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

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

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

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

スマートフォン用表示にも対応しています。jQuery mobileを利用して構築しています。

2011-08-18T07:24:50Z

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

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

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

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

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

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

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

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

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

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

「MovableType4.2でホームページを作ろう」基礎講座3回シリーズ

2009-11-17T09:25:02Z

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情報などを参考にして、進められるとよいかと思います。

０．インストール設定の確認

2009-11-16T09:47:05Z

０-１．メニュー「設定」

１) 全般

　名前：ブログのタイトル　→　ショップ名

　説明：ショップのコンセプトなどキーワードを入れた文章を作ります。

SEOに効果的な重み付けが自動で行われる

　　　　　　　名前（MTBlogName）　→　h1

　　　説明（MTBlogDescription）　→　h2

]]> ２) 公開

　　　・サイトURLの確認：　このURLがトップページURLとなる。

　　　　　　　　　　　　　　　　独自ドメインを割り当てるところ。

　　　　　　　　　　　　　　　→「サイトパス」のディレクトリにドメインを割り付ける。

MT4.2から、「モジュールオプション」の新機能

　　　　　　キャッシュ機能が加わって構築が早くなりました！

　　　　　　詳細：MovableType.jpのドキュメント

３) ブログ記事

　ブログ記事の入力をしやすく初期設定をします。

・コメント許可、トラックバック許可：チェックをはずす。

・フィールド：概要にチェック（SEO対策）

・アクションバー：両方（更新のとき便利）　確認、保存のボタンのことです。

４）ウェブサービス

　更新通知：記事を書いたら、ここに登録されたURLに通知が行きます。

　　　　　　この設定は、第3回で詳細を設定。（1回では設定は行わない）

これで、初期設定は完了です。

まずは、再構築してみましょう！！

設定したドメインにアクセスすると、以下のページが表示されます。

デフォルトのデザインで、トップページが生成されました。

■この段階でのページ生成

　(1)　トップページ index.html

　(2)　ブログ記事 ****.html（MTが自動で発行する）

　(3)　月別アーカイブ /2008/09/index.html

　(4)　アーカイブページ archives.html

--------------------　

　(5)　RSSフィード atom.xml

　(6)　スタイルシート styles.css

　(7)　その他

０-２．システムメニュー?「設定」

１）ユーザ

・インストール・ウィーザードで設定したログイン情報が設定されている。

・システム管理者として登録されている。

プロフィール画像の登録：ファイルアップロードの練習

　　　　　　　　　　　　　　　→　３回目実習でも利用

　　　　　　　　　　　　　　　→　ブログ管理ページに戻ると「This is you」

※ファイルアップロードの方法は、２．ショップのコンテンツを作ろうでも説明あり

１．ショップ(サービス)のメニューを設定しよう

2009-11-15T09:14:04Z

１-１．サンプルショップのサイトマップ

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

]]> １-２．アーカイブテンプレートのパス設定

１）アーカイブマッピングの変更

上記のサイトマップ構造になるようなファイルを生成するように、パスを設定する。

デザイン＞「テンプレート」＞アーカイブマッピング

・　カテゴリ別ブログ記事リスト　

　　　　　category/sub-category/index.html

・　ブログ記事

　　　　　category/sub-category/entry-base.html

２）保存後、テンプレート一覧でアーカイブパスの確認

　　アーカイブパスと公開（スタティック）表示を必ず確認！

　　「確認」-「保存」の順序で行うと、「公開」の選択が

　　　「スタティック(既定)」が「公開しない」になっている場合がある。

　　　（MT4.2のバグ？注意！！）

１-３．メニューをカテゴリに登録

１）メニュー「一覧」カテゴリを選択

　２）「トップカテゴリを作成」をクリックすると、入力フォームが表示

　以下のカテゴリを入力フォームの表にそって入力する。

ex)<100> の半角記号数字を頭にいれる　→　カテゴリ表示順番のコントロール

2)入力フォーム	表示名	3)出力フォルダ名
<100>新着情報	新着情報	news
<200>プレスリリース	プレスリリース	press
<300>商品とサービス	商品とサービス	products
<400>お客様の声	お客様の声	voice
<500>店長ブログ	店長ブログ	blog
<600>アクセス	アクセス	access

３）カテゴリ一覧から、各カテゴリ名をクリックし、出力フォルダ名を設定する

出力フォルダには、すでにMTが自動で設定した名前がはいっているので、

フォーム右横の鍵マークをクリックして、入力可能にしてから、表の名前を入れる。

出力フォルダ名：半角英数字のみ入力可能

同じくファイルのアップロードのファイル名も半角英数字のみアップロード可能

４）サブカテゴリの作成

・「商品とサービス」にサブカテゴリを作成

・「商品とサービス」行の　新規作成　をクリック

・トップカテゴリと同じ要領で入力していく

2)入力フォーム	表示名	3)出力フォルダ名
<100>新着情報	新着情報	news
<200>プレスリリース	プレスリリース	press
<310>Aグループ	Aグループ	a-group
<320>Bグループ	Bグループ	b-group
<350>Cグループ	Cグループ	c-group
<400>お客様の声	お客様の声	voice
<500>店長ブログ	店長ブログ	blog
<600>アクセス	アクセス	access

　５）トップページの再構築

カテゴリが、サイドメニューに表示されたことを確認する。

数字が表示されているが、第2回実習で表示しないようにする。

tips：その１：便利なプラグイン

　カテゴとフォルダを並べるプラグイン（作：藤本壱、フリー）

　これを利用すると、頭に数字をつけるというコントロールの必要がなくなる。

１-４．フォルダの登録

１）メニュー「一覧」フォルダを選択

　２）「トップレベルフォルダを作成」をクリックすると、入力フォームが表示

以下のフォルダを入力フォームの表にそって入力する。

2)入力フォーム	表示名	3)出力フォルダ名
<100>会社案内	会社案内	policy
<200>プライバシーポリシー	プライバシーポリシー	profile
<300>お問合せ	お問合せ	inquiry

３）フォルダ一覧から、各フォルダ名をクリックし、パスを設定する

４）トップページの再構築

　サイドメニュー「ウェブページ」に表示される。

２．ショップのコンテンツを作ろう

2009-11-14T10:12:05Z

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

２-１．商品ページの作成

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

２）商品写真のアップロード

　　・「参照」ボタンをクリック、写真を選択

　　・アップロード先：サイトパス／images　を入力。画像はimagesフォルダに保存

　　・「アップロード」ボタンをクリック

tips：その２：便利なプラグイン

　アイテムの種類によってフォルダを自動で振り分けてくれるプラグイン

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

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

]]>

　３）アップロード写真の設定

　　・　「アップロードしたファイルを使ってブログ記事を作成する。」にチェックすると

　　　　自動でブログ記事の新規作成ページが開き、本文に画像が挿入される。

　　・サムネイル（画像を小さくする）、ポップアップ指定

　　・位置の指定

チェックボックスへのクリックは、多少癖があるため、慣れるまでは少しやりにくいかも。

４）ブログ記事の投稿

　タイトル：　商品名

　本文：　商品情報その１（商品説明）

　続き：　価格、サイズ、賞味期限など商品の基本情報

　概要：　商品の概要を主語、述語で表記します。

　キーワード：　商品に関連するキーワードを、半角カンマ区切りで10個以下

　カテゴリの選択：　商品とサービス

　「確認」　→　「保存」

２-２．それぞれのカテゴリに対応した記事を書いてみよう

・カテゴリメニューの記事を投稿する。

次回までに各カテゴリ１記事、エントリー（ブログ記事を書く）練習を行う。

ファイルのアップロードも適宜、行う

　 ※画像ファイル名は、半角英数字に直してからアップロードすること！！

３．スタイルを選択しましょう

2009-11-13T10:27:03Z

３-１．メニュー「デザイン」?スタイル

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

「デザインを適用」ボタンをおすと、上部（緑バック）に保存しました。再構築してください。とメッセージが表示されるので、再構築のリンクをクリックすると、ページの再構築がはじまります。

終了後、ページを確認すると、選択されたデザイン、赤イメージからグリーンに、3カラムから2カラムに変更されています。

このデザインテンプレートを採用して、次回以降、進めて行きます。

これで、第1回(3時間コース)は終了。

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

４．第２回講座までの宿題！

2009-11-12T02:21:37Z

０-３章までが、第1回の講座内容として進めました。

次回、第２回の講座までに受講者のみなさんに、宿題を出しました。

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

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

２）商品写真を用意する

　　　　サイズ：幅３００?５００pxの画像　×　４枚

　　　　ファイルのアップロード機能でアップロードしておく。

３）忘れないように次回までに最低２回はログインすること。

　　　　とにかく触ってみることがいちばんです。怖がらずにいろいろ試してみましょう！

５．ウェブページを作ってみよう

2009-11-11T02:29:34Z

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

５．ウェブページを作ってみよう

５-１．「ウェブページ」と「ブログ記事」との違い

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

「ブログ記事」-　基本的には時系列に表示されるためのデータ

　　　　　　　　　　　ページの追加、更新としてWebコンテンツを成長させていく。

「ウェブページ」-　単独ページとして存在します。

　　　　　　　　　　　　具体的には、Webサイトの基本情報、会社案内、特定商取引法など

　　　　　　　　　　　　第１回で設定した「会社案内」「プライバシーポリシー」「お問合せ」

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

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

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

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

]]> ５-２．ウェブページの作成

１）メニュー「新規作成」?ウェブページ

タイトル：フォルダで設定した名前

フォルダ：フォルダで設定したフォルダ名を選択

公開-ファイル名：index

○「本文」「続き」の文字などの装飾について

MTの標準機能

　・フォーマット - 「リッチテキスト」HTMLタグが反映されるモード（装飾モード）

　・文字を選択し、上部アイコンをクリックすると適応される。

　　　可能な文字の装飾

　　　　　文字の大きさ、メールリンク、アンカーリンク、インデント、

　　　　　箇条書き、文字寄せ、画像挿入、ファイルの挿入、HTMLタグ表示

その他の装飾をしたい場合は・・・

　・ソース表示(アイコン最右側＜A＞)に切り替えて、直接HTMLコードを記述

　・ホームページ作成ソフトで作成したレイアウトのHTMLソースをコピーし、ソースコードを貼りつけ。

　・cssコードの設定

tips：その３　：便利なプラグイン

　　　MT用のWYSIWYGエディタ　FCKeditor（作：蒲生トシヒロさん)

　　　ブログ記事の加工(文字色、表組みなど)ができるツール

６．テンプレートの構成を理解しよう

2009-11-10T02:47:29Z

６-１．カスタマイズするときに必要

１）メニュー「デザイン」-テンプレート

・テンプレートの構成

【インデックステンプレート】

　・　メインページ　index.html

　・　アーカイブインデックス　archives.html

　・　スタイルシート　styles.css

　・　Javascript　mt.js

　・　RSD　red.xml

　・　最新記事のフィード　atom.xml

【アーカイブテンプレート】

　・　ウェブページ

　・　カテゴリ別ブログ記事リスト

　・　ブログ記事

　・　月別ブログ記事リスト

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

　----------------------------------------------------------------------------------------------------

　●テンプレートモジュール?上記のテンプレートを構成する部品

　　・　HTMLヘッダー

　　・　コメント

　　・　サイドバー

　　・　トラックバック

　　・　バナーフッター

　　・　バナーヘッダー

　　・　ブログ記事の概要

　自分でオリジナルのモジュールを作ることで、カスタマイズしやすくする。

　テンプレート共通で使用するものはモジュール化すると便利。

　MT4からは、MTIFタグが加わったことで、テンプレート毎の場合分けもできるようになり、構成がよりわかりやすくなった。

●ウィジェットセット

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

]]> ２）メインページの構成

・テンプレートの編集

　左コンテンツ

　　・テンプレートの名前

　　・テンプレートの中味（エディタ）

　　・テンプレート設定

　右メニュー

　　・ショートカットメニュー

　　・インクルードテンプレート(構成されているモジュール一覧)

　　　名前をクリックすると、そのテンプレートの編集ページへ行く

　　・タグリファレンス

　　　使用されているMTタグの一覧

各モジュールの構成

３）メニューの構成を変更してみよう

○　ウィジェットテンプレートについて

　・メニューの順番を変えてみよう

　（１）ウィジェットをつまんで移動　-　メニュー関連「アーカイブウィジェットグループ」「ページ一覧」を上部に移動してみる。→　変更を保存

　（２）「インデックスのみ」再構築で、移動を確認

トップページのメニュー表示順番が変わっています。

「すべて再構築する」で更新すると、全てのページでメニューの変更が行なわれます。

４）メニューのソート数字を消そう

第1回の「１．ショップ(サービス)のメニューを設定しよう」で設定したカテゴリのメニューには、設定したとおり頭に数字が表示されています。

この数字を消すカスタマイズを行ないます。

（１）　カテゴリメニュー

・ウィジェット　[アーカイブウィジェットグループ]?[カテゴリアーカイブ]の編集

テンプレートの中味


 
 
   メニュー
    
     
       
       
       
       
          
              title="<$mt:CategoryDescription remove_html="1"
　　　　　 　encode_html="1"$>">
         <$mt:CategoryLabel remove_html="1"$> 
             (<$mt:CategoryCount$>) 
       
         
<$mt:CategoryLabel remove_html="1"$>
       
       <$mt:SubCatsRecurse$>

追加コード

削除コード　-　カテゴリの個数を消去する

（２）ウェブページメニュー

・ウィジェット　[ホームページウィジェットグループ]-[ページ一覧]の編集


 
 
   はじめての方へ
   
     
     
         
         
       <$mt:PageTitle$>
     
     
     
       
               <$mt:FolderLabel remove_html="1"$>
     
    
    
    
      
        <$mt:PageTitle$>
    
    
    
        
      
      <$mt:SubFolderRecurse$>

追加コード

５）フッター部を自分のcopyrightに変更しよう

テンプレートモジュール　-　[バナーフッター]


 
   
     
       
         
        Powered by 
             <$MTProductName$>
         
       
 
            
                
                  このブログは
                  クリエイティブ・コモンズでライセンスされています。

変更　コード　

↓

著作権表示：

　西暦：制作年、2003-2008と制作年をすべて書くタイプもある。

　社名：一般的にローマ字表記、漢字で表記してあるところもあり。

Tips：その４　高機能エディタ

　テンプレートを、高機能エディタを利用して編集する。

　MT管理ページのテンプレートフォームは使いにくいので、中味をコピーして、「やり直し」「検索」機能などが利用できるエディタで効率をあげる。

また、別ファイルとして保管もできるため、テンプレートのバックアップとしても利用できる。

　フリーの高機能エディタ：サクラエディタ

　シェアウェア：秀丸エディタ、Emeditorなど

７．商品ページを管理しやすく構築しよう?カスタムフィールドの利用

2009-11-09T06:23:15Z

７-１．カスタムフィールドの設定

１）商品価格の作成

　・「設定」-　カスタムフィールド

　・システムオブジェクト：ブログ記事

　・名前：価格

　・説明：フォームを入力する際の注意書き

　・種類：テキスト

　・テンプレートタグ：item_price

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

]]>

２）設定したカスタムフィールドの項目を反映させる

　「新規作成」-「ブログ記事」

　　　　・表示オプションをクリック

　　　　　　フィールド項目の「価格」にチェックを入れる。→「OK」ボタン

　　　　・ページを更新すると、「本文」の下に「価格」フォームが表示される。

３）ブログ記事テンプレートの変更

（１）新モジュールを追加する

　・「デザイン」-　テンプレート

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

　　　テンプレート名：商品詳細フィールド

　　MTタグ：


　
 　
   　 価格: 円

　<A>　：　編集時は、モードで操作

　インデントする場合、全角スペースは、入れないように。

（２）テンプレート：ブログ記事に（１）のモジュールを挿入

　５７行目：<$mt:EntryBody$>の下部に挿入


　<$mt:Include module="商品詳細フィールド"$>

アーカイブテンプレートのプレビュー表示（「確認」ボタン）を行うと、公開の状態が、「公開しない」に勝手になっている場合がある。ページが生成されなかったり、更新していないときは要確認！

同様に、商品番号、買い物カゴタグなど、商品ごとに固有なフィールドを設定することで、定型ページを作ることができる。

４）ブログ記事の「価格」欄に価格＝数字をいれて保存

価格が表示されます。

価格表示には、スタイルシート設定、class="g-price"に赤文字、文字サイズが設定されています。

８．スタイルシート(CSS)を編集できるようにしよう

2009-11-08T07:48:20Z

８-１．現状のスタイルシート

１）スタイルシートとは？

　・デザイン設定を行っているところ。

　　枠（ブロック）のサイズ設定。　文字や画像のデザイン設定。

　・テンプレートのhtmlタグを制御

　・テンプレートにid、classを設定してデザインを制御

２）styles.css　でCSSを管理している

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

　・blog.css　-　ベースとなるCSS。「デザイン」。

　　　　　　　　　　　スタイルで、デザインスタイルを変更してもこのスタイルシートは、

　　　　　　　　　　　どれも共通に使用している。（ブロックサイズはすべて同じ）

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

　　　　　　　　　　　　　　　このスタイルシートでデザインのスタイルが変更される。

]]> ８?２．スタイルシートを編集できるようにする

　　header.png　-　ヘッダー部分の画像（1090px×201px）

　　※講座ではFTPができなかったので、あらかじめMT規定のディレクトリから取り出した画像ファイルをアップロードしてもらい、画像の位置を認識してもらう作業を行ないました。

　(1)　アップロード先　：　サイトパス/　css

　(2)　「アップロードしたファイルを使ってブログ記事を作成するのチェック」をはずず

　(3)　「完了」ボタン

２）スタイルシート２つを管理ページで新規作成

　※講座ではFTPができなかったので、あらかじめMT規定のディレクトリから取り出したcssファイル「hills-green.css」「blog.css」を各人に提供しました。

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

　(1)　インデックステンプレートを作成

　(2)　名前：hills-green.css

　(3)　hills-green.cssをエディタで開いて、MTエディタにコピー

　(4)　テンプレート設定

　　　　出力ファイル名：　css/hills-green.css

　　　　テンプレートの種類：スタイルシート(styles)

　　　　「保存」ボタンをクリックして保存

　(5)　保存すると、以下のボタンになるので、「保存と再構築」ボタンを押す。

　　　これで、サーバにスタイルシートが保存される。

　(6)　blog.cssも(1)?(5)の手順で作成する。　

３）スタイルシート(styles.css)の変更

　(1)　インデックステンプレート?「スタイルシート」の変更

・変更前


 * This is the StyleCatcher theme addition. Do not remove this block. */
 @import url(http://TOPページURL/mt-static/themes-base/blog.css);
 @import url(http://TOPページURL/mt-static/support/themes/
                                 hills-green/hills-green.css);
 /* end StyleCatcher imports */

　mt-static/themes-base/ 　を削除して、css/を挿入

　mt-static/support/themes/hills-green/ を削除、css/を挿入

・変更後


 * This is the StyleCatcher theme addition. Do not remove this block. */
 @import url(http://TOPページURL/css/blog.css);
 @import url(http:// TOPページURL /css/hills-green.css);
 /* end StyleCatcher imports */

　(2)　「保存と再構築」ボタンを押し、再構築４）管理ページ上からCSS設定が可能に！

　　　・ちょっと変更してみましょう。

　　　・価格を大きく、赤文字に・・・！

　　　→７．ページの管理をしようの最後の画像、価格のスタイルシートを設定してみました。

　hills-green.cssに以下を追加


 .g-price {
     color: red;
     font-size: 16px;
 }

９．第3回講座の宿題！

2009-11-07T08:00:26Z

　第2回の講座が終了しました。

　次回、3回の講座のための、事前準備の課題を用意してください。

１）新着情報を5件

　　　カテゴリ「新着情報」の記事を「タイトル」を工夫して作成

　　　→　内容が見えるようなタイトル、少し長め

　　　　「本文」もテキスト文のみでよいので、適当な文章をいれておく。

　※記事を書く練習、ブログ記事の入力になれる練習です。

　　自社の商品もどんどん登録します。価格も設定できますから商品ページが即座に作れます。

　２）トップページに入れるイメージ画像

　　　５５０pxの画像。文字入れなどOK。

　　　自社のイメージ画像、もしくは売れ筋商品など、なんのサイトかすぐにわかる画像がよいですね。

　３）ヘッダー画像

　　　９００pxの画像。

　　　もしなければ、こちらでダミーの画像を用意。

　　社名、Webショップ名、連絡先などが明記されている画像がおすすめ！。

　次回は、最終第3回「効果的なカスタマイズをしよう」です。

１０．トップページのカスタマイズ

2009-11-06T00:46:35Z

いよいよ最終章、第3回です。

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

１０-１．新着情報カテゴリの最新記事を３件表示しよう。

１）モジュールを流用・変更

　・ウィジェットテンプレート「最近のブログ記事」を参考にします。

　　メニュー「デザイン」?ウィジェット?ウィジェットテンプレート一覧

最近のブログ記事：


 
   
      
 
   最近のブログ記事
   
     
     
       
                              <$mt:EntryTitle$>

解説：

　・　　ブログ記事が存在している場合

　・　　ブログ記事、最新１０件を表示

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

２）テンプレートモジュールの作成

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

名前：top-news

　上記テンプレートの変更内容

　　　・カテゴリ「新着情報」の最新記事を３件

　　　→　

　　　・タイトルの変更　→　○○ショップ新着情報

　　　・出力内容：日付、本文の頭の２０文字表示

　　　→　<$mt:EntryBody words="40"$>　<$mt:EntryDate format="%x">

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

 
    
        
 
  ○○ショップ新着情報
  
    
    
  <$mt:EntryDate format="%x"$>：
 <$mt:EntryTitle$>

      <$mt:EntryBody words="40"$>

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

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

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

　・の上に挿入

２１行目あたり


       
          
 ="" module="top-news" <$mt:include="">
 
 
                            
   <$mt:Include module="ブログ記事の概要"$>

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

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

]]>

　「○○ショップ新着情報」(画像では、2件の新着情報が表示されている）

tips：その５：MTタグの一覧

ＭＴタグの一覧、使い方が紹介されているサイト

　　・ＭＴタグリファレンス

　　・日付のフォーマット（モディファイアリファレンス）

１０-２．メインイメージ画像を表示させよう

１）１０-１と同様に、モジュールテンプレートを作成

　画像を表示させるためのhtmlタグは、imgタグ

　例)

　アップロードしたメイン画像名が、「main_banner.jpg」でサイズが550×300の場合

２）画像位置等のデザインを調整するためのスタイルシートを設定して作成

　名前：main-banner

３）メインページへモジュールを挿入

　<$mt:Include module="main-banner"$>

　↓

　前回挿入した　<$mt:Include module="top-news"$>　の上に追加

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

４）スタイルシートを設定

　以下のスタイルシートを、hills-green.cssに設定することで、画像の位置を調整する。

　画像の上、右、下、左の間隔設定


 #main-header {
    　margin: 10px 10px 10px 0;
 }

　画像の位置をスタイルシートで調整する。

　現状の全体サイズ940pxで、コンテンツ幅は750px。

　なので、もしこのサイズで運用する場合は、画像は右コンテンツの740px以下のサイズでもＯＫ。

　今回は、全体幅を縮小することを前提で550pxサイズ画像を挿入した。

１０-３．人の見えるショップにしよう

　第１回講座「０．インストール設定の確認＞０-２．システムメニュー-「設定」」でアップロードしたプロフィール画像を、Webショップオーナーとしてサイドバーに表示します。

１）プロフィール画像のモジュールを作成

　グローバルテンプレートのテンプレートモジュール「プロフィール画像」を参考。

　グローバルテンプレートとは？

　複数ブログに共通なテンプレート

　複数ブログで構築する場合、デザインの統一性が図れる。

　また、独立したブログでも、共通モジュールが利用できる利点がある。

　左上リンク　→　「システムメニュー」?デザイン　?テンプレート

　または、

　右上リンク(ブログタイトルをクリック)　→　「システムメニュー」?グローバルテンプレート

　テンプレートモジュール　?　「プロフィール画像」を参照

※このモジュールは、主にブログ記事テンプレートで使用するものなので、

　今回は、サイドメニュー用として新規に作成する。

２）ウィジェットテンプレートを作成

　「２カラムのサイドバー」ウィジェットセットに追加するためにウィジェットテンプレートを新規作成

　（メニュー「デザイン」-　ウィジェット　-　「２カラムのサイドバー」）

　・メニュー「デザイン」-　ウィジェット　-　ウィジェットテンプレートを作成

　名前：profile-menu

 
 
    ショップマスター
    

    
    登録ユーザー (プロフィール画像登録あり)
    
    " width="80" />
    
    <$MTAuthorDisplayName$>
    
    登録ユーザー (プロフィール画像登録なし)、
                                           未登録ユーザー
    images/
                         default-userpic-90.jpg" width="80" />

「保存」で　profile-menu が新規作成される。

３）ウィジェットセット「２カラムのサイドバー」にセット

　利用可能の一覧に「profile-menu」が表示されているので、インストール済み一覧の中の表示したい箇所に、つまんで移動する。

４）各種テンプレートを再構築

　サイドバーはすべてのテンプレートの共通に使われているので、それぞれのテンプレートを更新する。

５）スタイルシートの設定

　画像位置の調整


 .userpic {
     margin: 10px 10px 0 30px;
 }

１１．ＭＴでのＳＥＯ対策

2009-11-05T01:40:39Z

１１-１．ブログ記事にキーワード、概要の適用

　ＳＥＯ対策の基本であるHTMLヘッダーのmetaタグであるKeywords、Descriptionを自動で出力する。

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

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

　「キーワード」→　Keywords

　「概要」→　Description

　を対応させる。

２）テンプレートモジュールの作成

　名前：meta-seo

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

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

・の前に挿入

tips：その６：初期設定からＳＥＯ対策

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

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

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

]]> １１-２．ｈタグの使用

　タグとは？

　タグとは、見出しを設定するためのタグで、

?

まで6段階のレベルの見出しを定義します。

が最も上位のレベルでフォントサイズも大きくなり、

が最も下位レベルとなりフォントサイズも小さくなります。

　最近は、スタイルシートで文字の大きさをコントロールしている。

→

のように重要度が高いものから使用する。

?

を同一ページ内で複数使用しないこと

　例）

見出し１

見出し２

　　　　　　ここに文章を記載する。

見出し３

　　　　　　ここに文章を記載する。

見出し２

　　　　　　ここに文章を記載する。

見出し３

　　　　　　ここに文章を記載する。

　ＭＴの各種テンプレートは、このｈタグに文法上、きちんと対応しているため、ＳＥＯ効果も高いといわれている。

　テンプレートをカスタマイズする場合、このｈタグの構造を壊さないようにしなければならない。

　カスタマイズした「１０-１．新着情報カテゴリの最新記事を３件表示しよう」の

　モジュールテンプレートに適応させます。

１）新着情報モジュール(top-news)の変更

　top-newsの内容をコピー、参考にして、top-news2を新規に作成する。

　名前：top-news2

 
  
  
    ○○ショップ新着情報
    
      <$mt:EntryDate format="%x"$>：
        <$mt:EntryTitle$>
       <$mt:EntryBody words="40"$>

　ｈ２、ｈ３タグに変更。

　他のサイドメニューの構成と同じ設定に変更した。

　ｈ２、ｈ３のスタイルシート名で、調整することでレイアウトデザインを設定することが可能になる。

　設定スタイルシート名

　new-entries、news-title、news-header

MovableTypeでCMS構築しよう

MT5のテンプレートは、MT4.2のテンプレートとほとんど同じです。

スマートフォン用表示にも対応しています。jQuery mobileを利用して構築しています。

「MovableType4.2でホームページを作ろう」基礎講座3回シリーズ

０．インストール設定の確認

１．ショップ(サービス)のメニューを設定しよう

２．ショップのコンテンツを作ろう

３．スタイルを選択しましょう

４．第２回講座までの宿題！

５．ウェブページを作ってみよう

６．テンプレートの構成を理解しよう

メニュー

はじめての方へ

７．商品ページを管理しやすく構築しよう?カスタムフィールドの利用

８．スタイルシート(CSS)を編集できるようにしよう

９．第3回講座の宿題！

１０．トップページのカスタマイズ

最近のブログ記事

○○ショップ新着情報

ショップマスター

１１．ＭＴでのＳＥＯ対策

?

まで6段階のレベルの見出しを定義します。

が最も上位のレベルでフォントサイズも大きくなり、

が最も下位レベルとなりフォントサイズも小さくなります。

→

→

のように重要度が高いものから使用する。

?

見出し１

見出し２

見出し３

見出し２

見出し３

○○ショップ新着情報

<$mt:EntryDate format="%x"$>： <$mt:EntryTitle$>