無料会員制サイト

アフィリエイト記事で大活躍!CSSで表現する文字装飾

文字装飾

アフィリエイトでやり過ぎると嫌われる物は何?

いきなりクイズ形式で入ってしまいましたが、答えは色々ありますが文字装飾。

文字装飾に関しては意見は真っ二つに
  1. 読者に読みやすい文章に装飾は必要がない
  2. 読者の目をひくためのワンポイントとして装飾は必要
全く真逆の意見ですよね。

私も装飾のやり過ぎには賛同できませんが、キャッチコピーなどワンポイントで積極的に使うのには賛成します。

そこで今回は、CSS3だけで簡単にできる文字装飾を紹介していきます。

グラデーション
最初に紹介したいのが文字をグラデーションで装飾する方法です。

あまりにも派手すぎるグラデーションは逆効果になりがちですが、シンプルなグラデーションなら文字をさり気なく目立たせる効果があります。

今までは文字をグラデーションで装飾するには、画像編集ソフトで加工するしかありませんでしたが、CSS3が登場したことで画像を使用しなくてもグラデーションの表現が可能になりました。

次からはCSS3でコピペで簡単にできるグラデーションの方法を紹介します。

グラデーションで表現するテキスト色々

よくロゴデザインなどに使用されるテキストのグラデーションを、画像ではなくCSSだけで表現してみましょう。

CSSでテキストにグラデーション1


<p class="Grade-Text1 FontSize34"><!-- ここに文字を入れてください --></p>
p.FontSize34 {
font-size:34px;
font-weight:bold;
}
@media(max-width: 800px) { 
  p.FontSize34 {
    font-size:24px;
  }
}
p.Grade-Text1{
background: #f56778;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.5, #f997b0), color-stop(0.5, #f56778));
-webkit-text-fill-color:transparent;
-webkit-background-clip:text;
}

CSSでテキストにグラデーション2


<p class="Grade-Text2 FontSize34"><!-- ここに文字を入れてください --></p>
p.FontSize34 {
font-size:34px;
font-weight:bold;
}
@media(max-width: 800px) { 
  p.FontSize34 {
    font-size:24px;
  }
}
p.Grade-Text2{
background: #abe4f8;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.5, #abe4f8), color-stop(0.5, #74d0f4));
-webkit-text-fill-color:transparent;
-webkit-background-clip:text;
}

CSSでテキストにグラデーション3


<p class="Grade-Text3 FontSize34"><!-- ここに文字を入れてください --></p>
p.FontSize34 {
font-size:34px;
font-weight:bold;
}
@media(max-width: 800px) { 
  p.FontSize34 {
    font-size:24px;
  }
}
p.Grade-Text3{
background: #cae285;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.5, #cae285), color-stop(0.5, #a3cd5a));
-webkit-text-fill-color:transparent;
-webkit-background-clip:text;
}

CSSでテキストにグラデーション4


<p class="Grade-Text4 FontSize34"><!-- ここに文字を入れてください --></p>
p.FontSize34 {
font-size:34px;
font-weight:bold;
}
@media(max-width: 800px) { 
  p.FontSize34 {
    font-size:24px;
  }
}
p.Grade-Text4{
background: #feda71;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.5, #feda71), color-stop(0.5, #febe4d));
-webkit-text-fill-color:transparent;
-webkit-background-clip:text;
}

CSSでテキストにグラデーション5


<p class="Grade-Text5 FontSize34"><!-- ここに文字を入れてください --></p>
p.FontSize34 {
font-size:34px;
font-weight:bold;
}
@media(max-width: 800px) { 
  p.FontSize34 {
    font-size:24px;
  }
}
p.Grade-Text5{
background: #656565;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.5, #656565), color-stop(0.5, #444));
-webkit-text-fill-color:transparent;
-webkit-background-clip:text;
}

ドロップシャドウで文字を際立てる方法

ドロップシャドウ
ドロップシャドウも画像加工ソフトではよく使われる手法です。

画像加工ソフトで文字にドロップシャドウをつけた方が綺麗だと思いますが、画像はあくまでも画像です。

CSSでドロップシャドウをつける意味は、画像と比べてSEO的にみて効果があるからです。

だからと言って最初からHTMLとCSSを勉強するのは大変です。

次に紹介するドロップシャドウのコードをコピペするだけで、同じように再現できますので気軽に活用してください。

CSSでテキストに影をつける方法

これもやり過ぎると文字が読みづらくなるので気をつけるようにしましょう。
基本的なテキストシャドウ
ハイライト11行目
黒の文字色に濃い色の影(#191970)をおとしています。
基本的な文字に影をおとす方法は、
■X軸(2px)+Y軸(2px)+ボカシの範囲(2px)
ハイライト14行目
黒の文字色に薄い色の影(#c0c0c0)をおとしています。
ハイライト17,18行目
薄い文字色(#B0C4DE)に濃い色の影(#191970)をおとしています。
CSSで文字を縁取りする
この辺は説明すると長くなるので簡単に。
■指定するのは文字色21行目「color: #FFF;」
■ハイライト23~26行目の影の色「#008b8b」

CSSで文字に影を付けてみました

上の例のように濃い色の文字に濃い影をおとすと見づらいですよね。

CSSで薄い影をおとしてみました

濃い色の文字に薄い影をおとすと読みやすくなります。

CSSで薄い文字色に濃い影をおとす

薄い色の文字に濃い色の影をおとすのも非常に効果的です

CSSで文字を縁取りしてみました

テキストシャドウを利用して文字の縁取りをしてみました。


<p class="Text-shadow-sample1 FontSize34"><!-- ここに文字を入力 --></p>
<p class="Text-shadow-sample2 FontSize34"><!-- ここに文字を入力 --></p>
<p class="Text-shadow-sample3 FontSize34"><!-- ここに文字を入力 --></p>
<p class="Text-shadow-sample4 FontSize34"><!-- ここに文字を入力 --></p>
p.FontSize34 {
font-size:34px;
font-weight:bold;
}
@media(max-width: 800px) { 
  p.FontSize34 {
    font-size:24px;
  }
}
p.Text-shadow-sample1{
text-shadow:2px 2px 2px #191970;
}
p.Text-shadow-sample2{
text-shadow:2px 2px 2px #c0c0c0;
}
p.Text-shadow-sample3{
color: #B0C4DE;
text-shadow:2px 2px 2px #191970;
}
p.Text-shadow-sample4{
color: #FFF;
font-weight: bold;
text-shadow: 2px 2px 1px #008b8b,
-2px 2px 1px #008b8b,
2px -2px 1px #008b8b,
-2px -2px 1px #008b8b;
}

テキストシャドウの発展系~背景を指定する方法

背景色を指定して、その上に文字を入れて影をおとす方法を紹介します。

見出しなどに使うと見栄えの良いデザインになります。

黒色の文字に白の影をおとしてみました。


<div class="Text-shadow-sample-box">
<p class="Text-shadow-sample5 FontSize34"><!-- ここに文字を入力 --></p>
</div>
p.FontSize34 {
font-size:34px;
font-weight:bold;
margin: 0 auto;
padding: 0;
}
@media(max-width: 800px) { 
  p.FontSize34 {
    font-size:24px;
  }
}
.Text-shadow-sample-box {
background-color: #b0c4de;
width: 100%;
padding: 10px;
}
p.Text-shadow-sample5 {
color: #333;
text-shadow: 0 1px 0 rgba(255, 255, 255, 1);
}

文字の白い影を少し透過してみました。


<div class="Text-shadow-sample-box">
<p class="Text-shadow-sample6 FontSize34"><!-- ここに文字を入力 --></p>
</div>
p.FontSize34 {
font-size:34px;
font-weight:bold;
margin: 0 auto;
padding: 0;
}
@media(max-width: 800px) { 
  p.FontSize34 {
    font-size:24px;
  }
}
.Text-shadow-sample-box {
background-color: #b0c4de;
width: 100%;
padding: 10px;
}
p.Text-shadow-sample6 {
color: #1670de;
text-shadow: -1px -1px 1px rgba(0, 0, 0, .7),1px 1px 1px rgba(255, 255, 255, .7);
}

影を透過させながらインパクトある文字を作ってみました。


<div class="Text-shadow-sample-box">
<p class="Text-shadow-sample7 FontSize34"><!-- ここに文字を入力 --></p>
</div>
p.FontSize34 {
font-size:34px;
font-weight:bold;
margin: 0 auto;
padding: 0;
}
@media(max-width: 800px) { 
  p.FontSize34 {
    font-size:24px;
  }
}
.Text-shadow-sample-box {
background-color: #b0c4de;
width: 100%;
padding: 10px;
}
p.Text-shadow-sample7 {
color: #fff;
text-shadow: 1px 1px 0 rgba(85, 85, 85, 1),
             2px 2px 0 rgba(85, 85, 85, .95),
             3px 3px 0 rgba(85, 85, 85, .9),
             4px 4px 0 rgba(85, 85, 85, .85),
             5px 5px 0 rgba(85, 85, 85, .8),
             6px 6px 0 rgba(85, 85, 85, .75),
             7px 7px 0 rgba(85, 85, 85, .7),
             8px 8px 0 rgba(85, 85, 85, .65),
             9px 9px 0 rgba(85, 85, 85, .6),
             10px 10px 0 rgba(85, 85, 85, .55),
             11px 11px 0 rgba(85, 85, 85, .5),
             12px 12px 0 rgba(85, 85, 85, .45),
             13px 13px 0 rgba(85, 85, 85, .4),
             14px 14px 0 rgba(85, 85, 85, .35),
             15px 15px 0 rgba(85, 85, 85, .3),
             16px 16px 0 rgba(85, 85, 85, .2),
             17px 17px 0 rgba(85, 85, 85, .15),
             18px 18px 0 rgba(85, 85, 85, .1);
}

影を逆方向にして立体的な文字を作ってみました。


<div class="Text-shadow-sample-box">
<p class="Text-shadow-sample8 FontSize34"><!-- ここに文字を入力 --></p>
</div>
p.FontSize34 {
font-size:34px;
font-weight:bold;
margin: 0 auto;
padding: 0;
}
@media(max-width: 800px) { 
  p.FontSize34 {
    font-size:24px;
  }
}
.Text-shadow-sample-box {
background-color: #b0c4de;
width: 100%;
padding: 10px;
}
p.Text-shadow-sample8 {
color: #333;
text-shadow: 0 1px 0 #888,
             -1px 0 0 #ccc,
             -1px 2px 0 #888,
             -2px 1px 0 #ccc,
             -2px 3px 0 #888,
             -3px 2px 0 #ccc,
             -3px 4px 0 #888,
             -4px 3px 0 #ccc,
             -4px 5px 0 #888,
             -5px 4px 0 #ccc,
             -5px 6px 0 #888,
             -6px 5px 0 #ccc,
             -6px 7px 0 #888;
}

影をボカシながら立体的な文字を作ってみました。


<div class="Text-shadow-sample-box">
<p class="Text-shadow-sample9 FontSize34"><!-- ここに文字を入力 --></p>
</div>
p.FontSize34 {
font-size:34px;
font-weight:bold;
margin: 0 auto;
padding: 0;
}
@media(max-width: 800px) { 
  p.FontSize34 {
    font-size:24px;
  }
}
.Text-shadow-sample-box {
background-color: #b0c4de;
width: 100%;
vertical-align: middle;
padding: 10px;
}
p.Text-shadow-sample9 {
color: #333;
text-shadow: 0 5px 10px rgba(0, 0, 0, .6),0 -2px 0 rgba(255, 255, 255, 1);
}

遊び心満点の文字アニメーションと装飾

文字アニメーション
文字にアニメーションって?
確かに疑問に思う方も多いでしょう。

ただ、毎日アフィリエイト記事を書いていると、たまには刺激が欲しくなります。

気分転換にスタバでや海辺で作業したり、確かに気分転換にはなりますが作業に追われている時はそうもいきません。

アニメーションは読者のためではなくて、あなたの気分転換のために使ってみてください。

また背景画像を上手に使った文字装飾も紹介したいと思います。

文字アニメーションで気分転換

それでは楽しい文字アニメーションなどを紹介します
①バックグラウンドで炎が

炎の革命児参上

ポイント1
CSSハイライト1行目、日本語「Google Fonts」を読み込んでいます
CSSハイライト2行目、日本語「Google Fonts」のクラスを指定しています。

文字サイズと画像サイズのバランスを考える必要があります。
今回は文字サイズが70px、画像サイズが640×480で作成しています。

ポイント2
元画像はこちらになります。
イラストACからダウンロードした画像です。

イラストACについてはアフィリエイト初心者なら絶対に知っておきたいイラストACの使い方を参考にしてください。

ポイント3
CSSハイライト9行目、背景画像のURLは相対パスか絶対パスを入力してください。

<div class="type-mask">
<h2><!-- 文字を入力 --></h2>
</div>
@import url("https://fonts.googleapis.com/earlyaccess/roundedmplus1c.css");
.wf-roundedmplus1c { 
       font-family: "Rounded Mplus 1c"; 
       font-weight: bold;
}
.type-mask h2{
  -webkit-animation: scrollmask 10s ease 1.5s infinite;
  -webkit-background-clip: text;
  background-image: url("image/sample.jpg");/*画像のURL*/
  color: transparent;
  font-size: 70px;
}
@-webkit-keyframes scrollmask {
  0% {background-position: 0 0;}
  100% {background-position: 100% 0;}
}
@media(max-width: 800px) { 
  .type-mask h2{
    font-size: 30px;
  }
}

②リンクのホバーアニメーション

<div class="link-background">
<a href="#" target="_blank"><!-- ここに文字を入力 --></a>
</div>
.link-background a {
  background-image: linear-gradient(to right, rgba(0,0,0,0) 50%, rgba(79,182,207,1) 50%);
  background-position: 0 0;
  background-size: 200% auto;
  transition: 0.5s;
}
.link-background a:hover {
  background-position: -100% 0;
  color: #fff;
}

③背景素材とボカシ「ピンク系」

背景素材で文字表現

日本語「Google Fonts」
CSSハイライト1行目で日本語「Google Fonts」を読み込んでいます。
CSSハイライト2行目で日本語「Google Fonts」クラス指定をしています。
文字サイズと文字色
CSSハイライト13行目で文字サイズを指定しています。
CSSハイライト14行目で文字色を指定しています。
ボカシの色
CSSハイライト16行目でボカシの色を指定しています。
文字色と同系色で、やや薄い色を指定してください。
背景画像URL
CSSハイライト19行目で背景画像のURLを指定しています。
絶対パスでも相対パス、どちらでも構いません。

元画像はこちらになります。
背景を透過して落書き風のPNG画像になります。


<div class="Back-texture">
<p class="wf-roundedmplus1c"><!-- ここに文字を入力 --></p>
</div>
@import url("https://fonts.googleapis.com/earlyaccess/roundedmplus1c.css");
.wf-roundedmplus1c { 
     font-family: "Rounded Mplus 1c"; 
     font-weight: bold;
}
.Back-texture{
	text-align: left;
	position: relative;
	padding: 0;
    margin: 0:
}
.Back-texture p{
	font-size: 60px;
	color: #eb65a4;
	position: relative;
	text-shadow: 0 0 14px #fdacd2, 0 0 9px #fdacd2, 0 0 6px #fdacd2, 0 0 3px #fdacd2;
}
.Back-texture p:before{
	background: url("image/cover.png") repeat 0 -20px;
	content: " ";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

④背景素材とボカシ「青系」

背景素材で文字表現


<div class="Back-texture2">
<p class="wf-roundedmplus1c"><!-- ここに文字を入力 --></p>
</div>
@import url("https://fonts.googleapis.com/earlyaccess/roundedmplus1c.css");
.wf-roundedmplus1c { 
     font-family: "Rounded Mplus 1c"; 
     font-weight: bold;
}
.Back-texture2{
	text-align: left;
	position: relative;
	padding: 0;
	margin: 0;
}
.Back-texture2 p{
	font-size: 60px;
	color: #4682b4;
	position: relative;
	text-shadow: 0 0 14px #b0c4de, 0 0 9px #b0c4de, 0 0 6px #b0c4de, 0 0 3px #b0c4de;
}
.Back-texture2 p:before{
	background: url("http://192.168.1.2/wordpress/wp-content/uploads/2018/03/cover.png") repeat 0 -20px;
	content: " ";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

紹介した文字装飾では、日本語「Google Fonts」を使用しています。

日本語「Google Fonts」についてはアフィリエイト記事作成「Google Fonts」の使い方で紹介していますので参考にしてください。

文字装飾は自己満足の世界なのかも

自己満足
最初でも書きましたが読者にとって読みやすい記事を書くことが、アフィリエイターにとっては一番重要なことです。

文字装飾はやり過ぎると逆効果になる場合もありますが、読者の目を引きつけるためには知っていて損はありません。

たとえ自己満足だと言われても、楽しく記事が書ければコンテンツの内容も充実してくるはずです。

最初からHTMLとCSSを勉強するよりも、コピペで簡単に文字装飾できるなら時短になりますよね。

色々なサイトで様々なHTMLやCSSが紹介されていますので、検索で調べてどんどん活用していきましょう。

ただし、やり過ぎだけは気をつけて!

今回はCSSで表現できる文字装飾について紹介しました。

次回の記事をお楽しみに!

あなたも正しい方法でメルマガ始めてみませんか?

前代未聞の超絶価格破壊。こんな価格で会員制サイトが作成できるなんて!

コメントを残す

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

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