広告

posted by fanblog

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

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

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

今回の方法は1番単純な画像を文字列に挿入する方法です、身近なものでは絵文字が1番わかりやすいかと思います。絵文字は文字に近い大きさで小さいですが、立派な1枚の画像なんです。
文字列に画像を挿入するということは、2枚画像の高さが違った場合は絵文字と同じく下面が揃うことになるということを覚えておいてくださいね。
この絵文字は2個連続で打てば2つ並びます。スペースで間隔を空けることも可能ですよね。画像を横に並べるには、この絵文字と同じタグに打ち変えてあげれば、同じことができるようになります。
コメントや記事を打った場合HTMLでは { まる} こんな感じで表現され、文面上では まる こんな絵文字が表示されます。このHTMLで { } で囲まれた場所には実は画像のタグが埋め込まれているのですが、文章を打つのに長いタグが入ると打ちづらいので、省略されて表示されているだけなんです。埋め込まれているタグは、前回の
文字の横にアイコンを表示させる方法で説明しました、以下のようなタグになります。
<img src="★画像のアドレス:(URL)★" alt="" border="0" />

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


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

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

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

<img src="★画像のURL★" alt="" border="0" /><img src="★画像のURL★" alt="" border="0" />

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

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

これで絵文字と同じタグになりましたので、画像は絵文字のように横に並びます。間隔は全角スペースで調整できます。記事幅内であれば何個でも追加できますが、それ以上になりますと改行されます。
いかがでしたでしょうか?画像の貼り付けは本来この方法が一般的なんです。{ファイル名} と表現されるのはファンブログ独特のもので、しかも不備があります。この一般的な画像タグの記述方法を覚えますと、いろいろ画像で遊ぶことができますので、ぜひ覚えてくださいね。

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

2009年06月26日 : サポートさんから上記解決策と同内容のご解答をいただけました。
※上記Htmlタグはコピー&ペーストでそのままご利用になれます。
※Htmlタグのご使用、カスタマイズにつきましては、利用者の自己責任にてお願いします。
この情報が、お役にたちましたら ≫ FC2 Blog Ranking ≪ 押していただけると励みになります

この記事へのコメント

« 前の記事 : 文字の横にアイコンを表示させる方法|A8.netサポートセンター様からのご解答
5枚のHTMLファイルの活用法 : 次の記事 »

ブログパーツ
美容整形
Related Posts Plugin for WordPress, Blogger...
×

この広告は30日以上新しい記事の更新がないブログに表示されております。