INTEREST

「Stripe Generator 」 - 縦でも横でも斜めでも、簡単にストライプが作れるジェネレーター

---

【 Stripe Generatorの使い方 】

1. 1.ストライプの柄を設定する
2. 2.背景画像を設定する

---

1.ストライプの柄を設定する

「Stripe Generator」のページを開くと下記のような画面になるので、この画面上で背景にしたいストライプ柄を設定します。（下記は初期状態の模様です）



見ただけで何となく分かる内容ですが簡単に説明するとこんな感じです♪

【stripe size（ストライプのサイズ）】 - 上記の画像では赤い部分の太さ
【spacing（ストライプの間隔）】 - 上記の画像では白い部分の太さ
【stripe color(s)（ストライプの色）】 - ストライプの色をここで設定します。（上記画像では赤色）
【background style（ストライプのスタイル）】 - ここでグラデーションにする事も出来ます。
【shadow（影）】 - ストライプに影を付ける。（上記画像の場合、赤いラインに影が付きます） 【background（背景）】 - 上記画像の白いライン部分の色をここで変更出来ます。
【stripe orientation（ストライプのタイプ）】 - ここで縦・横・斜めなどストライプのタイプを選択。


各設定項目を変更すると「preview」の画像に右のように マークが付き、クリックすると変更した内容に「preview」の画像が更新されます

「preview」の画像を確認して、好みのストライプ柄が出来たら「download」をクリックして画像を任意の場所に保存します。

背景画像として繰り返し表示するので画像自体は小さいです。
また、ストライプのサイズと間隔が小さい程、画像は小さくなります。
（デフォルトの状態だと縦横40px）

---

2.背景画像を設定する

上記の手順で作ったストライプ柄の画像をアップロードして、スタイルシートに下記のように記述。
※body要素に対しての設定で、6行目を追加で記述してます。（その他の部分は省略）

body {
font-family:○○○,○○○;
color:#○○○;
font-size:○○;
line-height:○○;
background-image: url("http://blog-imgs-46.fc2.com/i/n/t/interest2014/bg.gif");
}

※上記の「http://～」の部分に画像のURLを記述します。（上記は私の背景画像のURLです）

以上の1行を書き加えると、背景に画像が繰り返し表示されるので背景全体がストライプ柄になります。
また、画像を使わずCSSだけでも背景をストライプ柄に出来るので、やってはみたのですが拡大・縮小をすると柄が崩れたりする問題が出たので、今回の方法にしました...

一般的には、今回のように小さい画像を繰り返し表示して、背景の柄を表示する方法が多いとは思いますが、画像を繰り返し表示する事で重たくなったりしないのかな？とちょっと疑問に感じたので調べてみると下記のようなページを見つけたので参考までに♪

「背景リピートでページの読み込みが遅くなるのかやってみた | Backless -バックレス- 」 様

って事で、今回は背景をストライプ柄にする方法でした♪
オリジナルのストライプ柄でちょっとオシャレにイメージチェンジしてみるのも良いですね