HP-advanceどっとこむ

<div style="background-image:url(//img01.i-ra.jp/usr/s/e/m/semipro/solid_red1.gif);
background-repeat:repeat;line-height:30px;">赤い直線のライン画像です。</div>

<div style="background-image:url(//img01.i-ra.jp/usr/s/e/m/semipro/dash_red1.gif);
background-repeat:repeat;line-height:30px;">赤い破線のライン画像です。</div>

<div style="background-image:url(//img01.i-ra.jp/usr/s/e/m/semipro/dot_red1.gif);
background-repeat:repeat;line-height:30px;">赤い点線のライン画像です。</div>

<div style="background-image:url(//img01.i-ra.jp/usr/s/e/m/semipro/wave_red1.gif);
background-repeat:repeat;line-height:30px;">赤い波線のライン画像です。</div>

<div style="background-image:url(//img01.i-ra.jp/usr/s/e/m/semipro/solid_green1.gif);
background-repeat:repeat;line-height:30px;">緑の直線のライン画像です。</div>

<div style="background-image:url(//img01.i-ra.jp/usr/s/e/m/semipro/dash_green1.gif);
background-repeat:repeat;line-height:30px;">緑の破線のライン画像です。</div>

<div style="background-image:url(//img01.i-ra.jp/usr/s/e/m/semipro/dot_green1.gif);
background-repeat:repeat;line-height:30px;">緑の点線のライン画像です。</div>

<div style="background-image:url(//img01.i-ra.jp/usr/s/e/m/semipro/wave_green1.gif);
background-repeat:repeat;line-height:30px;">緑の波線のライン画像です。</div>

<div style="background-image:url(//img01.i-ra.jp/usr/s/e/m/semipro/solid_blue1.gif);
background-repeat:repeat;line-height:30px;">青い直線のライン画像です。</div>

<div style="background-image:url(//img01.i-ra.jp/usr/s/e/m/semipro/dash_blue1.gif);
background-repeat:repeat;line-height:30px;">青い破線のライン画像です。</div>

<div style="background-image:url(//img01.i-ra.jp/usr/s/e/m/semipro/dot_blue1.gif);
background-repeat:repeat;line-height:30px;">青い点線のライン画像です。</div>

<div style="background-image:url(//img01.i-ra.jp/usr/s/e/m/semipro/wave_blue1.gif);
background-repeat:repeat;line-height:30px;">青い波線のライン画像です。</div>

①再配布の禁止・・・お借りした素材を、あたかも自作であるかのように偽って表示・販売することは禁じられています。
　　
②直リンク禁止・・・素材は一度自分のパソコンにダウンロード（名前をつけて保存）し、改めてホームページやブログにアップロードして使用します。配布サイトから直接呼び出すことは通信システムに負担がかかるため禁じられています。
　　
③アダルト系サイトなどでの使用不可。

画像を「クリックで拡大」する方法。
画像を「クリックで拡大」する方法を教えて欲しいというリクエストが入ったので、記事にします。
私はよくボウリングのスコアを掲載する際、このようにしています。

これは特に難しいことではありません。画像をアップロードする際、表示方法を「サムネイル」にすればOKです。（アップロードするのは拡大表示したい大きいサイズの画像のほうです。）

ただし、そのままではサムネイル画像が小さなものになってしまいます。
このとき、投稿画面ではこのように表示されています。
<a href="//img01.i-ra.jp/usr/semipro
/tomo130131_large.jpg" target="_blank"><img src="//img01.i-ra.jp/usr/semipro
/tomo130131_large-s.jpg" width="100" alt="" ></a>
「tomo130131_large.jpg」というのが拡大表示後の大きい画像です。（これはあらかじめ分かりやすいように自分でつけておいた名前です。）
「tomo130131_large-s.jpg」というのは画像をアップロードする際に表示方法を「サムネイル」にするとブログ側で自動的に付けられる名前です。
そこでこの画像サイズを変更してみると・・・
<a href="//img01.i-ra.jp/usr/semipro
/tomo130131_large.jpg" target="_blank"><img src="//img01.i-ra.jp/usr/semipro
/tomo130131_large-s.jpg" width="400" alt="" ></a>

ピンボケになってしまいましたね。
これは自動的に横幅100pxになっているサムネイル画像を無理に横幅400pxに伸ばしたからです。
私のようにあらかじめ横幅400pxの画像を掲載しておき、さらにクリックすると拡大表示されるようにするためには、掲載用の横幅400pxの画像も用意しておく必要があります。
私の場合は「tomo130131_small.jpg」としました。
つまりスコアシートをスキャンした画像を専用ソフトで加工して
クリック後、拡大表示用・・・「tomo130131_large.jpg」（横幅800px程度）
ブログ本文中で表示用・・・「tomo130131_small.jpg」（横幅400px）
の2種類を作成しておくということです。
これを別々にアップロードしておき、差し替えればOKです。
こうなります。
<a href="//img01.i-ra.jp/usr/semipro
/tomo130131_large.jpg" target="_blank"><img src="//img01.i-ra.jp/usr/semipro
/tomo130131_small.jpg" alt="" ></a>
私の場合は拡大表示せずに表示用画像だけでも何とか見えるように表示用の画像の横幅を400pxにしてありますが、その必要がないならば、手順はいたって簡単です。
サムネイルが横幅100pxで良い→アップロードの際に「サムネイル」を指定するだけ
無理に拡大してピンボケしても構わない→あとで数値を変更するだけ
です。
私のように「拡大表示にしたい」「拡大前の画像も鮮明なものにしたい」場合は2種類の画像をアップロードするために使用容量も増えますので注意して下さい。

※蛇足ですが、このページの様にサムネイル表示サイズを 320ピクセルなど 200ピクセル以上に設定すると..そのままではサムネイル“画像がボケてしまい ”見苦しくなるの”ですが、簡単な編集で 回避..クッキリさせる事が出来ます・・