イーストカウ号＠AMANAMI

今回ご紹介するのは「コード」でいくつかのことを指定して画像と文章を上手に表示させる方法です。

 

まずは比較のため、「コード」で指定する前と指定後を見てみましょう。

 

 

左の写真は天草から届いた鯛とイカをお刺身にして、お寿司にしたものです。イカの方はちょっと不恰好ですが、鯛の方はそれなりによくできたんじゃないかなと思います。

 

左の写真は天草から届いた鯛とイカをお刺身にして、お寿司にしたものです。

イカの方はちょっと不恰好ですが、鯛の方はそれなりによくできたんじゃないかなと思います。

---

違いがお分かりでしょうか。

指定前だとあまりにも不恰好なので、もう一段文字列を下げて画像の真下から文章が始まるようになさっている方が多いと思います。

指定後の大きな特徴は、

1．画像と文章との間に空間がある

2．画像の真横に文章が表示されている（文字が回りこんでいる）　

この2点ですね。

さてさて、ここで「コード」で指定してあげることは3つです。
1．画像の位置（左か右か）
2．画像の左右にどれくらいの余白を入れるか
3．画像の上下にどれくらいの余白を入れるか

上記3つのことを、コードで指定する時にはこう書きます。

• 1．（左寄せ）align="left"　（右寄せ）align="right" 
• 2．（余白20ピクセル）hspace="20"
• 3．（余白20ピクセル）vspace="20"

2と3では数値を入れますが、数字が大きいほど余白も大きくなります。
このページの例では余白を上下左右とも20ピクセルに設定しているので、それを参考にご自分で変えてみてくださいね。

入力時の注意。
半角英数で入力すること。
スペース（空白）も半角で入れること。

最初にIMGを探してください。

IMG の後に半角スペースを入れた後、以下の★～★の間をコピーして貼り付けて下さい（上の画像と貼り付け位置が異なりますが、問題ありません）。

画像を左、文章を右にする場合　★align="left" hspace="20" vspace="20"★

画像を右、文章を左にする場合　★align="right" hspace="20" vspace="20"★

貼り付けた後にもsrcとの間に半角スペースが必要です。
コードでの入力はここでひとまず終わります。本文入力をビジュアルにしましょう。画像が表示されていると思います。あとは画像の横をクリックして文章を入力していくだけです。
文字の入力は画像の高さより1行上から始まるので、Enterを押して改行をしてから始めるといいでしょう。
挿入した画像の横に表示させたい文章を書き終えたらもう一度コード入力に戻って
★< BR clear="all">★を文章の最後に貼り付けて下さい。

これがないと、続けて文章を書くときも今までの指定の影響を受けてしまいます。

以下、入れた場合と入れなかった場合の例です。

【入力しなかった場合】

 

画像について～。
画像とは関係ないこと～。

【入力した場合】

画像について～。
画像とは関係ないこと～。