Movable Typeで画像を付きのブログを書く

 Movable Typeでは画像を挿入しつつテキストを書けるわけですが、この方法がはじめての人にとってはやや難解。実際は時に難解なわけではないのですが、私自身もやや当初は難解でした。というのは、Web上の世界ではテキストや文章(アスキー文字)と画像(バイナリデータ)は質としてかなり違うものなのです。そんなわけでそれらを分けて保存して尚且つ分けて設置しなければなりません。
 実際にブログに載せる画像ですが、ブログのデザインや閲覧者が使用しているモニターの大きさにも依存するのですが、画像のサイズが巨大な場合などはやや小さく加工しておく必要があります。通常デジタルカメラで撮影した画像などはかなり大きなサイズになっています。ですから、アップロードする画像は通常800×600、大きくとも1200×800ぐらいの大きさに加工しておくとよいです。

ブログ記事に画像を挿入する方法

image_insert01.jpg1.  まずは、Movable Typeにログインして記事の作成の準備をします。いつものように適当な文章を書いておきます。文章量と画像の大きさのバランスというものがあるので、大きな画像を掲載したい場合はやや長目のテキスト量じゃないとバランスが悪い場合がままあります。ある程度のテキストを書いたら、画像を挿入したい場所にカーソルをもっていってから、上部アイコンの右から4つめの「画像の挿入アイコン」を押します。(カーソル位置は2つ目の画像にあるので参考にしてみてください。)

image_insert02.jpg2. 画像をアップロードする画面が出現します。これまでにアップロードした画像や動画などMovable Typeでは「アイテム」と呼ばれているものがリストアップされています。
この画面から、「新しい画像をアップロード」をクリックして次ぎに進みます。
image_insert03.jpg3. 画像の挿入画面では、アップロードしたい画像を選択します。それからアップロード先を指定します。アップロード先は予めいくつかのカテゴリーに分けてフォルダーを作成しておいた方がいいです。フォルダーの作成は、「フォルダーの選択」という部分をクリックしてから緑色の「+」マークをクリックすると作成できます。ツリー上に作成することもできるので画像の種類などにとっていくつかのフォルダー分けをしておくと便利です。最初にフォルダーを作成しておくと次回からはそのフォルダーを選択するだけでOKです。
 アップロードする画像、アップロードする画像の保存先が決まったら青い「アップロードボタン」を押します。

image_insert05.jpg4. ファイルオプションにてアップロードする画像に関していくつかの設定をします。
4.1  「画像を記事/ページに表示」にチェックを入れます。ここにチェックを入れないとアップロードした画像はMovable Type内に保存されるだけで先に指定した位置に画像を掲載してくれません。
4.2 次に「サムネイルを利用」にチェックを入れます。サムネイルのサイズを指定するのですが、前述した通りテキストの量やレイアウトに依存します。デフォルトでは300(300ピクセル)という値をとっています。150から300ぐらいの値が適当だと思います。後からやり直しもできるのでそれぐらいの値に設定してみてください。
4.3 「ポップアップウィンドウで元の大きさの画像にリンクする」にもチェックを入れます。このブログ記事自体もそうですが、画像が小さくて中身の文字などが読めません。そういう場合画像をクリックするとオリジナルのサイズに拡大して表示してくれます。そういった機能を「ポップアップ」といいます。サムネイルの画像は150から300ぐらいの大きさなのでもっと大きな画像を表示させたい場合には非常に便利です。
4.4 画像を配置する位置を選択します。「なし」を選択した場合は、テキストの回り込みなどが解除されてテキストとテキストの間に単に画像が配置されます。あまり見てくれはよくありません。「左」あるいは「右」を選択した場合、隣接するテキストが画像を取り囲んでくれます。このブログ記事では左を選択してテキストが画像の右に配置されるようになっています。「中央」を選択した時は、画像がブログ内の中央に配置されます。これは先の「なし」という選択に近くてテキストの回り込みはありません。ですのでブログ(ホームページ)のデザインに合わせて幅いっぱいぐらいの大きさで画像を配置するのが適当です。
 自分のブログやホームページの大きさに合ったレイアウトは「設定を記憶」という部分nチェックを入れておくと以後はデフォルトでその設定を自動的に行ってくれます。私の場合は、すべての項目にチェックを入れてから、サムネイルのサイズを200、位置を「左」にして記憶させておいています。

image_insert06.jpg5. すべての設定が終わったら青い「完了」ボタンを押します。ブログ記事内に画像が表示されます。回り込み(フロート)を設定した場合には画像にテキストが回り込んで配置されている筈なので確認してください。
 このままテキストを書き続けると画像を越えた時点で、画像を取り囲むように配置されます。


image_insert07.jpg6. 記事が公開された時にはこのような感じになります。ホームページ幅や画像の大きさによって変化しますが、概ねこんな感じになると思います。画像が左にテキストが右に(画像を越えた時には回り込んで画像の下から続きます。)
 







プロフィール



  • Name :: 山上オサム ♂(37)
  • Hobby :: 武術
  • Work :: Web Designer