2枚の画像を横に並べる方法

ファンブログカスタマイズ：画像編投稿日：2009年06月27日 03:10

ファンブログ　カスタマイズ

本来は2枚の画像を横に並べるには、画像タグを2個並べるだけでできることなんですが、前回の文字の横にアイコンを表示させる方法でファンブログに付属しています「挿入」アイコンに不備があることがわかりましたので、悩んでいる方が多いんじゃないかと感じましたので、今回は2枚の画像を横に並べる方法を説明します。

今回の方法は１番単純な画像を文字列に挿入する方法です、身近なものでは絵文字が１番わかりやすいかと思います。絵文字は文字に近い大きさで小さいですが、立派な１枚の画像なんです。
文字列に画像を挿入するということは、2枚画像の高さが違った場合は絵文字と同じく下面が揃うことになるということを覚えておいてくださいね。

この絵文字は2個連続で打てば2つ並びます。スペースで間隔を空けることも可能ですよね。画像を横に並べるには、この絵文字と同じタグに打ち変えてあげれば、同じことができるようになります。

コメントや記事を打った場合HTMLでは { まる} こんな感じで表現され、文面上では

こんな絵文字が表示されます。このHTMLで｛｝で囲まれた場所には実は画像のタグが埋め込まれているのですが、文章を打つのに長いタグが入ると打ちづらいので、省略されて表示されているだけなんです。埋め込まれているタグは、前回の
文字の横にアイコンを表示させる方法で説明しました、以下のようなタグになります。

つまり、2枚の画像を記事に挿入した後、2枚とも上記のタグに打ち替えてあげればいいんです。

・ファンブログの画像の保管場所の仕組みを知ろう！

・保存した画像のアドレス：（URL）の見つけ方

▼ それでは手順の説明です ▼

画像を貼りたい記事に画像を2枚挿入して、下書きで保存してください。

保存したらもう一度、編集画面を開き、省略タグ｛ファイル名｝の下に以下のタグを記述してください。

タグの記述が終わりましたら、それぞれの画像の保存先のアドレスを調べ、そのアドレスをコピーして★～★の位置に貼り付けてタグを完成させてください。プレビュー画面に同じ画像が表示されましたら成功です。これで、記事欄の省略タグ｛ファイル名｝は必要なくなりましたので削除してください。

※記事欄の省略タグ｛ファイル名｝を削除しても、画像は削除されませんので、ご安心ください。

※ imgタグの間に全角スペースを入力して間隔を空けてあります。

これで絵文字と同じタグになりましたので、画像は絵文字のように横に並びます。間隔は全角スペースで調整できます。記事幅内であれば何個でも追加できますが、それ以上になりますと改行されます。

いかがでしたでしょうか？画像の貼り付けは本来この方法が一般的なんです。｛ファイル名｝と表現されるのはファンブログ独特のもので、しかも不備があります。この一般的な画像タグの記述方法を覚えますと、いろいろ画像で遊ぶことができますので、ぜひ覚えてくださいね。

またちょっとした画像についてのお話がありましたら記事をアップします。気長にお待ちください。