画像を見やすくする

ブログでスタイルシート

トップ > ブログでスタイルシート

簡単スタイル: 文字を中央に寄せる; 文字を右に寄せる

画像を見やすく: 画像を左に寄せる; 画像を右に寄せる

文字の間隔を変える: 行の間隔を変える; 文字の間隔を変える

枠付きボックスで注目: 幅いっぱいのボックス; ボックスを右に表示; ボックスの中に色をつける

タイトル付ボックス: タイトル付ボックス; ボックスを右に寄せる; ボックスを２つ並べる

フォトスタンド風画像わく: 画像に枠を付ける; 中央に寄せて表示する; ２つ横に並べる

注意事項

現在の楽天ブログでは、記事入力の中に改行コードがあると、自動的に改行するタグ（BRタグ）が付加されます。テキストだけの場合には、このほうが便利なのですが、スタイルシートでレイアウトした場合、ブラウザでの表示が崩れます。そのため、サンプルHTMLも自動的に改行が入るのを前提にしています。見づらかったり、編集しづらかったりしますが、現在の仕様上仕方がありません。ここのサンプルは、楽天ブログで利用できるHTMLを使っています。なお、楽天ブログの「トップ自由欄」や「フリーページ」で利用するときに「自動改行なし（<BR>タグで指定）」のモードで編集する場合には、タグの途中とかでない限り、どこに改行を入れてもかまいません。
他のブログサイトでも、そのまま使えますが、利用できるHTMLに制限がある場合、うまく表示されないことがあります。もし、スタイルシートを別ファイルで指定できるのであれば、タグのstyle属性をclassやidに変更して指定したほうがスマートです（楽天ブログではこれができません）。

画像を左にに寄せる

まずは、最も基本的な使い方です。
「src="..." alt="..."」の「...」のところは、イメージのURLと代替テキストを入れてください。代替テキストとは、画像が表示されない場合に表示する文章です。
アフィリエイトのイメージをコピペする場合には、<img src="..." alt="...">の部分を置き換えればOKです。

サンプルHTML

<div style="float:left"><img src="..." alt="..."></div>日本最大級ショッピングサイト！お買い物なら楽天市場<div style="clear:left"></div>

ブラウザ表示

日本最大級ショッピングサイト！お買い物なら楽天市場

これだとイメージと文字がくっついて見栄えがよくありません。隙間をすこし開けてみましょう。

サンプルHTML

<div style="float:left;margin-right:5px"><img src="..." alt="..."></div>日本最大級ショッピングサイト！お買い物なら楽天市場<div style="clear:left"></div>

ブラウザ表示

日本最大級ショッピングサイト！お買い物なら楽天市場

画像の下に簡単な説明をつけてみます。説明の文章は中央に寄せて、小さくします。

サンプルHTML

<div style="float:left;margin-right:5px;text-align:center;font-size:small"><img src="..." alt="...">
アフィリエイトで
ポイントを貯めよう</div>日本最大級ショッピングサイト！
お買い物なら楽天市場
楽天スーパーポイントを使って
賢くショッピング<div style="clear:left"></div>

ブラウザ表示

アフィリエイトで
ポイントを貯めよう

日本最大級ショッピングサイト！
お買い物なら楽天市場
楽天スーパーポイントを使って
賢くショッピング

画像を右に寄せる

よく見るとわかると思いますが、「画像を左に寄せる」からleftをrightにrightをleftに変えただけです。
「src="..." alt="..."」の「...」のところは、イメージのURLと代替テキストを入れてください。代替テキストとは、画像が表示されない場合に表示する文章です。
アフィリエイトのイメージをコピペする場合には、<img src="..." alt="...">の部分を置き換えればOKです。

サンプルHTML

<div style="float:right"><img src="..." alt="..."></div>日本最大級ショッピングサイト！お買い物なら楽天市場<br style="clear:right">

ブラウザ表示

日本最大級ショッピングサイト！お買い物なら楽天市場

右の場合、文字がぴったりこないので、隙間がなくても大丈夫ですが、いちおう、隙間をすこし開けてみます。

サンプルHTML

<div style="float:right;margin-left:5px"><img src="..." alt="..."></div>日本最大級ショッピングサイト！お買い物なら楽天市場<br style="clear:right">

ブラウザ表示

日本最大級ショッピングサイト！お買い物なら楽天市場

画像の下に簡単な説明をつけてみます。説明の文章は中央に寄せて、小さくします。左寄せのサンプルと同じすぎるので、左側の文章の行間隔を変えてみます。

サンプルHTML

<div style="float:right;margin-left:5px;text-align:center;font-size:small"><img src="..." alt="...">
アフィリエイトで
ポイントを貯めよう</div><div style="line-height:1.5">日本最大級ショッピングサイト！
お買い物なら楽天市場
楽天スーパーポイントを使って
賢くショッピング</div><div style="clear:right"></div>

ブラウザ表示

アフィリエイトで
ポイントを貯めよう

日本最大級ショッピングサイト！
お買い物なら楽天市場
楽天スーパーポイントを使って
賢くショッピング

ワンポイント

スタイルに書かれている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タグでも同じように表示されますので、いろいろチャレンジしてみたらどうでしょう。