Home > Movable Type Archive

Movable Type Archive

全てのMTブログに同じスキンを適用

【管理画面で】

  1. 「デザイン」→「テンプレート」で画面遷移。
  2. 右下にある「アクション」から「ブログのテンプレートを初期化」をクリック
  3. 遷移画面で「新しいテンプレートセットを適用」にチェックを入れ、「mtVicuna2.1.3」を選択
  4. 「インデックステンプレート」から「スタイルシート」を選択し、既存のものをコピーしてペースト
  5. 「グローバルナビゲーション」を有効にするため、テンプレートモジュール「ヘッダー」内の該当箇所から「<mtIgnore>」タグを削除
  6. 「アーライブテンプレート」から「ブログ記事」に既存のものをコピー&ペースト
  7. 「ユーティリティ」テンプレートで「<$MTInclude widget="最近のブログ記事"$>」を囲んでいる「<MTUnless name="tempName" eq="individual_entry">」「</MTUnless>」を削除。
  8. 保存して再構築

以上

MTにSWFを埋め込む

MTにSWFを埋め込む際の注意。
SWFオブジェクトは、すでにサーバにアップされているものとする。

<!-- SWFOBJECTによる埋め込み --><script type="text/javascript">
swfobject.embedSWF("http://www.ayabin.jp/flashmemo/swf/xxxxx.swf", "myContent", "300", "100", "9.0.0", "http://www.ayabin.jp/flashmemo/swfobject/expressInstall.swf");
</script>
<div id="myContent">
<h1>FLASH PLAYER</h1>
<p><a href="http://www.adobe.com/go/getflashplayer"><img alt="Get Adobe Flash player" src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" /></a></p>
</div>
<!-- SWFOBJECTによる埋め込み終わり -->

埋め込みたい箇所に上記を記述。
同じブログに2つ、3つと複数設置する場合は、2カ所ある「myContent」の名前を変更しなければならない。

ファイルへのパスはすべて絶対パスで!。
FLASH側の処理も同様。特に外部ファイルを読み込む際には注意が必要(FLASH単独では問題なく動くので忘れやすい)。

サイト作成後のフォルダ名変更

サイト作成後にフォルダ名を変更したい場合は、管理画面から「設定」→「公開」を選択し、公開パスの「サイトパス」と「サイトURL」を変更する。当然、それに対するフォルダもサーバ上に必要。

MT4.2インストール

MT4.1から若干インストール手順が変わったようなのでメモ。

  1. xreaのコンパネからデータベースを作成。DBはMySQLでもPostgreSQLでもSQliteでも構わない。
  2. MTオフィシャルサイト「購入方法」からサイト下にある「個人ライセンス(無償)」をクリック。利用許諾に同意してダウンロード
  3. ダウンロードしたzipファイルを開いて、ローカルサーバのドキュメントルートなどにコピペ、フォルダ名を扱いやすいよう短くリネーム
  4. フォルダの中から「mt-config.cgi-original」をコピーして「mt-config.cgi」にリネーム
  5. 「mt-config.cgi」をテキストエディタで開いて、15行目のCGIPathをMTフォルダ設置予定場所に変更(ex.「http://www.サーバ名/MTフォルダ/」)
  6. 23行目から続くDATABASESETTINGSでは、「MySQL」、「PostgreSQL」、「SQlite」の3つのDB設定テンプレートがあるので、該当するDBテンプレートに対してDatabase、DBuser、DBPasswordを変更する。DBHostはlocalhostのままでよい。該当しない他のDB情報はすべて「#」でコメントアウト
  7. 「5」のCGIPathで指定した箇所にフォルダごとFTPアップロード
  8. 「mt-config.cgi」を除くサーバ側のすべての「.cgi」ファイルのパーミッションを「644」から「755」へ変更
  9. アップロードしたフォルダへhttpアクセス。ユーザー名等、MT管理者用の情報を設定してログイン。
  10. ダッシュボードまで行き着いたら、再構築。

以上

メインページの高さ

「mt-static/themes/style-future」の「4-layout.css」内の「4-3-1. div#main」で制御されている。

そこで最低の高さが、「min-height:1000px」と設定されているので調整。またすぐ下にはIE用のハックもあるので、そこも忘れずに調整。

完了したら、FTPクライアントでサーバにアップロード。

EyeCatchをトップ以外のページにも採用する

EyeCatchのスタイルシートは、「mt-static/themes/style-future/module/」内の「mod_eyeCatch-xxxxxx.css」で制御されている(xxxxは選択したEyeCatch名が入る)。

ファイルを開いて、「1-2.body.singleへの処理」で調整を行う。

ちなみに、「mt-static/themes/style-future/5-module.css」では、上記のスタイルシートをインポートするスタイルシート。混同しがちなので注意が必要。

フォルダの作成

  folder.jpg 静的ページ(ウェブページ)を作成する場合、特定のフォルダに保存して、まとめておいた方が効率よく管理できる。

ウェブページを新規作成作成すると、右のパネルに、ブログの新規作成にはない、「フォルダの変更」「ファイル名」のフィールドが表示される。

新しくフォルダを作成する場合、「フォルダの変更」をクリック。開いたウィンドウにある「+」をクリックしてフォルダ名を指定。同時に出力ファイル名も指定して、保存再構築すれば完成する。(ちなみに「+」はそのフォルダの下にフォルダを作成するということ)

 

写真をアップするフォルダもあらかじめ決めておいたほうがよい。初めてアップするときにダッシュボードが聞いてくるので、そこで指定。

コメント、トラックバックの無効化

システムメニュー(大元の管理画面)から「設定→コミュニケーション」を選択すると、コメント、トラックバックを無効にするチェックボタンがある。無効にしたい機能にそれぞれチェックを入れて保存すればいい(はず)。

背景色の変更

mt-static/themes/スタイル名/images/interface/bg_body.gifを変更。

それにあわせて、1-elements.cssの「1-4.Structure Module」で、bodyのbackgroundを変更し、bg_body.gifとともにアップロード。

ロゴテキストをイメージに置き換え

テンプレートモジュール「ヘッダー」から

<p class="siteName"><a href="<$MTBlogURL$>"><img src="http://www.ayabin.jp/mt4.1/mt-static/themes/style-future/images/common/logo.png" alt="B-side Home" /><MTIgnore><$MTBlogName encode_html="1"$></MTIgnore></a></p>
 

を探しだす。

ロゴイメージを適当な場所(例、mt-static/themes/style-future/images/common)にアップし、上記のアンカーの間に「<img src="xxx" alt=""xxx" />」を挟む。「<$MTBlogName$>」については、削除するなり、「<MTIgnore>」で挟み、表示させない。

イメージリンクのボーダーが出ている場合は、かっこ悪いので、「1-element.css」の「1-11.Image Module」で「imgプロパティ」に対して「border:0」を宣言する。

タイトルロゴ変更

「mt-static/themes/style-future/3-context.css」の「siteName」で制御されている。

テキストを表示させないためには、「margin-left:-9999px;」を指定し、ブログの外に飛ばす。

コメント、トラックバック数を消す

モジュールテンプレート「ブログ記事の概要」で「リアクションリンク」を「<MTIgnore>」で隠す。あるいは削除。

サムネイルをトップページに表示

モジュールテンプレート「エントリー詳細内部」に以下を挿入。

<MTEntryAssets type="image">
<img src="<$MTAssetThumbnailURL width="70"$>" alt="<$MTAssetLabel$>" style="float:left;" />
</MTEntryAssets>
 

保存、再構築。

リストスタイルイメージ

mt-static/themes/style-future/3-context.cssの「3-4-1. dl.navi」で制御している。

トップページ表示を最新の1件に

インデックステンプレートから「メインページ」を選択。

「<MTEntries>」にモディファイア「lastn="1"」を追加。

その下に、同一カテゴリのタイトルを表示をさせるには、以下のコードを「<MTEntries>.....</MTEntries>」内に挿入。

<!-- 同一カテゴリのリストを表示 -->
   <h3 class="appendix-header">このエリアと同じエリアの物件</h3>
   <div class="side">
    <ul>
    <MTEntryCategoryEntries>
    <li><a href="<$MTEntryPermalink$>"><MTEntryTitle></a><$MTEntryDate format="(%Y年%m月%d日)"$></li>
    </MTEntryCategoryEntries>
    </ul>
   </div>
<!-- 同一カテゴリのリストを表示(終わり) -->
 

保存、再構築。

GoogleMapを組み込む

仕様は、新規ブログ作成ページから、建物名、住所、概要、写真を入力すると、個別のブログ詳細ページにマーカーのほか、吹き出し(建物名、概要、写真)付きのGoogleMapが表示されるというもの。

Continue reading

ウェブページ

ブログのように頻繁に更新が行われない、1回限りの固定サイトの場合、ウェブページで作る方がよい。

新規作成から「ウェブページ」。

情報を入力後、出力ファイル名をhtmlで指定。指定しなくてもファイルは作られるが、ファイル名に意思を感じる有機的なものの方がよいだろう。

保存前に公開状態をチェックし、保存、再構築で完了。

生成されたものは「グローバルナビゲーション」などに直接リンクさせて使用するのが一般的。

ページの性質上、「最終更新日(Last Modified)」は抜いたほうが親切。テンプレートモジュール→「ウェブページの詳細」から削除できる。

FCKeditorのインストール

sourceforge.jpから「MT-Plugin-FCKeditor-1.2.ja Ver.2.zip」をダウンロード。

解凍後、「mt-static」と「plugins」をサーバにMTがインストールされているルートディレクトリに上書きアップロード。

システムメニューからプラグインがきちんとアップされたか確認。

ルートディレクトリにある「mt-config.cgi」を開き、最後に下記のコードを追加し、アップロード。

#======== RichTextEditor ==========
RichTextEditor FCKeditor

新規ブログを立ち上げれば「リッチテキスト」のエディタが、さらにリッチになる。

他ブログのフィードを表示する

MT4.1から標準となった(らしい)「Feeds.App Lite」を使う。

以下サンプルコード

<ul>
<MTFeed uri="XMLのパス">
<MTFeedEntries lastn="5">
 <li><a href="<$MTFeedEntryLink$>"><$MTFeedEntryTitle$></a></li>
</MTFeedEntries>
</MTFeed>
</ul>

これで対象のフィードのタイトルとリンクが5件分表示される。

「posted by」を消す

モジュールテンプレート「ブログ記事のメタデータ」から

<MTIfNonEmpty tag="EntryAuthorDisplayName">

<li class="author">Posted by: <span class="name"><$MTEntryAuthorDisplayName$></span></li>

</MTIfNonEmpty>

を削除。保存、再構築。

この中には、「投稿日」「投稿日時」「カテゴリ」が含まれている。

Continue readingを「続き」に変更

モジュールテンプレートから「エントリー詳細内部」。

「Continue reading」と書かれた部分を見つけ、「続き」に変更。

保存、再構築。

コメントフォーム、トラックバックの削除

アーカイブテンプレートから「ブログ記事」。

「コメント」と「トラックバック」をインクルードしている部分を削除。

保存、再構築。

eyeCatchの変更

eyeCatchは「mt-static/themes/style-future」以下3つのファイルで制御されている。

「5-module.css」でモジュールのインポート。

「module」に「5-module.css」でインポートする「long」「mini」などのcss。

「images/eyeCatch」にeyeCatch画像。

 

メモ 「module/mod_gNavi」にはグローバルナビゲーションを制御するcssが含まれている。

 

Google Adsenseの導入

Google Adsenseを導入するには、デザイン→テンプレートからウィジェットテンプレートの作成。

ウィジェットの名前を決めて、Adsenseのコードをテキスト欄に貼り付ける。

保存、再構築。ウィジェットテンプレートに追加されているかをとりあえず確認。

確認できたら、テンプレートモジュール内にある「ユーティリティ」から作ったウィジェットをインクルード。

<$MTInclude widget="ウィジェット名"$>

保存、再構築で完了。

Google Adsense管理画面でのチャネル追加も忘れずに。

新しいブログを作成

newblog.gifMovableTypeでは本体のブログのほか、新しいブログも作成できる。

管理画面トップの「Movable Type」ロゴ下、管理しているブログサイト名タグのすぐ横についているボタンをクリックすると、「システムメニュー」「新しいブログを作成」と出るので、後者を選択。

新しいブログ名をつけて、保存、再構築、完了。

完了後は、一つのダッシュボードでブログが選択できるようになる。

追記、システムメニューからもできるもよう。

 

メインページの記事数制御

管理画面「デザイン→テンプレート」から「メインページ」を開く。

<MTEntries>のブロックタグを見つけ、タグ中に「lastn="n"」を挿入(nは任意)。

保存、再構築で完了。

プロフィルの編集

管理画面トップ右隅「プロフィールの編集」から簡単にいける。

ただし、使える画像は「アイテム」にアップロードしたものしか使えなさそう。

表示制限属性(モディファイア)

ブロックタグに「lastn="n"」を追加するだけ。「n」は制限したい数。

exp.<MTEntryCategoryEntries lastn="5">

同一カテゴリのリストを表示

http://code.as-is.net/public/wiki/EntryCategoryEntries_Plugin.ja_JPよりEntryCategoryEntries.zipをダウンロード。

解凍後、「EntryCategoryEntries.pl」をトップディレクトリ直下のpluginsにうp。

管理画面「システムメニュー→プラグイン」で追加されたかを確認。

「デザイン→テンプレート→アーカイブテンプレート→ブログ記事」に 

<div class="side">
<ul>
<mtentrycategoryentries>
<li>
<a href="&lt;$MTEntryDate'>http://www.ayabin.jp/mt4.1/mt-static/html/%3C$MTEntryPermalink$%3E"><mtentrytitle></a>&lt;$MTEntryDate format="%Y/%m/%d"$&gt;
</li>
</mtentrycategoryentries>
</ul>
</div>

 

を表示したい位置に記載。保存、再構築。

詳しくは、「MovableType WEBデザインの新しいルール」(翔泳社)P180参照

コードを表記する場合は、リッチテキスト(WYSIWYG エディタ )の「引用開始」「引用終了」ボタンを使うときれいに見える。

「カテゴリの追加」を削除

デフォルトでカテゴリ欄に表示されている「カテゴリを追加」を削除するには、管理画面「一覧→カテゴリ」で「カテゴリの管理」を開き、「カテゴリを追加」にチェックを入れ、削除をクリックする。

サブカテゴリがある場合は、「移動」をクリックし、「ルート」など移動したい場所にチェックを入れ、移動する。完了したら再構築。

デフォルト表示の「カテゴリを追加」は、早い段階で削除しておくのが望ましい(結局削除するし、サブカテゴリを作ったあとでは、移動など何かと面倒)。

 

逆にルートに存在するカテゴリをサブカテゴリにするには、「一覧→カテゴリ」から「カテゴリの管理」を開き、動かしたいカテゴリを選択して、「移動」ボタンをクリック。次に親カテゴリにしたいカテゴリを選択して、保存、再構築。

各ウィジェットの表記を変える

  • 「Recent Entries」 ウィジェットテンプレートの「最近のブログ記事」
  • 「Categories」 ウィジェットテンプレートの「カテゴリーリスト」
  • 「Search」 ウィジェットテンプレートの「検索」
  • 「Feeds」 ウィジェットテンプレートの「フィード」
  • 「Calendar」 テンプレートモジュールの「カレンダー内部」
  • 「Archives」 ウィジェットテンプレートの「月別リスト」
  • 「Photos」 ウィジェットテンプレートの「うp画像サムネイル」

メールフォーム

http://www.h-fj.com/blog/ より「メールフォーム・プラグインver2」をダウンロード。

解凍後、フォルダの中に生成された「mt-static」と「pulgins」をルートディレクトリにうp。

この際、「plugins」に含まれる「mt-mail-form.cgi」(最下層)のパーミッションを「755」に変更。

管理画面にアクセスすると、「アップグレード開始」と表示されるので、順を追って進めていく。

 

完了したら、管理画面「設定→プラグイン」に「MailForm」が追加されるので、それを開いて「設定」をクリック。インストールを開始する。

 

進めていくと、途中で、「テンプレートの名前等を決める」なるものが表示されるが、特に変更する必要なし。結局、アップグレードはDBテーブルの追加と思われる。

 

完了すると、管理画面の「新規作成」「一覧」「デザイン」「設定→プラグイン」に「メールフォーム」の項目が追加される。

 

次に「新規作成」から「メールフォーム」を選択。

「メールフォームの設定」が開くので、とりあえず「設定のタイトル」だけ適当に書き込み、中央付近にある「メールフォームテンプレートに、必須のMTSetVarタグを追加」をクリック。

完了したら、すぐ下にある「メールフォームテンプレートの再構築」をクリック。終わったら「閉じ」て、「メールフォームの設定」の最も下にある「保存」をクリックして完了。

ウェブページのリンク

新規作成より製作したウェブページ(静的ページ)は、管理画面「一覧」→「ウェブページ」で閲覧することができる。一番右にある「表示」をクリックすると、実際のウェブページが表示される。

グローバルナビゲーションへリンクさせたいときは、テンプレートモジュールからグローバルナビゲーションを選択。アンカーリンクを追記あるいは追加し、保存、再構築で完了。

ウィジェットの追加

「デザイン」→「テンプレート」→「ウィジェット」で確認できるウィジェットを追加する場合、

「テンプレートモジュール」内の「ユーティリティ」に「<$MTInclude widget="ウィジェット名"$>」と記述することで、追加することが可能。

他のモジュールでも追加可能かは不明。

タイトルロゴ

タイトルロゴを作成。

管理画面より「新規作成」→「ファイルアップロード」。

アップロードするファイルを選択し、アップロード先を「<サイトパス>images」に指定。

アップロード。

アップロードされたファイルは、サーバのブログサイトフォルダの「images」に生成される。

「一覧」→「アイテム」で確認できる。

 

次に、ローカルにある「mt-static/themes/style-smartCanvas」の「3-context.css」を開く。

「Website Title」の項で、「div#header p.siteName a」を以下に書き換え。

 

div#header p.siteName a {
  display: block;
  width: 200px; /* 画像の幅 */
  height:50px; /* 画像の高さ */
  text-indent: -9999px; /* textを飛ばす */
  outline: none; /* クリック時の枠線を消す */
  background-image: url(画像のパス);
  background-repeat: no-repeat;
  background-position: 0px 0px; /* point 位置調整 */
  border-bottom: none;
  padding-bottom: 10px; /* 画像の高さに合わせて調整 */
}

画像のパスは「images/画像」でいいらしいが、うまくいかなかったので、このサイトでは絶対パスを適用。保存後アップロードして、ブログサイトの更新をすれば反映される。

 

スタイルシート

ダウンロードしたスキン内には「mt-static」「plugins」の2つのフォルダが生成されるが、

「mt-static/themes/style-smartCanvas」内に生成される6つのcssファイルに関するメモ。

(判明次第追記)

  • 0-import.css

 以下の5つのcssファイルをimportするスタイルシート。

これが無ければ始まらない。

インデックステンプレートのスタイルシートテンプレートで読み込まれる。

  • 1-element.css

 各要素(タグ)のスタイルを制御するスタイルシート。

もちろん、h1~h6、p、ul,li,body、htmlなどMovableTypeに使用されている全てのタグのスタイルが記述されている。idやclassなどの属性は含まれない。

  • 2-class.css

 

  • 3-context.css

 

  • 4-layout.css

 

  • 5-module.css

アイキャッチ、グローバルナビ、カレンダーのモジュールを管理するスタイルシート。

デフォルトではコメントアウト。

解除することで適用できる(カレンダーはこの他にも作業が必要)。

Sub Skin Module(?)

Eye Catch Module[Short][Long][Mini]{header]

Global Navigation Style Module

Calendar Style Module

カスタマイズ(グローバルナビゲーション)

グローバルナビゲーションの適用。

「デザイン」→「テンプレート」→「テンプレートモジュール」→「ヘッダー」をオープン。

開いたテキストの中から、

<MTIgnore><$MTInclude module="グローバルナビゲーション"$></MTIgnore>」を探し、「<MTIgnore>」と「</MTIgnore>」のタグを外す(削除)。

5-module.css」下方にある「Global Navigation Module」のコメントアウトを外し、FTPでうp。

再構築で完了。

スキン適用

CMSツール用のテンプレートとテーマスキンを配布している「Vicuna CMS」から「Movable Type」→「Download」へ移動。

「本体のダウンロード」からmt.Vicuna テンプレートセットプラグインをダウンロード。

解凍後、生成された

「mt-static/themes/style-smartCanvas」を「ルートディレクトリ/mt-static /themes/」に

「plugins/mtVicuna」を「ルートディレクトリ/plugins」に

それぞれアップロード。

 

管理画面より「デザイン」→「テンプレート」→「ブログのテンプレートを初期化」をクリック。

「新しいテンプレートセットの適用」にチェックを入れ、プルダウンメニューから mtVicunaを選択。

「次へ」を押してテンプレートプラグインのインストール終了。

「再構築」してスキン適用完了。

注、本サイトは5月17日より、「Vicuna + Future Skin 」を適用

インストール手順

簡単だったけど、一応メモ。

http://www.ecbuyers.com/b2c/catalog/default.php?cPath=28_127&prmcd=salk070821b2cmtper

から無償ダウンロード。バージョンは4.1のもよう。

解凍後、サーバにアップロード。

その前にDB作成。あるいは既存のDBを初期化(DBをチェックし、作成ボタン)。

アップロードが完了したら、ルートディレクトリにある「.cgi」ファイルのパーミッションをすべて「755」に変更。

最後にそのディレクトリにhttpアクセス。

Index of all entries

Home > Movable Type Archive

Feeds

Return to page top