今ではもう、ブログの記事に編集・装飾がある程度できるようになりました。さらに、seesaablogのコンテンツも充実し、最新記事下のカテゴリーごとのご紹介が効果的に表せるようになりましたので、これを機に過去の記事も改めて修正し直し、整理して、同様な記事を繰り返し書かずに、上書きのみにして、カテゴリごとに学びやすいようにします。

カテゴリことの表記は→ 【テーブル】・・・ とします。

それぞれの記事タイトルも
【テーブル】@表組みの基本から・・・のような表記にします。 ○番号で続きの学びが確実にできるように表していきます。最初から学ぶときは@からたどってみてください。

従って、記事更新の日付は参考にせずに、【カテゴリ】から学びたい項目を探して進んでいってください。 今後とも末永くいつでも戻ってきて学んでみてください。

2012年03月20日

【画像の表示・配置】@イラスト画像の回り込み「右」或いは「左」


画像を使った回り込みを学びます。
最初にフリーの画像を自分のパソコンにダウンロードしていたものを、Seesaaに画像のアップロードをして追いましょう。(アップロードの仕方についてはSeesaaの説明を参考に行なってください)もちろん自分で創られた画像でもかまいませんよ。

Seesaaブログを前提に説明しますが、他者の運営するブログでも同様に行なえます。参考にしてください。

画像に対してのブログへの挿入は次のようなHTMLが基本です。

<IMG src”@” border=”A” align=”B”>
@は表示させるイメージファイルのURL
Aは画像と回り込むテキストとの境界線を定めます。この場合必要ないので、”0”とします。border=”0”それ自体が回り込みの領域を規定させているようです。画像全体を回り込ませる要素があるようです。
Bはleft、rightと入れて、テキストを回りこませる方向を指示します。

この画像はアップロードして置いたものです。画像が保存されているので、[ファイル]をクリックするとアップロードされた画像があります。それを右クリックし、画像のURLをコピーしましょう。
それを、あらかじめ設定しておいた上のHTMLの@“URL”のところに貼り付けます。
この文章の余白は無しつまり”0”とします。
文章を回り込ませるならAのところにrightかleftを入れます。画像の位置を指定するので文章はその反対側に回しこみます。この文章の例はleftです。さらにborderの数値は0です 

さらに上の例は画像のHTMLを指定した後すぐ改行もなく文書を挿入した例です。borderを入れないと画像にテキスト下一行分がかかるだけですので注意しましょう。

同じ文章で同じ画像のHTMLで文章を画像の前にも入れて見ましょう。前の文章と画像には改行を入れています。すると自然に文章が流れています。
Aはそのまま入れます。画像全体を回り込ませるためです。注意ですがborder=”A”をalign=”B”の後にもってくると回り込みが下一行だけとなります。

自分自身も初心者の域を出ていません。繰り返し試して動かしながらご紹介しています。

好奇心で中央に画像を配すとどうなるでしょう。
回り込みまれるテキストが一行のみで後は下になかれるようです。本来規定できない使い方のようです。

この学びは、画像の位置を規定してテキストを回りこませる方法です。
逆に画像ではなく、テキストに回り込みを指定していくのは【テキスト;フロート】テキストの回り込み [ココクリックで一回目の学び]で学んでみましょう。私自身もそちらを常に使っています。

次回は、余白を指定してみます。

いつものことですがHTMLは半角英数字での入力となります。

今日はここまで
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
この記事へのトラックバックURL
http://blog.seesaa.jp/tb/11145079

この記事へのトラックバック

トップページへ戻る方は次項有クリックして

×

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