無料【背景・パターン】縦線ストライプ透過png-白サイズ違いセット[stripe002w]

(1)角丸リンクボタン影付

細-縦線ストライプ

横幅:200px

高さ:35px

枠幅:1px

背景色&枠色:#ffd5d5

 

 

HTMLタグ

<div class="btn001" style="background-color:#ffd5d5; border:#ffd5d5 1px solid; width:200px; margin:0 auto;"><a class="stripe002s-white" style="line-height:35px;" href="ここにリンク先"><strong>お問い合わせ</strong></a></div>

 

中-縦線ストライプ

横幅:200px

高さ:50px

枠幅:1px

背景色&枠色:#ffd5d5

 

 

HTMLタグ

<div class="btn001" style="background-color:#ffd5d5; border:#ffd5d5 1px solid; width:200px; margin:0 auto;"><a class="stripe002m-white" style="line-height:50px;" href="ここにリンク先"><strong>お問い合わせ</strong></a></div>

 

太-縦線ストライプ

横幅:200px

高さ:50px

枠幅:1px

背景色&枠色:#ffd5d5

 

 

HTMLタグ

<div class="btn001" style="background-color:#ffd5d5; border:#ffd5d5 1px solid; width:200px; margin:0 auto;"><a class="stripe002l-white" style="line-height:50px;" href="ここにリンク先"><strong>お問い合わせ</strong></a></div>

 

特太-縦線ストライプ

横幅:200px

高さ:50px

枠幅:1px

背景色&枠色:#ffd5d5

 

 

HTMLタグ

<div class="btn001" style="background-color:#ffd5d5; border:#ffd5d5 1px solid; width:200px; margin:0 auto;"><a class="stripe002ll-white" style="line-height:50px;" href="ここにリンク先"><strong>お問い合わせ</strong></a></div>

 

(2)角丸リンクボタン影なし

細-縦線ストライプ

横幅:200px

高さ:35px

枠幅:1px

背景色&枠色:#ffd5d5

 

 

HTMLタグ

<div class="btn002" style="background-color:#ffd5d5; border:#ffd5d5 1px solid; width:200px; margin:0 auto;"><a class="stripe002s-white" style="line-height:35px;" href="ここにリンク先"><strong>お問い合わせ</strong></a></div>

 

中-縦線ストライプ

横幅:200px

高さ:50px

枠幅:1px

背景色&枠色:#ffd5d5

 

 

HTMLタグ

<div class="btn002" style="background-color:#ffd5d5; border:#ffd5d5 1px solid; width:200px; margin:0 auto;"><a class="stripe002m-white" style="line-height:50px;" href="ここにリンク先"><strong>お問い合わせ</strong></a></div>

 

太-縦線ストライプ

横幅:200px

高さ:50px

枠幅:1px

背景色&枠色:#ffd5d5

 

 

HTMLタグ

<div class="btn002" style="background-color:#ffd5d5; border:#ffd5d5 1px solid; width:200px; margin:0 auto;"><a class="stripe002l-white" style="line-height:50px;" href="ここにリンク先"><strong>お問い合わせ</strong></a></div>

 

特太-縦線ストライプ

横幅:200px

高さ:50px

枠幅:1px

背景色&枠色:#ffd5d5

 

 

HTMLタグ

<div class="btn002" style="background-color:#ffd5d5; border:#ffd5d5 1px solid; width:200px; margin:0 auto;"><a class="stripe002ll-white" style="line-height:50px;" href="ここにリンク先"><strong>お問い合わせ</strong></a></div>

 

★ピンク字(横幅)、★青字(高さ)★オレンジ字(枠幅)★水色字(背景色&枠色)は、

それぞれお好きに変更していただけます。

サイズ調整や色指定を行ってご自由にカスタマイズしてください。

 

<カスタマイズのヒント>

先にリンクを設定後、HTMLタグを後で追記する方が簡単にできます。

(3)ページ背景

・背景画像:stripe002s-white.png
・背景色:#ffeaea
・背景画像:stripe002l-white.png
・背景色:#ffead5
・背景画像:stripe002m-white.png
・背景色:#eafff4
・背景画像:stripe002ll-white.png
・背景色:#ffead5

(1)(2)の使い方

こちらでご案内している使い方は<Jimdoユーザー(独自レイアウト)>を対象としています。

HTMLやCSS等の知識をお持ちの方は、もちろんその他のサイトでも利用OKです。

 

  1. 画像をダウンロードし、圧縮ファイルを解凍後、
    レイアウト>独自レイアウト>ファイル に「ファイルを選択」し「アップロード」する。(★)
  2. 下記CSSコードをコピーし、
    レイアウト>独自レイアウト>CSS に貼り付けて「保存」。(★)
  3. お好みの見本のHTMLタグをコピーし、文章パーツのHTMLへ貼り付けてお使いください。

 

★ヒント

 ファイルアップロードの方法|CSS編集の方法


(3)の使い方

こちらでご案内している使い方は<Jimdoユーザー・アメーバブログユーザー>を対象としています。

HTMLやCSS等の知識をお持ちの方は、もちろんその他のサイトでも利用OKです。

ソース・コード&使い方はこちら


ダウンロードは下記から

※当サイトのフリー素材は、リンクウェア(リンクやクレジット表記を条件に無料で使用可)と

させていただいております。ダウンロード前に必ず利用規約をお読みください。

利用規約こちら

 

ダウンロード
無料【背景・パターン】縦線ストライプ透過png-白サイズ違いセット[stripe002w]
ボタン背景や見出し背景に最適なストライプ画像です。

「お問い合わせ」や「お申し込み」などのリンクをボタン風に表現できます。
また、見出し背景にも使っていただけます。

★ポイント★
白色のストライプを太さS、M、L、LLの4種類をご用意しました。
透過画像なので、お好きな背景色と組み合わせてお使いいただけます。

<内容>
計3種類のPNGデータを圧縮ファイル(Zip形式)にしています。
ダウンロード後、ダブルクリックして解凍後、お使いください。
stripe002w.zip
圧縮Zipフォーマット 1020 Bytes

CSSコードは下記

/*--------------------------------

 ボタン

--------------------------------*/

/*影付*/

.btn001 {

border-radius: 10px;/*角丸*/

-webkit-border-radius: 10px;/*角丸*/

-moz-border-radius: 10px;/*角丸*/

}

 

.btn001 a {

display:block;

padding:10px;

text-decoration:none !important;

text-align:center;

border-radius: 10px;/*角丸*/

-webkit-border-radius: 10px;/*角丸*/

-moz-border-radius: 10px;/*角丸*/

-webkit-box-shadow: 3px 3px 5px 0 rgba(0,0,0,0.3);/*影*/

-moz-box-shadow: 3px 3px 5px 0 rgba(0,0,0,0.3);/*影*/

box-shadow: 3px 3px 5px 0 rgba(0,0,0,0.3);/*影*/ 

}

 

/*影なし*/

.btn002 {

border-radius: 10px;/*角丸*/

-webkit-border-radius: 10px;/*角丸*/

-moz-border-radius: 10px;/*角丸*/

}

 

.btn002 a {

display:block;

padding:10px;

text-decoration:none !important;

text-align:center;

border-radius: 10px;/*角丸*/

-webkit-border-radius: 10px;/*角丸*/

-moz-border-radius: 10px;/*角丸*/

}

 
/*細-縦ストライプ*/
.stripe002s-white {
background:url(stripe002s-white.png) repeat;
border-radius: 10px;/*角丸*/
-webkit-border-radius: 10px;/*角丸*/
-moz-border-radius: 10px;/*角丸*/
}
 
/*中-縦ストライプ*/
.stripe002m-white {
background:url(stripe002m-white.png) repeat;
border-radius: 10px;/*角丸*/
-webkit-border-radius: 10px;/*角丸*/
-moz-border-radius: 10px;/*角丸*/
}
 
/*大-縦ストライプ*/
.stripe002l-white {
background:url(stripe002l-white.png) repeat;
border-radius: 10px;/*角丸*/
-webkit-border-radius: 10px;/*角丸*/
-moz-border-radius: 10px;/*角丸*/
}
 
/*特大-縦ストライプ*/
.stripe002ll-white {
background:url(stripe002ll-white.png) repeat;
border-radius: 10px;/*角丸*/
-webkit-border-radius: 10px;/*角丸*/
-moz-border-radius: 10px;/*角丸*/
}