2005年2月27日

●ブログ入門(画像の挿入)

 GTROCで利用しているブログシステムは、シックスアパートがリリースしているMovable Type(以後、MT)です。業界標準と言って良いシステムですね。

 元々私もMT初心者なので偉そうなことは書けませんが、「こうすれば、こんなことができますよ」といった簡単な事柄を記載して行きたいと思います。

 Movable Typeでは、記事のことを「エントリー」と呼びます。何かの投稿を行いたい時には、管理ページから「新規エントリー」を選択することから始まります。

 エントリーの内容に画像を挿入することができますが、私の投稿のMovable Type標準ハンドブックにあるように、文章の回り込みを設定することも可能です。これを行うには、「ファイルのアップロード」でサーバーに画像ファイルをアップロードした後に、imgタグ内にある属性と値を埋め込むことにより可能になります。

 例えば、book1a.jpg という画像を横幅120ピクセル、縦幅150ピクセルで表示するには、

<img src="http://blog.gtroc.com/0039/images/book1a.jpg" width="120" height="150">

とします。このimgタグの前後に文章をいれるとこんな感じで表示されます。

本日は晴天なり。本日は晴天なり。本日は晴天なり。本日は晴天なり。本日は晴天なり。本日は晴天なり。本日は晴天なり。本日は晴天なり。本日は晴天なり。本日は晴天なり。本日は晴天なり。本日は晴天なり。本日は晴天なり。本日は晴天なり。本日は晴天なり。本日は晴天なり。本日は晴天なり。本日は晴天なり。

 画像と文字が同じ行に表示されるため、画像の縦幅に文章が1行しか入りません。あまり...というか全く綺麗じゃありませんね。やはり、美しく文章と同居させる必要があります。それが文章の回り込みです。

 では、画像を左に配置し、画像の右側に文章を回り込ませるにはどうすれば良いのでしょうか? それには、style="float:left;" と言うキーワードをimgタグに挿入します。

<img src="http://blog.gtroc.com/0039/images/book1a.jpg" width="120" height="150" style="float:left;">

ですね。

 これを先ほどの例に当てはめると、

本日は晴天なり。本日は晴天なり。本日は晴天なり。本日は晴天なり。本日は晴天なり。本日は晴天なり。本日は晴天なり。本日は晴天なり。本日は晴天なり。本日は晴天なり。本日は晴天なり。本日は晴天なり。本日は晴天なり。本日は晴天なり。本日は晴天なり。本日は晴天なり。本日は晴天なり。本日は晴天なり。本日は晴天なり。本日は晴天なり。本日は晴天なり。本日は晴天なり。本日は晴天なり。本日は晴天なり。本日は晴天なり。本日は晴天なり。本日は晴天なり。本日は晴天なり。本日は晴天なり。本日は晴天なり。本日は晴天なり。本日は晴天なり。本日は晴天なり。本日は晴天なり。本日は晴天なり。本日は晴天なり。

となります。

 では、逆に画像を右に配置し、画像の左側に文章を回り込ませるにはどうすれば良いのでしょうか? それには、leftをrightに入れ替えれば良いのです。

<img src="http://blog.gtroc.com/0039/images/book1a.jpg" width="120" height="150" style="float:right;">

ですね。

 これを先ほどの例に当てはめると、

本日は晴天なり。本日は晴天なり。本日は晴天なり。本日は晴天なり。本日は晴天なり。本日は晴天なり。本日は晴天なり。本日は晴天なり。本日は晴天なり。本日は晴天なり。本日は晴天なり。本日は晴天なり。本日は晴天なり。本日は晴天なり。本日は晴天なり。本日は晴天なり。本日は晴天なり。本日は晴天なり。本日は晴天なり。本日は晴天なり。本日は晴天なり。本日は晴天なり。本日は晴天なり。本日は晴天なり。本日は晴天なり。本日は晴天なり。本日は晴天なり。本日は晴天なり。本日は晴天なり。本日は晴天なり。本日は晴天なり。本日は晴天なり。本日は晴天なり。本日は晴天なり。本日は晴天なり。本日は晴天なり。本日は晴天なり。本日は晴天なり。本日は晴天なり。本日は晴天なり。

 となります。

 結構簡単でしょ!?

 何はともあれ試してみてください。

Posted by yama at 2005年2月27日 19:02