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

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

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

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

2012年03月16日

【フロート】Dフロート画像に上下左右任意の余白を設定する練習


もう一度繰り返しますが、アフィリエイトURLの中をいじるのは、「いけません!」と各アフィリエイトを提供してくださっている企業からの回答でしたので、中をいじらずに、画像をいろいろとデザインして読みやすい記事ページを作りたいですよね。
今日は画像の周り、上下左右をそれぞれに設定する練習をしましょう。
<p style=”clear:both”> ・・・@ 
<DIV style=”float:left”;margin−top:C;margin−right:D;margin−bottom:E;margin−left:F”> …A
任意に貼り付ける画像コード
</DIV>  …A’
文章
<p style=”clear:both”>  …B

@はここより前に貼り付けてあるものを打ち消す意味で入れています。なくてもかまいません。自分は入れています。
AとA’の間に囲まれた画像が左に位置し、それに対してその下のテキストが、画像の右側に回り込むことになります。テキストを左に流し込みたい場合は「right」をいれます。
B回り込ませる命令を出した文章を、解除させるものです。
C〜Fにピクセル数「○○px」を入れて画像の周囲に余白を設定します。「;」を間に入れることを忘れないでください。
margin−top…Cは上の余白
margin−right…Dは右の余白
margin−bottom…Eは下の余白
margin−left…Fは左の余白となります。
・・・・・C〜Fに○○pxと数字を入れます(半角英数字)

では、実際に使って見ましょう⇒ここをクリック

【フロート】Cフロート(回り込み)に余白を設定する練習


アフィリエイトURLの中をいじるのは、「いけません!」と各アフィリエイトを提供してくださっている企業からの回答でしたので、中をいじらずに、画像をいろいろとデザインして読みやすい記事ページを作りたいですよね。
【フロート】@〜Cまでは画像自体に余白があるもので窮屈さは感じなかったと思います。今回お示しする画像のように余白がない場合窮屈さを喚起てしまうもの。
今日は画像の周りに余白を設定して窮屈さが感じられないようにしてみましょう。

<p style=”clear:both;margin:C”>  …@
<DIV style=”float:left”>  …A
任意に貼り付ける画像コード
</DIV>  …A’
文章
<p style=”clear:both”>  …B
@はここより前に貼り付けてあるものを打ち消す意味で入れています。
なくてもかまいません。自分は入れています。
AとA’の間に囲まれた画像が左に位置し、それに対してその下のテキストが、画像の右側に回り込むことになります。テキストを左に流し込みたい場合は「right」をいれます。
B回り込ませる命令を出した文章を、解除させるものです。
Cにピクセル数「○○px」を入れて画像の周囲に余白を設定します。「:」を間に入れることを忘れないでください。



では、実際に使って見ましょう⇒ここをクリック

【フロート】Bフロート(回り込み)の方向を逆にしてみましょ。テキストの位置を工夫


画像に対しての回り込みさせたテキストの位置を決める。

<DIV style=”float:@”> ・・・入れるアフィリエイト画像のどちらにテキストを回り込ませるかを@に入れる。(left、right)
A ・・・アフィリエイト画像などをここに入れる
<DIV>
B ・・・テキストを入れる
<p Styie=”Clear:both”> ・・・回り込みの解除
C ・・・解除後の文章など

B ・・・ここでの画像に対しての位置は<BR>(強制改行)を使って自由に決めてください。
では、実際に使って見ましょう⇒ここをクリック

【フロート】Aフロート(回り込み)のアクセント:強制改行…回り込みの中止


今日も、貼り付けた画像や、アフィリエイト広告、などを回り込んで文章を入力する仕方を、覚えましょう。

まずは昨日の復習から
<p style=”clear:both”>  …@
<DIV style=”float:left”>  …A
任意に貼り付ける画像コード
</DIV>  …A’
文章
<p style=”clear:both”>  …B
@はここより前に貼り付けてあるものを打ち消す意味で入れています。
なくてもかまいません。自分は入れています。
AとA’の間に囲まれた画像が左に位置します。それに対してその下の文章が、ここの場合画像の右側に回り込むことになります。
B回り込ませる命令を出した文章を、解除させるものです。

画像が大きくなく文章が長い場合、回り込みしてあふれた部分が文章領域の際全体で表示されていますが、Bを入れ忘れると、次に画像が入ったときにまた回り込みます。

文章の頭が出ていて、かっこが悪いことがあります。そこで、『強制改行』を実行します
A’の先頭に<BR>…を頭につけます。すると一段落下がります。

さらに、文章の途中で改行したり、Bの回り込みを解除することで、整理されることがあります。
では、実際に使って見ましょう⇒ここをクリック

【フロート】@フロート(回り込み)をしてみよう


今日は、貼り付けた画像や、アフィリエイト広告、などを回り込んで文章を入力する仕方を、覚えましょう。
画像と文章は下のHTMLの中にそれぞれを入れてみます。

<p style=”clear:both”>  …@
<DIV style=”float:left”>  …A
任意に貼り付ける画像コード
</DIV>  …A’
文章
<p style=”clear:both”>  …B
@はここより前に貼り付けてあるものを打ち消す意味で入れています。
なくてもかまいません。自分は入れています。
AとA’の間に囲まれた画像が左に位置します。それに対してその下の文章が、ここの場合画像の右側に回り込むことになります。
B回り込ませる命令を出した文章を、解除させるものです。
では、実際に使って見ましょう⇒続きをクリック

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

×

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