今回の講義では、実際にMTをカスタマイズしていきます。これから説明していくことを実践していただければ、簡単にカスタマイズできますので、一緒にカスタマイズしていきましょう。

なお、当講座で使用するテンプレートは、デフォルト・テンプレートを使用して説明していきます。

デフォルト・テンプレートとは、初期設定時のテンプレートで、まったくデザインなどを変更していないテンプレートのことです。デフォルト・テンプレートに戻す場合は、下記から入手できます。

デフォルトテンプレートの入手はこちら >>


では、実際にカスタマイズしていきましょう。

基本的なカスタマイズ方法を習得するために、デフォルト・テンプレートの「ページの背景色を変更する方法」を例にして、説明していきます。

BEFORE		AFTER

■ カスタマイズ手順
ページ背景色のカスタマイズ手順は、下記のようになります。

MovableType カスタマイズ手順

1.　メインメニューで「テンプレート（の編集）」をクリックします

2.　「スタイルシート」を選択します

3.　「テンプレートの中身」を編集し、「保存」をクリックします 　　・編集の前に、必ずバックアップをとりましょう。 　　・編集は、Web上ではなく、テキストエディタで編集しましょう。

4.　「このテンプレートを再構築する」をクリックします

5.　「サイトの確認」をクリックし、編集内容をチェックします

■ CSS（スタイルシート）の編集方法
デフォルトテンプレートのスタイルシートを見ていただくと、下記のような記述がありますね。

＜スタイルシート＞

body { background-color:#8FABBE; }

←背景色

初期設定のページ背景色は、「#8FABBE」と指定されています。
この「#8FABBE」という数値を変更することで、ページの背景色を変更することができます。

編集後は、「保存」し、スタイルシートを「再構築」します。
実際に、背景色が変更されたのか、「サイトの確認」をクリックし、編集内容を見てみましょう。

無事、背景色が変更されてましたか？

色の指定は、16進数の数値、あるいは、カラーネームで指定できますので、下記のカラーチャート表を参考にして、いろいろ試してくださいね。

■ カラーチャート表（標準カラー16色）

Aqua #00FFFF	Yellow #FFFF00	Fuchsia #FF00FF	White #FFFFFF
Teal #008080	Olive #808000	Purple #800080	Gray #808080
Blue #0000FF	Lime #00FF00	Red #FF0000	Silver #C0C0C0
Navy #000080	Green #008000	Maroon #800000	Black #000000

[次の講義へ] → 文字サイズの変更

参考になりましたら、応援お願いします。

第2回目の講義は、「ファイル、画像のアップロード方法」について説明します。


MovableTypeで、ファイルや画像をアップロードするには、下記のような２つの方法があります。

■ FTPソフトを利用する方法
■ MovableTypeの「ファイルアップロード機能」を利用する方法

では、それぞれの方法について説明してきます。


FTPソフト（FFFTPなど）を利用すると、任意の場所にファイルや画像をアップロードすることができます。

アップロード後は、そのアップロードした場所を下記のようなタグで指定しますと、ファイルや画像を読み込むことができます。

■ ファイルの場合

<a href="リンク先URL">ファイル</a>

■ 画像の場合

<img src="画像URL" alt="代替文字" />

alt属性は、画像を表示できない場合に代わりに表示するテキストを指定します。


MovableTypeのファイルアップロード機能を利用して、ファイルや画像をアップロードすることができます。<img>タグなど自動的に生成されます。

ファイル、画像のアップロードの手順

1.　メインメニューで「ファイルのアップロード」をクリックします

2.　「参照」ボタンを押して、ファイルを選択します

3.　アップロード先を指定して、「アップロード」をクリックします

4.　「アップロードしたファイルのHTMLを表示」をチェックし、 　　「埋め込み」をクリックします

5.　「src="ファイルのURL"」でURLを確認します

■ アップロード先の指定について
アップロード先は、サーバのディレクトリ、もしくは、サーバのアーカイブディレクトリにアップロードできます。
また、右側のフォームに書き足せば、それぞれのディレクトリの下に置くこともできます (例えば images )。もし、そのディレクトリがなかったら、自動的に作られます。

・<ローカル・アーカイブ・パス>/ ○○（例えば、images）/ ・<ローカル・サイト・パス> 　　/ ○○（例えば、images）/

もう少し分かりやすく説明しますと、

<ローカル・アーカイブ・パス>/ ○○（images）/は、
あなたのサーバーのURL/archives/ ○○（images）/　フォルダにアップロードします。

<ローカル・サイト・パス>/ ○○（images）/は、
あなたのサーバーのURL/ ○○（images）　フォルダにアップロードします。

どちらのパスを選択するにしても、ファイルや画像をアップロードする場合は、ディレクトリ直下に置くのではなく、imagesなどのフォルダを作成して、まとめて置いてた方が管理が楽になりますので、追加のパスを指定しておくことをおすすめします。


以上、「MTでのファイル、画像のアップロード方法」について説明しました。次回の講義では、実際にMTをカスタマイズしてみましょう。

[次の講義へ] → 実際にカスタマイズをしよう～背景色の変更

参考になりましたら、応援お願いします。

第1回目の講義は、「Mobavle Type をカスタマイズする方法」について説明します。


MovableType をカスタマイズするには、テンプレートを編集します。テンプレートには、スタイルシートや、メインページ、個別アーカイブ等のテンプレートがありますので、カスタマイズの目的によって、それぞれ該当のテンプレートを編集します。


MovableType のテンプレートを編集する手順は、下記のようになります。

MovableType テンプレート編集方法

1.　メインメニューで「テンプレート（の編集）」をクリックします

2.　編集するテンプレート（メインページ、個別アーカイブ等）を 　　選択します

3.　選択したテンプレートを編集し、「保存」をクリックします。

4.　保存したテンプレートを「再構築」します

5.　「サイトの確認」をクリックし、編集内容をチェックします

ただし、テンプレートを編集する前に、下記の点を注意してくださいね。

■ 編集する前に、必ずバックアップをとりましょう。
テンプレートを編集し、「保存」をクリックすると、失敗したり、気に入らなかった場合でも元に戻せません。ですので、編集する前には、必ずバックアップをとりましょう。そうすれば、何度でもやり直せます。

バックアップ方法は、テンプレートのソース内で右クリックして、「すべてを選択」、「コピー」を選択し、メモ帳などに貼り付けると簡単です。

■ 編集する際は、Web上ではなく、テキストエディタで編集しましょう。
テキストエディタは、メモ帳でも構いませんが、Tera Pad（無料ソフト）を利用すると、行番号や元に戻せる機能など付いてますので、便利です。

編集後は、ファイル内容のすべてをコピーして、テンプレートのソースに貼り付けます。
テンプレートのソース内で右クリックし、「すべてを選択」、「貼り付け」をクリックすると、簡単に貼り付けることができます。


カスタマイズやテンプレート編集に便利なツールを紹介します。当サイト作成において、利用させていただきました。

ブログカスタマイズに便利なツール
TeraPad	TeraPadは無料のテキストエディタです。 行番号、URL/メールアドレスのカラー表示、Undo/Redo、画面分割などの機能は、テンプレートをカスタマイズする際には便利です。
たぬきのしっぽ	オンラインのCSS（スタイルシート）エディタです。URLを入力だけで起動し、簡単にスタイルシートを編集できます。ブログのセレクタなどがいまいち分からない方には、おすすめです。

以上、「MTでのカスタマイズ方法」について説明しました。
カスタマイズする前にバックアップをとっておくと、何度でもやり直せますので、いろいろ挑戦してくださいね。

[次の講義へ] → ファイル、画像のアップロード方法

参考になりましたら、応援お願いします。