スポンサーサイト

 

--.--.--

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
ブログランキングに参加中♪
良かったらポチっとお願いします
にほんブログ村 IT技術ブログ Webサイト構築へ
B!
-------- | スポンサー広告 | | | このページのトップへ

http://interest2014.blog.fc2.com/tb.php/44-1a784f76

「スポンサーサイト」へのトラックバック

- TrackBack -


「スポンサーサイト」へのコメント

- Comment -

ストライプ

あると♪さんこんばんわ
Stripe Generatorなる物がるんですね。色々あるんでビックリです。
そうかぁ、ストライプってーのもありですかねぇ・・・
http://backless.org/大変楽しく読ませ頂きました。
いやぁ、世の中は狭いようで広いです。笑
ひーさんは先生デビューするそうです。楽しみですねぇ。でも、あると♪さんが益々忙しくなりそうな予感。ひーさんごめんなさい。笑
  • 2014-12-12 02:05
  • girigiri26さん@管理人
  • 編集

初めまして

なまけものといいます。
ブログ始めたばかりで、人のブログにコメントを書くのも
初めてです。
ブログのスタイルもかっこよく、見出しの書き方も
興味をそそる感じで、読んでて楽しかったです。
  • 2014-12-12 23:15
  • なまけものさん@管理人
  • 編集

Re: 初めまして

> なまけものさん

ご訪問&コメントありがとうございます♪

ちょっと体調を崩してしまってるので、
元気になったら なまけものさん のブログにも訪問させて頂きますね♪
  • 2014-12-15 14:07
  • あると♪さん@管理人
  • 編集

コメントの投稿

- Post a Comment -










管理者にだけ表示を許可する

※コメントを投稿する際に、任意の編集用パスワードを設定することで投稿後にコメントの修正・削除が可能になります。

ブログの背景をストライプ柄にしてみた

 

2014.10.28

Stripe Generator ブログの更新を1週間以上サボっちゃった... (T∀T;)

数日前に知人にホームページ作成を頼まれて、色々やってたら自分のブログの更新を怠ってしまいました...
継続して更新するのが目標なので、さすがにそろそろ新しい記事を書かなくてはっ!!って事で今回は「Stripe Generator」と言うストライプ柄を簡単に作れるジェネレーターを使って背景をシマシマにしてみた♪
かなり前からあるジェネレーターらしいので、知ってる方も多いかもですが、とにかく簡単に色んなストライプが作れます

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



【 Stripe Generatorの使い方 】


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



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


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

「Stripe Generator」設定画面

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

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


Stripe Generator 各設定項目を変更すると「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 -バックレス- 」 様

って事で、今回は背景をストライプ柄にする方法でした♪
オリジナルのストライプ柄でちょっとオシャレにイメージチェンジしてみるのも良いですね
ブログランキングに参加中♪
良かったらポチっとお願いします
にほんブログ村 IT技術ブログ Webサイト構築へ
B!


関連記事
2014-10-28 | 画像系 | コメント(3) | トラックバック(0) | このページのトップへ

http://interest2014.blog.fc2.com/tb.php/44-1a784f76

「ブログの背景をストライプ柄にしてみた」へのトラックバック

- TrackBack -


「ブログの背景をストライプ柄にしてみた」へのコメント

- Comment -

ストライプ

あると♪さんこんばんわ
Stripe Generatorなる物がるんですね。色々あるんでビックリです。
そうかぁ、ストライプってーのもありですかねぇ・・・
http://backless.org/大変楽しく読ませ頂きました。
いやぁ、世の中は狭いようで広いです。笑
ひーさんは先生デビューするそうです。楽しみですねぇ。でも、あると♪さんが益々忙しくなりそうな予感。ひーさんごめんなさい。笑
  • 2014-12-12 02:05
  • girigiri26さん@管理人
  • 編集

初めまして

なまけものといいます。
ブログ始めたばかりで、人のブログにコメントを書くのも
初めてです。
ブログのスタイルもかっこよく、見出しの書き方も
興味をそそる感じで、読んでて楽しかったです。
  • 2014-12-12 23:15
  • なまけものさん@管理人
  • 編集

Re: 初めまして

> なまけものさん

ご訪問&コメントありがとうございます♪

ちょっと体調を崩してしまってるので、
元気になったら なまけものさん のブログにも訪問させて頂きますね♪
  • 2014-12-15 14:07
  • あると♪さん@管理人
  • 編集

コメントの投稿

- Post a Comment -










管理者にだけ表示を許可する

※コメントを投稿する際に、任意の編集用パスワードを設定することで投稿後にコメントの修正・削除が可能になります。

▼クリックすると配色が変更されます  
このボタンの設置方法は こちら♪

White
Black

プロフィールClick

プロフィール画像

Author:あると♪
ブログ開始: 日目
公開記事数:

Webサイト製作の勉強にと思ってブログのカスタマイズに挑戦してる初心者です♪その他にも気になった事、興味がある事などを気ままに書いてますっ!!

当ブログのご案内は こちら♪

最新記事Click

最新コメントClick

カテゴリClick

月別アーカイブClick

アクセスカウンターClick

設置日
2014.11.19

スポンサーリンクClick

このページの目次Click

人気ランキングClick

ブログパーツ

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。