フリーランス・クリエイターへ送るWebマガジン
 
MENU
14Jan プログラミング・開発

【コピペOK】LPでよく使われるCTA用の三角の部分とその上のテキスト

少し古いデザインではありますが、LPでよく使われる三角形の部分の素材とその上に載せるテキストをお作りしました。

こんな感じの用途でお使いいただけます

グラデーションをかけた三角の画像はフリー画像としてお使いいただけます。

注意
ご使用は自己責任およびバックアップは入念にお願いします

グラデーションの三角

上画像の6色を用意しました。

まとめてのダウンロードはこちら

各画像のダウンロードは下の画像一覧からお好きなものをどうぞ。

※画像はクリックで拡大可能

三角形にテキストを乗せたコード

全体を

<center>コード</center>

で囲っていますので、左詰めしたい場合は外してください。ただ、多少の絶対値の修正が必要になるかと思います。

緑三角に緑文字乗せ

野菜の汚れが不安…

※横スクロールできます。

HTML
<center>
<div class="text_on_img">
<img src="画像URL" />
<p>ここにテキスト</p>
</div>
</center>
CSS
.text_on_img {
  position: relative;
  }

.text_on_img p {
  width: 90%;
  position: absolute;
  font-weight: bold;
  font-family: serif;
  text-shadow: 3px 3px 5px #FFFFFF;
  font-size: 2em;
  color: #31B404;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  margin: 0;
  padding: 0;
  }

.text_on_img img {
  width: 100%;
  max-width:400px;
  opacity:0.5;
  }

青三角に青文字乗せ

野菜の汚れが不安…

※横スクロールできます。

HTML
<center>
<div class="text_on_img">
<img src="画像URL" />
<p>ここにテキスト</p>
</div>
</center>
CSS
.text_on_img {
  position: relative;
  }

.text_on_img p {
  width: 90%;
  position: absolute;
  font-weight: bold;
  font-family: serif;
  text-shadow: 3px 3px 5px #FFFFFF;
  font-size: 2em;
  color: #0040FF;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  margin: 0;
  padding: 0;
  }

.text_on_img img {
  width: 100%;
  max-width:400px;
  opacity:0.5;
  }

赤三角に赤文字乗せ

野菜の汚れが不安…

※横スクロールできます。

HTML
<center>
<div class="text_on_img">
<img src="画像URL" />
<p>ここにテキスト</p>
</div>
</center>
CSS
.text_on_img {
  position: relative;
  }

.text_on_img p {
  width: 90%;
  position: absolute;
  font-weight: bold;
  font-family: serif;
  text-shadow: 3px 3px 5px #FFFFFF;
  font-size: 2em;
  color: #FE2E2E;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  margin: 0;
  padding: 0;
  }

.text_on_img img {
  width: 100%;
  max-width:400px;
  opacity:0.5;
  }

黄色三角に黄色文字乗せ

野菜の汚れが不安…

※横スクロールできます。

HTML
<center>
<div class="text_on_img">
<img src="画像URL" />
<p>ここにテキスト</p>
</div>
</center>
CSS
.text_on_img {
  position: relative;
  }

.text_on_img p {
  width: 90%;
  position: absolute;
  font-weight: bold;
  font-family: serif;
  text-shadow: 3px 3px 5px #FFFFFF;
  font-size: 2em;
  color: #FFD700;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  margin: 0;
  padding: 0;
  }

.text_on_img img {
  width: 100%;
  max-width:400px;
  opacity:0.5;
  }

オレンジ三角にオレンジ文字乗せ

野菜の汚れが不安…

※横スクロールできます。

HTML
<center>
<div class="text_on_img">
<img src="画像URL" />
<p>ここにテキスト</p>
</div>
</center>
CSS
.text_on_img {
  position: relative;
  }

.text_on_img p {
  width: 90%;
  position: absolute;
  font-weight: bold;
  font-family: serif;
  text-shadow: 3px 3px 5px #FFFFFF;
  font-size: 2em;
  color: #FE9A2E;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  margin: 0;
  padding: 0;
  }

.text_on_img img {
  width: 100%;
  max-width:400px;
  opacity:0.5;
  }

水色三角に水色文字乗せ

野菜の汚れが不安…

※横スクロールできます。

HTML
<center>
<div class="text_on_img">
<img src="画像URL" />
<p>ここにテキスト</p>
</div>
</center>
CSS
.text_on_img {
  position: relative;
  }

.text_on_img p {
  width: 90%;
  position: absolute;
  font-weight: bold;
  font-family: serif;
  text-shadow: 3px 3px 5px #FFFFFF;
  font-size: 2em;
  color: #00BFFF;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  margin: 0;
  padding: 0;
  }

.text_on_img img {
  width: 100%;
  max-width:400px;
  opacity:0.5;
  }

ランキングとの組み合わせ

先にあげた記事『【コピペで使える】アフィエリイトサイトで使えるランキングボックスのデザイン9』と組み合わせればこんな感じでよく見るLP風のセクションが出来上がるので必要な場合は併せてご活用ください。

野菜の汚れが不安…

野菜シャワーyasai-shower.com

公式サイト

野菜の汚れがみるみる落ちる

すごーい

1億円お買い上げで送料無料

わーい

今なら99%値引き

やったね!

お買い求めはこちら野菜シャワー
公式サイトへ行く

- SHARE -