無料会員制サイト

初心者でも簡単コピペ!CSS3で作る見出しデザイン!

見出し

アフィリエイトをするならデザインよりも文章力が大事だと言われることが多いですが、はたして本当なのでしょうか?

私の意見は「NO」です。

やはり読者に読まれやすいデザインは存在します。

ただ、アフィリエイターを文章で商品の価値を紹介するのが仕事ですから、デザインだけに時間を取られるのもナンセンスです。

そんな時に強い味方になってくれるのが検索。

様々な素敵なデザインの見出しやボタンやボックスを、コピペして貼り付けるだけでリッチなデザインと手に入れることができます。

今回は、他のアフィリエイターと少しだけ差をつけるための、CSS3を使った見出しのデザインを紹介します。

今回はアフィリエイト初心者向けに解説するので、タイトルタグ「H1、H2、H3」タグなどは使わないようにします。

理由は、導入しているテーマと干渉して上手く表示できなかったりする場合があるからです。

タイトルタグ「H1、H2、H3」のデザインを変更しようと思うと、もう少しHTML5やCSS3の知識が必要になってきます。

純粋なタイトルタグと言うよりは、読者の目を止めるためのアクセントだと思ってください。

それでは、簡単コピペで再現できる見出しデザインを紹介していきます。

読者の視線を釘付けにするワンポイント文字

サブタイトル:POINT

ワンポイント・アドバイス見出しデザイン

ソースを見ていただくと分かると思いますが、CSSの9行目で文字を変えることができます。


<p class="point-mark">ワンポイント・アドバイス見出しデザイン</p>
p.point-mark{
  position:relative;
  margin: 16px auto;
  padding:16px;
  font-size:20px;
  font-weight: bold;
  color: #325A8C;
  border:1px solid #325A8C;
  }
p.point-mark::after{
  content: "POINT";
  position: absolute;
  top: -12px;
  left: 12px;
  background: #fff;
  font-size: 16px;
  color: #325A8C;
  padding: 0 10px;
}

サブタイトル:COTION

読者に注意をアピール促す見出しデザイン

6行目の文字色と9行目の文字を変更、さらに15行目で文字色を変えてみました。


<p class="point-mark2">読者に注意をアピール促す見出しデザイン</p>
p.point-mark2{
  position:relative;
  margin: 16px auto;
  padding:16px;
  font-size:20px;
  font-weight: bold;
  color: #dc143c;
  border:1px solid #dc143c;
  }
p.point-mark2::after{
  content: "COTION";
  position: absolute;
  top: -12px;
  left: 12px;
  background: #fff;
  font-size: 16px;
  color: #dc143c;
  padding: 0 10px;
}  

サブタイトル:SAFETY

6行目の文字色と9行目の文字を変更、さらに15行目で文字色を緑系に変えてみました。


<p class="point-mark3">読者に安全性をアピールする見出しデザイン</p>
p.point-mark3{
  position:relative;
  margin: 16px auto;
  padding:16px;
  font-size:20px;
  font-weight: bold;
  color: #dc143c;
  border:1px solid #9acd32;
  }
p.point-mark3::after{
  content: "SAFETY";
  position: absolute;
  top: -12px;
  left: 12px;
  background: #fff;
  font-size: 16px;
  color: #9acd32;
  padding: 0 10px;
}  

タブにサブタイトルをつける見出しデザイン

サブタイトルをもっと目立たせたい場合に使用すると効果的です。

遊び心もあって、他のサイトと差別化できるかもしれません。

タブのアイコンにはFont Awesomeを使用しています。
Font AwesomeについてはWebフォントアイコンでページの表示速度を高速化させる方法 を参考にしてください。

タブ・サブタイトル:CHECK

タブにCHECKを入れた見出しデザイン


<p class="tab_sub_title">タブにCHECKを入れた見出しデザイン</p>
p.tab_sub_title{
position: relative;
font-size: 20px;
font-weight: bold;
color: #2196F3;
background: #f0f8ff;
line-height: 2.0;
padding: 10px;
margin: 30px auto 12px;
border-top: 2px solid #2196F3;
border-bottom: 2px solid #2196F3;
} 

p.tab_sub_title:after{/*タブ*/
position: absolute;
font-family: FontAwesome,'Quicksand','Avenir','Arial',sans-serif;
content: '\f00c Check';
background: #2196F3;
color: #fff;
left: 0px;
bottom: 100%;
border-radius: 5px 5px 0 0;
padding: 3px 7px 1px;
font-size: 14px;
line-height: 1.5;
letter-spacing: 0.05em
}

タブ・サブタイトル:POINT

タブにPOINTを入れた見出しデザイン


<p class="tab_sub_title2">タブにPOINTを入れた見出しデザイン</p>
p.tab_sub_title2{
position: relative;
font-size: 20px;
font-weight: bold;
color: #006400;
background: #ccffe6;
line-height: 2.0;
padding: 10px;
margin: 30px auto 12px;
border-top: 2px solid #006400;
border-bottom: 2px solid #006400;
} 

p.tab_sub_title2:after{/*タブ*/
position: absolute;
font-family: FontAwesome,'Quicksand','Avenir','Arial',sans-serif;
content: '\f0a7\ POINT';
background: #006400; 
color: #fff;
left: 0px;
bottom: 100%;
border-radius: 5px 5px 0 0;
padding: 3px 7px 1px;
font-size: 14px;
line-height: 1.5;
letter-spacing: 0.05em
}

タブ・サブタイトル:COTION

タブにCOTIONを入れた見出しデザイン


<p class="tab_sub_title3">タブにCOTIONを入れた見出しデザイン</p>
p.tab_sub_title3{
position: relative;
font-size: 20px;
font-weight: bold;
color: #8b0000;
background: #fffaf0; 
line-height: 2.0;
padding: 10px;
margin: 30px auto 12px;
border-top: 2px solid #8b0000;
border-bottom: 2px solid #8b0000;
} 

p.tab_sub_title3:after{/*タブ*/
position: absolute;
font-family: FontAwesome,'Quicksand','Avenir','Arial',sans-serif;
content: '\f05e\ COTION';
background: #8b0000; 
color: #fff;
left: 0px;
bottom: 100%;
border-radius: 5px 5px 0 0;
padding: 3px 7px 1px;
font-size: 14px;
line-height: 1.5;
letter-spacing: 0.05em
}

グラデーションと吹き出しの見出しデザイン

次はグラデーションの見出しデザインと吹き出し付きの見出しデザインを紹介します。

グラデーションの見出しデザインは、一つ覚えると色々とアレンジができますので、遊び感覚で試してみてください。

吹き出しの見出しデザインについては、少々混乱するかもしれませんが、今回は上向きと下向きの吹き出しデザインを紹介します。

読者の目を引きつけるグラデーション見出しデザイン

左から右へグラデーション

左から右へグラデーション見出し


<p class="gradient1">左から右へグラデーション見出し</p>
p.gradient1{
max-width: 100%;
margin: 16px auto;
padding: 10px;
font-size: 20px;
font-weight: bold;
color: #FFFFFF;
text-shadow: 1px 1px 3px #00008b; 
background: rgb(0,158,195); /* Old browsers */
background: -moz-linear-gradient(left, rgba(0,158,195,1) 2%, rgba(132,210,232,1) 56%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, rgba(0,158,195,1) 2%,rgba(132,210,232,1) 56%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, rgba(0,158,195,1) 2%,rgba(132,210,232,1) 56%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#009ec3', endColorstr='#84d2e8',GradientType=1 ); /* IE6-9 */
border: solid 2px #87ceeb;
}

左上から右下へグラデーション

左上から右下へのグラデーション見出し


左上から右下へのグラデーション見出し

[/html]
p.gradient2{
max-width: 100%;
margin: 16px auto;
padding: 10px;
font-size: 20px;
font-weight: bold;
color: #FFFFFF;
text-shadow: 1px 1px 3px #b22222; 
background: rgb(109,0,25);
background: -moz-linear-gradient(-45deg, rgba(109,0,25,1) 0%, rgba(229,4,79,1) 78%);
background: -webkit-linear-gradient(-45deg, rgba(109,0,25,1) 0%,rgba(229,4,79,1) 78%);
background: linear-gradient(135deg, rgba(109,0,25,1) 0%,rgba(229,4,79,1) 78%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6d0019', endColorstr='#e5044f',GradientType=1 );
border: solid 2px #ffa07a;
}

右から左へグラデーション

右から左へのグラデーション見出し


<p class="gradient3">右から左へのグラデーション見出し</p>
p.gradient3{
max-width: 100%;
margin: 16px auto;
padding: 10px;
font-size: 20px;
font-weight: bold;
color: #ff4500;
text-shadow: 1px 1px 3px #FFFFFF; 
background: rgb(246,230,180);
background: -moz-linear-gradient(left, rgba(246,230,180,1) 0%, rgba(237,144,23,1) 100%);
background: -webkit-linear-gradient(left, rgba(246,230,180,1) 0%,rgba(237,144,23,1) 100%);
background: linear-gradient(to right, rgba(246,230,180,1) 0%,rgba(237,144,23,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6e6b4', endColorstr='#ed9017',GradientType=1 );
}

アクセントをつけるてための吹き出し見出しデザイン

ここからは吹き出し見出しデザインを紹介していきます・

吹き出し見出しデザイン

吹き出し付き見出し下向き①


<p class="arrow_box1">吹き出し付き見出し下向き①</p>
p.arrow_box1 {
  width: 100%;
  margin: 12px auto 26px; 
  padding: 12px;
  font-size: 20px;
  font-weight: bold;
  color: #f0e68c;
 position: relative;
 background: #88b7d5;
 border: 4px solid #c2e1f5;
}
p.arrow_box1:after, p.arrow_box1:before {
	top: 100%;
	left: 10%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

p.arrow_box1:after {
	border-color: rgba(136, 183, 213, 0);
	border-top-color: #88b7d5;
	border-width: 20px;
	margin-left: -20px;
}
p.arrow_box1:before {
	border-color: rgba(194, 225, 245, 0);
	border-top-color: #c2e1f5;
	border-width: 26px;
	margin-left: -26px;
}

吹き出し付き見出し下向き②


<p class="arrow_box2">吹き出し付き見出し下向き②</p>
p.arrow_box2 { 
  width: 100%;
  margin: 12px auto 26px; 
  padding: 12px;
  font-size: 20px;
  font-weight: bold;
  color: #FFFFFF;
	position: relative;
	background: #d502a4;
	border: 4px solid #f5cece;
}
p.arrow_box2:after, p.arrow_box2:before {
	top: 100%;
	left: 10%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

p.arrow_box2:after {
	border-color: rgba(213, 2, 164, 0);
	border-top-color: #d502a4;
	border-width: 20px;
	margin-left: -20px;
}
p.arrow_box2:before {
	border-color: rgba(245, 206, 206, 0);
	border-top-color: #f5cece;
	border-width: 26px;
	margin-left: -26px;
}

吹き出し付き上向き見出し


<p class="arrow_box3">吹き出し付き上向き見出し</p>
p.arrow_box3 {
  width: 100%;
  margin: 12px auto 26px; 
  padding: 12px;
  font-size: 20px;
  font-weight: bold;
  color: #FFFFFF;
	position: relative;
	background: #2fd550;
	border: 4px solid #e5f50c;
}
p.arrow_box3:after, p.arrow_box3:before { 
	bottom: 100%;
	left: 10%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

p.arrow_box3:after {
	border-color: rgba(47, 213, 80, 0);
	border-bottom-color: #2fd550;
	border-width: 20px;
	margin-left: -20px;
}
p.arrow_box3:before {
	border-color: rgba(229, 245, 12, 0);
	border-bottom-color: #e5f50c;
	border-width: 26px;
	margin-left: -26px;
}

アフィリエイトには読者を退屈させないデザインも必要

デザイン
何事もやり過ぎるのはよくありませんが、やるべき事をやらないのはアフィリエイターとしては手抜きと言われても仕方ありません。

今回紹介した見出しデザインは、色を変えたり文字サイズを変えたり、あるいは線の太さを変えたりすることでオリジナルのデザインにカスタマイズすることもできます。

失敗を恐れて何もしないよりは、失敗することで学ぶことの方が多いとはず。

是非、トライ&エラーを繰り返しながら少しずつでもHTMLやCSSの勉強をしてみましょう。

アフィリエイトで成功するためには、必要不可欠なスキルでもありますから!

経験ゼロだった普通の人が1年で年収1,000万円?!

ゼロから始めて1年間で100万PV達成。秘密の集客術を無料公開

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください