以前「絶対はみ出さない画像！自動でサイズ調節するスタイルシート」という記事を書きました。その通りにすれば、ブラウザのサイズに合わせて、画像サイズを自動調整するようになります。

ですが、根本的にimgタグが、わからない人には役に立ちません。そこで、今回は簡易的な方法で、記事の中の、あるいは、サイドバーの中の画像が、はみ出さないようになるスタイルシートの書き方を説明します。

注：この記事は、説明の都合上、６００ピクセル以下の狭い画面サイズでは右側が切れて表示されると思いますが、ご了承ください。

画像が枠からはみ出さない、簡易的なスタイルシート

スタイルシートの最後に、次のように書き加えるだけで、画像が枠からはみ出さなくなります。

ファンブログのスタイルシートを書く場所は、別の記事「で、スタイルシートはどこに書くのか？」の中にある「ファンブログのスタイルシートはどこで設定するのか？」で説明しています。

サンプル

今回は、Tomさんが船橋西武百貨店で撮影した、ふなっしーの写真を題材にします。

上のスタイルシートを適用した状態で、写真を４００ピクセルの枠と２００ピクセルの枠に入れます。左が４００ピクセル、右が２００ピクセルです。

４００ピクセル

記事本文

２００ピクセル

サイドバー

左の場合、画像の横幅が４００ピクセルに満たない時は、そのままの大きさで、４００ピクセル以上の時は、４００ピクセルのサイズで表示されます。同じように、右の画像は、元々の横幅が２００ピクセルない時は、そのままの大きさで、２００ピクセル以上の時だけ、２００ピクセルに縮小されて表示されるようになります。

横幅いっぱいではなく、隙間を作りたい場合

上のように、余白がない状態ではなく、隙間を開けたいときには、上に書いたスタイルシートのmax-width:100%;の値を変更します。

例えば、max-width:90%;なら、枠の幅の９０パーセントのサイズより画像の幅が大きい時は、枠幅の９０パーセントの大きさに縮小された画像が、表示されるようになります。

４００ピクセル

記事本文

２００ピクセル

サイドバー

隙間を左右均等に割り振りたい時は

上の場合、隙間が出来ても、画像は左によっています。それを、バランス良く真ん中に配置したければ、次のようにします。

margin:0% 5%の、最初の0%は、上下の余白、次の5%は、左右の余白です。

左右の余白は、100%から画像の幅のサイズを引いて２で割った数値です。これで、余白が左右に均等に割り振られます。（注：autoでは、うまくいきません）

ただし、そうすると画像の横幅が元々小さくて、はみ出していない画像にも左側に5%の余白がついてしまいます。自分のブログの状況に合わせて対応してください。

４００ピクセル

記事本文

２００ピクセル

サイドバー

アフィリエイトの画像の場合

アフィリエイトの画像の場合、サイズ変更が認められているものと、認められていないものがあります。下のはバリューコマースのものですが、このように明確にサイズ変更が認められているものならいいのですが。

画像のサイズを変更して、トラブルが発生しても、当サイトは一切関知しません。

ファンブログにアップロードした画像URLの調べ方は「ファンブログでアップロードした画像の場所」に書いてあります。

上のキャプチャー画面はブラウザの表示サイズで横に並ぶ数が自動で変わります。意味がわからない方は、試しに今開いているこのページのサイズを色々と変えてみてください。画像が横に２個並んだり、１個だけになったりします。

今回のテクニックを駆使した記事が「ゲーマーブログの収益アップにアクセストレードを強く薦める理由」です。リンクをクリックすると別画面で、その記事が表示されますので、見比べながら説明をご覧いただければ、理解が早いかと思います。

floatとwidthで横の個数を自動調整

上のキャプチャー画面は全部、横幅320ピクセルのアフィリエイトです。ブラウザの表示画面が660ピクセル以上あれば、横２個x縦2個の表示、なければ横1個x縦4個で表示します。ソースコードは以下の通りです。

<style type="text/css">
p.capture{
 float:left;
 margin-right:10px;
}
</style>

<p class="capture"><a href="リンクURL" target="_blank"><img src="画像URL" alt="" border="0" /></a></p>
<p class="capture"><a href="リンクURL" target="_blank"><img src="画像URL" alt="" border="0" /></a></p>
<p class="capture"><a href="リンクURL" target="_blank"><img src="画像URL" alt="" border="0" /></a></p>
<p class="capture"><a href="リンクURL" target="_blank"><img src="画像URL" alt="" border="0" /></a></p>
<p style="clear:left;">大きさも色々選べる。</p>

float:leftで画像を左寄せにしています。さらにmargin-right:10pxで画像の右側に10ピクセルの余白を作ります。これで2つ並んでもピッタリとくっついてしまいません。

画像自体が320ピクセルで、右に余白が10ピクセルつくと、合計330ピクセルです。ですから表示領域が660ピクセル以上あれば、横に2個並びます。しかし、足りない時には、横ではなく下に移動します。

最後にclear:leftを絶対に忘れないようにしてください。

ファンブログにアップロードした画像URLの調べ方は「ファンブログでアップロードした画像の場所」に書いてあります。

今回も、ちぎり絵作家NARUさんの、作品「NARUシカ」をお借りして、スタイルシートで画面サイズに合わせて画像の大きさを自動で変える方法を説明します。

この記事はHTMLのimgタグの使い方が分かることを前提にしています。この記事を読んで分からない場合は、imgタグが分からない人向けに書いた、別の記事「画像が枠からはみ出さない、簡易的なスタイルシート」で対応してください。

画像の大きさを画面サイズに合わせて自動で変える

意味がわからない方は、試しに今開いているこのページのサイズを色々と変えてみてください。常に横幅いっぱいの大きさで、はみ出すことなく、フルサイズ「NARUシカ」が表示されていると思います。

自動で大きさを変える時はwidthをパーセントで指定する

このページの「NARUシカ」のソースコードは以下の通りです。

スタイルシートのwidthに100%を指定した結果、画面のサイズを変えても常にフルサイズになります。パーセンテージの基準は自分が入っている場所(node)の大きさです。基準の場所(node)の広さが1000ピクセルのところでwidth:100%を指定すれば、1000ピクセルの横幅で表示されます。

ですから、画像の親nodeが画面全体の50パーセントしかないところで、width:100%を指定しても、親nodeの幅いっぱいまでしか広がりません。

上のソースの表示結果

高さの調節はheightでおこなう

さらに、heightをautoに指定することで、高さは横幅に合わせた自動調整となります。

縦横比が正しくないと、表示もおかしくなるので注意しましょう。

heightを指定して、横幅を自動調整することも出来ます。

サイズの違う２つのちぎり絵を高さ200ピクセルに合わせて表示

ソースコード

<p>
<img src="NARUシカのURL" alt="NARUシカ" style="width:auto;height:200px;" /> 
<img src="シータとパズーのURL" alt="シータとパズー" style="width:auto;height:200px;" /> 
</p>

シータとパズー

こちらも、ちぎり絵作家NARUさんの作品「シータとパズー」です。元々は小さな画像なのですが、フルサイズに拡大して表示しています。紙という素材を生かした、作品の繊細な表面がよくわかります。けど、曲がっています。拡大すると曲がっています。

この作品の元の横幅は、320ピクセルです。

元のサイズで表示

普段は自動でサイズを変更するが、表示画面が320ピクセル以上の場合は横幅320ピクセルで固定したい！という時はどうしましょ？

max-widthで最大幅を指定する

max-widthというのは、そんな時に使えるスタイルシートです。

こうすると、横幅が320ピクセルまでは自動調整、ただし320ピクセル以上には広がらなくなります。320ピクセルだと小さいので、下はmax-width:700pxで設定しています。ブラウザのサイズを変えても700ピクセル以上には広がらないのがわかると思います。

また、それ以上小さくなって欲しくない時にはmin-widthというものもあります。min-widthを指定すると、その値よりは小さくならなくなります。

max-width min-width と同じ事を高さに適用させる、 max-height min-height というのもありますが、使い方は同じです。

だからどうした？と言われると困るんですが、楽天の

Ｒ

をスタイルシートだけで作ってみました。

←このＲです。

Ｒ

Ｒ

Ｒ

block要素でないと左右の余白がおかしくなります。

表示がおかしいなどのご指摘はコメントいただけると助かります。

口で説明すると難しいんですが、今回やりたいことは下の図のように横幅が広いときには1行で、横幅が足りない時には２行で、「前の記事」を左端に、「次の記事」を右端に表示することです。

このブログは「ここにブログの名前を入れます」というタイトルですが、長いので以下「ナマ入れ」と省略表記します。

先日、ナマ入れのスキンを変えました。まだスキンの名前を発表していなかったので、ここで発表させていただきます。スキンには「薄いけど破れない」という名前をつけました。

話は戻ります。このスキン（テンプレート）は画面の幅に応じて左右の幅が伸縮するように作っています。よく伸びるスキンです。実際にブラウザのサイズを変えて見ていただくと、お分かりいただけると思います。

ただし、あまりにも狭いと見づらいので、８００ピクセルより小さいときは固定幅になり、それより小さくならないようにしてあります。

問題は、画面の幅が足りている時と、足りていない時の２つのパターンがあって、その両方に対応しないといけないということです。今回の場合、横幅に応じて文字の大きさを変えるというアプローチもあるにはあります。

しかし、文字が小さくなるのは読みづらさにつながると思うので文字サイズは固定したまま、幅が足りない時は改行させるようにしました。

ソースコード

HTML

<div class="navi">

  <span class="left">
    <a href="URL" title="前の記事名">&laquo; 前の記事「記事名」</a>
  </span>

  <span class="right">
    <a href="URL" title="次の記事名">次の記事「記事名」 &raquo;</a>
  </span>

</div>

<br class="clear" />

スタイルシート（CSS）

div.navi{
 width:100%;
}
div.navi span.left{
 float:left;
 text-align:left;
}
div.navi span.right{
 float:right;
 text-align:right;
}
br.clear{
 clear:both;
}

« と » の２つはエンティティです。

実際には「«」は「«」、「»」は「»」と表示されます。

英語ではないらしいのですが、私はleft（左）の「«」と right（右）の「»」と覚えました。

ナビゲーションの表示領域はクラス名「navi」のdivエレメントです。

HTML5で書く場合は「div」ではなく、新しいエレメント「nav」が使えますが、今回の話題から逸れるので割愛します。

今回、もっとも重要なのは float です。

float の説明は以前の記事で説明しています。

float:left;の指定で « 前の記事「記事名」 全体を左に寄せます。同様に float:right;の指定で 次の記事「記事名」 » 全体を右に寄せます。

これで上の図のように、領域が足りている時は1行で、領域が足りない時は２行で表示されるようになります。

float を指定した後は忘れずに clear を指定しないとレイアウトがグチャグチャになるので注意が必要です。

text-align の指定はなくてもいいかもしれません。

ただ、 <div class="navi"> 〜 </div> の領域にtext-align:center を指定したら、表示が汚くなったので書き込んだままにしています。

ファンブログのスキンに適用する場合

このブログを書いているサービス「ファンブログ」のスキン用オリジナルタグは「ファンブログのオリジナルタグ一覧 − ファンブログ！！[無料]」で調べることが出来ます。そのオリジナルタグを適用して上のHTMLを、1記事ページのスキンに書き込むと下のようになります。

<div class="navi">
<BlogArchivePrevious>
<span class="left"><a href="{$BlogArchiveLink$}" title="{$BlogArchiveTitle$}">&laquo; 前の記事「{$BlogArchiveTitle$}」</a></span>
</BlogArchivePrevious>
<BlogArchiveNext>
<span class="right"><a href="{$BlogArchiveLink$}" title="{$BlogArchiveTitle$}">次の記事「{$BlogArchiveTitle$}」 &raquo;</a></span>
</BlogArchiveNext>
</div>

<BlogArchivePrevious> と </BlogArchivePrevious> の間に書いてあることは、前の記事があるときだけ表示されます。つまり、前の記事がない場合に « 前の記事「」 とカッコの中が空の状態で表示されてしまう心配はありません。

同様に <BlogArchiveNext> から </BlogArchiveNext> の間は、次の記事があるときにだけ表示されます。

次の2行ですが、普通に右寄せにするとこうなります。

ひと目　ひと目　手を動かして何かを編んでいると、
時間がたつのも忘れ、充実感のある最高に贅沢なひとときが味わえます。

これはスタイルシートならtext-alignで、
スタイルシートがわからなくても、ブログの編集画面で右寄せのマークを押せば簡単に出来ます。

でも、レイアウトによっては下のサンプル（これは「手芸部」の最新記事です）の赤字部分みたいに
右寄せなんだけど行の始まりを同じ位置にしたい時があります。そういった時の解決方法です。

下のサンプルでは、青文字が普通の右寄せ（text-align:right）、
赤文字が、これから説明するfloat:rightを使っています。

手編みするあったかい冬時間。大切なあの人へ。。あったかい冬をおくろう。
Isn't warm winter presented to the important man?

ポイントは「作り目」と「編み方」と「伏せ止め」だけです！
これだけで、誰でも、簡単にマフラーが編めちゃいます！

末尾で合わせる普通の右寄せ

ひと目　ひと目　手を動かして何かを編んでいると、
時間がたつのも忘れ、充実感のある最高に贅沢なひとときが味わえます。

この方法は、以前このブログの記事「枠の中の背景に画像を使いたい！ 」で説明していますが、
もう一度書きます。

文章の配置にはスタイルシートのtext-alignを使います。

文字を右に寄せたいときはtext-align:right;と指定します。

文字を左に寄せたいときはtext-align:left;と指定しますが、普通は書かなくて構いません。
通常は指定しなければ自動でtext-align:left;とみなされるからです。

文字を真ん中に合わせたいときはtext-align:center;と指定します。
下がtext-align:center;のサンプルです。

ひと目　ひと目　手を動かして何かを編んでいると、
時間がたつのも忘れ、充実感のある最高に贅沢なひとときが味わえます。

スタイルシートの書き方は以前の記事「で、スタイルシートはどこに書くのか？」に書いています。
今回はインラインでの書き方だけ説明します。

普段はブログの編集画面に文章を書くだけなので、知らない人もいるかもしれません。
説明すると、HTMLでは<p>から</p>の間に文章を書きます。

自分はそんなことした覚えはない。という方も自分のブログのソースを見るとそうなっています。
それは文字を書いて公開すると、ブログが勝手にHTMLに変換してくれるからです。

この最初の<p>の中にスタイルシートを書き込む事ができます。これがインラインでの記述方法です。具体的には下のように書きます。

<p style="text-align:right;">ひと目　ひと目　手を動かして何かを編んでいると、<br/>時間がたつのも忘れ、充実感のある最高に贅沢なひとときが味わえます。</p>

<pのpの後に半角スペースを1文字入れてからstyle="text-align:right;"と書きます。その後に>と書いてから文章。文章が終わったら、</p>と書きます。<p>から</p>までが一つの文章です。

<pの後は半角スペースです。全角スペースはエラーです。同じように<から>の間のアルファベットや記号は半角で書きます。ちゃんと書いたのに出来ないというときは、半角で書いているかを確認します。

文中に<br />とあるのは改行の印です。

HTMLでは<br />が出てこない限り改行とみなされません。文章を書いているときに何回Enterキーを押して改行しても、それはHTML上では改行とみなされていません。<p>や</p>と同じようにブログが自動で、Enterキーを押す度に<br />を挿入しているから改行して表示されるだけです。

確認：末尾で合わせる普通の右寄せの書き方

<p style="text-align:right;">ひと目　ひと目　手を動かして何かを編んでいると、<br/>時間がたつのも忘れ、充実感のある最高に贅沢なひとときが味わえます。</p>

行の始まりを左に合わせた右寄せ

ひと目　ひと目　手を動かして何かを編んでいると、
時間がたつのも忘れ、充実感のある最高に贅沢なひとときが味わえます。

全体をまとめて右や左に寄せるに時はfloatを使います。

右寄せにするにはfloat:right;と書きます。
左寄せにしたければfloat:left;と書きますが通常は必要ありません。

またtext-alignの時のcenterのように真ん中合わせはできません。右寄せか、左寄せだけです。

行の始まりを左に合わせた右寄せの具体的なソースは下のようになります。

text-alignは指定しなければ、text-align:left;と同じと先ほど書きました。
つまり上のコードは左合わせの、改行した2行の文章を右側に配置ということです。

これで右側に配置されますが、floatを使う場合は気をつけないといけないことがあります。

Twitter愛のリレー小説
「セルヴーズの雨傘」

新しいスタイルシートのCSS3を使うと画像を使わないでも簡単に文字に影がつけられます。

ただし、このCSS3は全てのブラウザで対応しているわけではありません。
Internet Explorer 9では上の文字に影がついて見えますが、Internet Explorer 8では
影がついていません。

これはバージョンの問題です。ただし、Windows XPではInternet Explorerは8までしか
インストールできません。

Window7を買わせたいマイクロソフトの意地悪ではなく、ハードウェアに関わる技術的な問題が
原因のようです。

もし、あなたがWindows7をお使いなら、Internet Explorer9が入っています。
でもあなたが自分のブログをお持ちの場合「私はInternet Explorer9だから大丈夫」という考えは間違いです。

あなたには影がついて見えていても、あなたのブログの読者には影がついて見えないかもしれない。いや、影がついて見えない読者も確実にいる。

このことを念頭においてデザインしないと失敗します。

今回の記事はそういう制約があることを承知した上でお読みください。

今回は、このバナーを題材に、透明画像の背景に色をつける方法。

バナーの場所は「あげはコーナー | パート派遣主婦のぐーたら子育て生活」です。

ケース１

ブログを改造したらサイドバーがない！

いや、あった！記事の下に。

ケース２

サイドバーのタイトルに背景画像を指定したが、画像の上下が切れている！

そうなってしまうのはなぜか？どうやれば直るのか。

img画像と文字は基本的に重なることは無いですが、背景が画像の場合はその上の文字と
重なってしまう事があります。

その重なりを避けるにはスタイルシートを使います。