現在の楽天ブログでは、記事入力の中に改行コードがあると、自動的に改行するタグ(BRタグ)が付加されます。
テキストだけの場合には、このほうが便利なのですが、スタイルシートでレイアウトした場合、ブラウザでの表示が崩れます。そのため、サンプルHTMLも自動的に改行が入るのを前提にしています。
見づらかったり、編集しづらかったりしますが、現在の仕様上仕方がありません。
ここのサンプルは、楽天ブログで利用できるHTMLを使っています。なお、楽天ブログの「トップ自由欄」や「フリーページ」で利用するときに「自動改行なし(<BR>タグで指定)」のモードで編集する場合には、タグの途中とかでない限り、どこに改行を入れてもかまいません。
他のブログサイトでも、そのまま使えますが、利用できるHTMLに制限がある場合、うまく表示されないことがあります。もし、スタイルシートを別ファイルで指定できるのであれば、タグのstyle属性をclassやidに変更して指定したほうがスマートです(楽天ブログではこれができません)。
まずは、最も基本的な使い方です。
「src="..." alt="..."」の「...」のところは、イメージのURLと代替テキストを入れてください。代替テキストとは、画像が表示されない場合に表示する文章です。
アフィリエイトのイメージをコピペする場合には、<img src="..." alt="...">の部分を置き換えればOKです。
これだとイメージと文字がくっついて見栄えがよくありません。隙間をすこし開けてみましょう。
画像の下に簡単な説明をつけてみます。説明の文章は中央に寄せて、小さくします。
よく見るとわかると思いますが、「画像を左に寄せる」からleftをrightにrightをleftに変えただけです。
「src="..." alt="..."」の「...」のところは、イメージのURLと代替テキストを入れてください。代替テキストとは、画像が表示されない場合に表示する文章です。
アフィリエイトのイメージをコピペする場合には、<img src="..." alt="...">の部分を置き換えればOKです。
右の場合、文字がぴったりこないので、隙間がなくても大丈夫ですが、いちおう、隙間をすこし開けてみます。
画像の下に簡単な説明をつけてみます。説明の文章は中央に寄せて、小さくします。左寄せのサンプルと同じすぎるので、左側の文章の行間隔を変えてみます。
スタイルに書かれているfloat:leftとfloat:right、clear:leftとclear:rightですが、floatとclearが表示上どのようになるのかをちゃんと理解するには、スタイルシートについて深く理解する必要があります。
まずは感覚的に次のように思っていただければよいと思います。
「floatを指定すると、そのタグで表示される四角い領域が、左または右に寄って表示される。」
「その後にfloatが指定されていない文字や画像があると、floatの領域を避けるように表示される。」
ということですが、「floatの領域を避ける」というのは、ちょっと難しい表現ですがこれは「回り込み」といって、画像があると文章の文字を表示する場所が狭くなって、画像が終わると文字の表示される幅が元に戻るような状態をいいます。
clearについてですが、これは簡単にいうと「回り込みを解除する」ということになります。詳しく書くと長くなるので、とりあえずは、「float:left」で左寄せをしたら、どこかで「clear:left」を指定しておいたほうがよいと思ってください。同様に「float:right」したら「clear:right」です。
さらに実は「float:left」と「float:right」は、同時に指定することができるのです。そのときに両方の回り込みを解除する場合には「clear:both」と指定します。
ここでは、画像を位置を変えるスタイルシートでしたが、IMGタグの部分を変えると同じようにレイアウトされます。TABLEタグやDIVタグでも同じように表示されますので、いろいろチャレンジしてみたらどうでしょう。