Movable Typeインストール後の初期設定

URL ログイン画面 URL 管理画面
URL 最初のブログ作成 URL ちょっとだけカスタマイズ
   
   

ログイン画面

インストール」の最後にある「Movable Typeにログインしてください」ボタンを押すと、ログイン画面を表示します。(又は、CGIPathをhttp://www.example.com/mt/に設定している場合、「http://www.example.com/mt/mt.cgi」を実行します。)「システム管理者の登録」で設定したユーザIDパスワードを入力して「ログイン」ボタンをクリックしてください。

ページのTOPへ

管理画面

ログインすると以下の画面を表示します。最初に「First Weblog」を作成しましょう。「重要:はじめにブログを設定してください。」のリンクをクリックします。

ページのTOPへ

最初のブログ作成

A」欄に最初のブログを設定します。
例:ブログ・ディレクトリを「blog」にした場合、サイトURLは「http://www.example.com/blog/」 サイトパスは「/virtual/xxx/public_html/blog」となります。
設定後「B」の「変更を保存」ボタンをクリックします。

 サイトを構築

上記で変更を保存後、以下の画面が表示されます。「サイトを再構築」ボタンをクリックしてください。

 サイト構築の実行

上記で「サイトを再構築」をクリックすると以下の画面が表示されます。「再構築」ボタンをクリックすると実行を開始します。

完了すると以下の画面を表示します。「サイトを確認」で構築したサイトを見てみましょう。

 サイトを確認

以上で新規ブログの作成は完了しました。「サイトを確認」を行うと、以下の様なサイトが作成されます。
あとは、ブログのデザインなどを調整していきましょう。

ページのTOPへ

ちょっとだけカスタマイズ

エントリーの投稿時、基本的な文字の修飾(太字・斜体・下線・URLリンク・メールアドレス・引用)については、ボタンが用意されています。しかし、文字の大きさや色などを設定するにはHTMLタグを入力しなくてはいけません。ちょっと面倒なので、ボタンを追加してみましょう。
文字サイズ:10px文字サイズ:16px文字サイズ:20px色指定:Red色指定:Orange色指定:Yellow色指定:Lime色指定:Aqua色指定:Blue色指定:Purple色指定:Pink

 修正・追加するファイル

  • mt.js : スタティック・ディレクトリ(mt-static)に配置
  • styles.css : スタティック・ディレクトリ(mt-static)に配置(必要であれば)
  • edit_entry.tmpl : アプリケーション・ディレクトリ以下(mt/tmpl/cms) に配置
  • ボタン用画像 : スタティック・ディレクトリ以下(mt-static/images)に追加

 手順

  • 上記にある修正するファイルのバックアップをとりましょう。(コピーしておく)
  • JavaScriptのFunctionを追加します。(mt.js
  • 新規エントリー用テンプレートを修正します。(edit_entry.tmpl
  • エントリー画面に多くのボタンを追加すると、ボタンの配置される位置が改行されます。改行したくない場合、スタイルシートを修正しましょう。(styles.css
  • 修正したファイル及びボタン用の画像を適切な位置にアップロードします。

 mt.jsの編集

JavaScriptのFunctionを追加します。以下のコードをコピーし、貼り付けてください。
276行目位にある「function formatStr (e, v) {」の下あたりがいいでしょう。

function formatFontStr (e, v) {
if (!canFormat) return;
var str = getSelected(e);
if (str) setSelection(e, '<font ' + v + '>' + str + '</font>');
return false;
}

 edit_entry.tmplの編集

ボタンを配置する位置は「<div class="field-buttons-formatting">」の中です。(532行目位と570行目位)1つ目はbody用、2つ目はmore用なので、両方に追加します。
それぞれ標準で設定されているボタンの後に追加しましょう。(以下のコードは見やすくする為に改行されています。貼り付ける場合は改行を取ってください。)

body用の「赤色」ボタン配置の例です。
more用の場合は青文字部分を「document.entry_form.text_more」に変更します。
文字サイズを変更する場合は「color=#ff0000」を「size=10px」(10pxは指定のサイズ)などに変更します。

write('<img title="<MT_TRANS phrase="Red">"
onclick="return formatFontStr(document.entry_form.text, \'color=#ff0000\')" src="<TMPL_VAR NAME=STATIC_URI>images/color1_01.gif"
alt="<MT_TRANS phrase="red" escape="singlequotes">"
width="17"
height="17" />');

write('<img title="<MT_TRANS phrase="フレーズ">"
onclick="return formatFontStr(document.entry_form.text, \'color=#カラーコード\')"
src="<TMPL_VAR NAME=STATIC_URI>images/画像ファイル名"
alt="<MT_TRANS phrase="フレーズ" escape="singlequotes">"
width="画像幅"
height="画像高さ" />');

※ クイック投稿にも適用する場合は「bm_entry.tmpl」に上記と同様の修正を行います。

※ 上記全てのボタンを配置したサンプル(ボタン配置の部分のみ)は以下の通りです。

 styles.cssの編集

エントリー画面に多くのボタンを追加すると、ボタンの配置される位置が途中で改行されます。改行したくない場合は、スタイルシートを修正する事で、1行に配置されます。
2119行目位(「#edit-template .field-buttons-formatting {」の下行「width: 250px;」を「width: 420px;」に修正
2125行目位(「#edit-template .field-buttons-resizing {」の下行「width: 250px;」を「width: 80px;」に修正

また、クイック投稿にも適用する場合、2378行目位(「#quickpost .field-buttons {」)の2行下「width: 200px;」を「width: 230px;」(適切な値を設定してください。)に修正します。

    :
2118行目 : #edit-entry .field-buttons-formatting,
2119行目 : #edit-template .field-buttons-formatting {
2120行目 : width: 420px;
2121行目 : float: left;
2122行目 : }
2123行目 :
2124行目 : #edit-entry .field-buttons-resizing,
2125行目 : #edit-template .field-buttons-resizing {
2126行目 : width: 80px;
2127行目 : float: right;
2128行目 : text-align: right;
2129行目 : }
    :
2378行目 : #quickpost .field-buttons {
2379行目 : float: right;
2380行目 : width: 230px;
2381行目 : text-align: right;
2382行目 : }

ページのTOPへ

<<前のページ || 次のページ>>