キランと光るリンクボタンをCSSで作る方法【SANGO】でも使えます

キランと光るリンクボタンをCSSで作る方法【SANGO】でも使えます

  • キランと光るアフィンガー風のリンクボタンをSANGOに使いたい!

こんな悩みを解消します。

結論、この記事のHTMLの書き方をマネてCSSをコピペすれば即導入可能

この記事では、キランと光るアフィンガー風のリンクボタンのCSSを、わずか3ステップで導入する方法を解説しています。

5分もあれば導入できるのでリンクボタンのクリック率を上げ、収益アップにつなげましょう。

記事の内容はこちら

なお、この記事に書いたリンクボタンに変更した結果、導入1週間でコンバージョン率が7%となりました。

○○を無料体験する 

↑のようなリンクボタンのCSS導入方法を3ステップで解説しています。

手順は以下の通りです。

STEP.1
CSSのコピペ先を確認

まずは、WordPressのCSSのコピペ先を確認しましょう

この手順を確認する >>

STEP.2
HTMLをコピペ

記事投稿画面のエディターにコピペしましょう

この手順を確認する >>

STEP.3
CSSをコピペ

STEP1で紹介した「追加CSS」にコピペしましょう

この手順を確認する >>

それでは順に説明していきます。

変更方法は上の動画を見れば簡単にできます。

WordPressの「ダッシュボード → 外観 → カスタマイズ → 追加CSS」にコピペしていきましょう。

MEMO

今回紹介した方法は「POLIPU for SANGO」というSANGO小テーマへの追加方法になります。

他テーマをご使用の方は、「ダッシュボード → 外観 → テーマエディター」をクリックし、「スタイルシート(style.css)」というファイルにコピペしてみてください。

記事の投稿画面からボタンリンクを入れたいところに下記のHTMLをコピーしていきましょう。

コピペ場所は以下を参照ください。

  • クラシックエディタの方 → テキストエディタに切り替えてコピペ
  • グーテンベルクの方 → カスタムHTMLブロックにコピペ

URLは飛ばしたいアフィリエイトのリンク先などに変更ください。

また、〇〇を無料体験するはお好きな文字に変えてお使いください。

<p class="affi-box-botton">
<a href="URL">○○を無料体験する <i class="fas fa-chevron-circle-right"></i></a>
</p>

ボタン1クリックでコピーできます

Copy

STEP1で確認した「追加CSS」に下記のコードをコピペしていきましょう。

8行目の3pxがボタンリンク下の影の幅、#2e8b57が色の指定なので、適宜調整ください。

影の色はリンクボタンと同系色の暗い色がおすすめです。

.affi-box-button {
	background-color: #06d106;
	margin: -10px auto 16px auto;
	padding: 5px 0;
	width: 95%; /*ボタンリンクの横幅*/
	text-align: center;
	border-radius: 5px; /*ボタンの角のまるみ*/
	border-bottom: solid 3px #2e8b57; /*ボタン下の影の設定*/
	position: relative;
	overflow: hidden;
}
.affi-box-button:hover {
	opacity: 0.8;
}
.affi-box-button::before {
	content: '';
    position: absolute;
    top: -10px;
    left: -20%;
    width: 40px;
    height: 100%;
    transform: scale(2) rotate(20deg);
    background-image: linear-gradient(100deg, rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, .8) 100%, rgba(255, 255, 255, 0) 0%);
    /* アニメーション */
    animation: shiny 5s ease-in-out infinite; /*「5s」というのが変化のスピードです。適宜調整ください*/
}
@keyframes shiny {
    0% { left: -20%; }
    10% { left: 120%; }
    100% { left: 120%; }
}
.affi-box-button a{
	color: #fff;
	text-decoration: none!important;
}
@media only screen and (max-width: 415px) {
  .affi-box ul {
		width: 90%;
		text-align: left;
 }
}

Copy
リンクボタンのクリック率を上げる工夫

リンクボタンのクリック率を上げる工夫として、「マイクロコピー」を付け加えることがあります。

マイクロコピーとは、簡単にいうと読者に次の行動を起こさせるようなリンクボタン周りのキャッチフレーズのことです。

例えば

  • 全額返金保証付き
  • 今なら15%OFFで買えます
  • 期限内で解約すれば一切お金はかかりません

といった感じ。

\登録数No.1/

  • 豊富なラインナップ
  • 4人同時視聴可能

○○を無料体験する 

※3か月以内に解約すれば料金は一切かかりません

上のようなマイクロコピー付きのリンクボタンのHTML・CSSも以下に紹介しますので、必要なものだけを選んでお使いください。

HTML

<div class="affi-box">
<p class="affi-box-title">\登録数No.1/</p>
<ul><li>豊富なラインナップ</li><li>4人同時視聴可能</li></ul>
<p class="affi-box-button"><a href="URL">○○を無料体験する <i class="fas fa-chevron-circle-right"></i></a></p>
<p class="affi-box-text">※3か月以内に解約すれば料金は一切かかりません</p></div>
Copy

CSS

.affi-box {
	background-color: aliceblue;
	box-sizing: border-box;
	border-radius: 5px;
	padding: 5px 15px;
	text-align: center;
}
.affi-box .affi-box-title {
	font-weight: bold;
	margin-bottom: 0;
	padding-top: 8px;
}
.affi-box ul {
	display: inline-block;
	text-align: center;
	width: 60%;
	margin: .2em auto!important;
	padding: 0;
	border: none;
}
.affi-box ul li{
	font-weight: 500;
    list-style: none;
    font-size: .9em;
    position: relative;
	padding-left: 1.5em!important;
}
.affi-box ul li:before{
    font-family: "Font Awesome 5 Free";
    content: "\f00c" !important;
    font-weight:600;
    color:#1d89b5;
    position:absolute;
    left: 0!important;
    top: 0 !important;
    width: 0 !important;
    height: 0 !important;
}
.affi-box-button {
	background-color: #06d106;
	margin: -10px auto 16px auto;
	padding: 5px 0;
	width: 95%;
	text-align: center;
	border-radius: 5px;
	border-bottom: solid 3px #2e8b57;
	position: relative;
	overflow: hidden;
}
.affi-box-button:hover {
	opacity: 0.8;
}
.affi-box-button::before {
	content: '';
    position: absolute;
    top: -10px;
    left: -20%;
    width: 40px;
    height: 100%;
    transform: scale(2) rotate(20deg);
    background-image: linear-gradient(100deg, rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, .8) 100%, rgba(255, 255, 255, 0) 0%);
    /* アニメーション */
    animation: shiny 5s ease-in-out infinite;
}
@keyframes shiny {
    0% { left: -20%; }
    10% { left: 120%; }
    100% { left: 120%; }
}
.affi-box-button a{
	color: #fff;
	text-decoration: none!important;
}
.affi-box .affi-box-text {
	font-size: 80%;
	margin-top: -10px; 
	margin-bottom: 5px;
}
@media only screen and (max-width: 415px) {
  .affi-box ul {
		width: 90%;
		text-align: left;
 }
}

Copy
リンクボタンのCSSを変えずに使いまわす方法

  • 記事ごとにリンクボタンのCSSを変えなきゃいけないの?

いいえ、CSSを変えずにリンクボタンの色だけを変える簡単な方法があります。

HTMLを

<p class="affi-box-button" style="background-color: #ff2f56; border-bottom: solid 3px #a22041;"><a href="#">○○を無料体験する <i class="fas fa-chevron-circle-right"></i></a></p>

ボタン1クリックでコピーできます

Copy

とするだけで、以下のようなボタンリンクになります。この時CSSはまったくいじっていません

○○を無料体験する 

方法としては、class=”affi-box-button”のあとに半角スペースを空けてstyle=”background-color: #ff2f56; border-bottom: solid 3px #a22041;”を追加しただけです。
#ff2f56がボタンの色、3pxがボタン下の影の幅、#a22041がボタン下の影の色なので、適宜調整してください。

キランと光るリンクボタンのCSS:まとめ

キランと光るリンクボタンのCSSの設定方法まとめ

以上、アフィンガー風のキランと光るリンクボタンをCSSで作る方法でした。

私自身、紹介したリンクボタンを導入したことで、コンバージョン率のUPを実感しました。

1クリックでコピーできるので、速攻で導入し、ぜひ収益UPにつなげてください。

見逃した部分がありましたらこちらから

コメントを残す

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