ロゴ
【note:検索上位を狙うブログ理論】一騎当千SEO

【Manablog Copy(WordPressテーマ)】アフィリエイト用申し込みボタンの追加【グーテンベルグ再利用ブロックの活用】

外観デザイン設定

こんにちは、ごま吉(@Lv1gomakichi)です。

この記事では、アフィリエイトでよく使う「申し込みボタン」を設置する方法を紹介します。

マナブログコピー アフィリエイト用申し込みボタンの追加

実装すると、こんな感じになります▼

\チャンス!◯月◯日まで限定/

今なら特典◯◯◯◯が付いてくる
お支払いは◯◯◯でも可能!


こちらは、HTMLコードを再利用ブロックに追加して使い回す方法が楽です。

<p style="text-align:center; margin-bottom: 0px;color:#CBCFD7;font-size:140%;"><strong>\今がチャンス!◯月◯日まで限定/</strong></p>

<div class="btn-gradient-3d-orange"><a style="color:#FFFFFF;" href="#" style="border-radius:9px">◯◯◯キャンペーンに申込む <li class="fa fa-chevron-circle-right"></li></a></div>

<p style="text-align:center;font-size:100%;margin-top:10px;"><i class="fas fa-check"></i> 今なら特典◯◯◯◯が付いてくる<br><i class="fas fa-check"></i> お支払いは◯◯◯でも可能!</p>


上記のコードを再利用ブロックに追加します。

投稿画面のブロックでカスタムHTMLを選択します。


上記のコードをコピペします。


右上の点3つのメニューから、再利用ブロックに追加を選択


名前をつけて保存します。
ちなみに名前は/(スラッシュ)アルファベットを1文字先頭につけてやると次回以降、再利用ブロックを呼び出すのが爆速便利になります。

CSSの設定

CSSも追加しましょう。

カスタマイザー追加CSSを開いて下記のコードをコピペします。

.btn-gradient-3d-orange {
  display: inline-block;
  padding: 0.5em 1em;
  text-decoration: none;
  border-radius: 4px;
  color: #ffffff;
  background-image: linear-gradient(45deg, #FFC107 0%, #ff8b5f 100%);
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
  border-bottom: solid 3px #c58668;
	font-size:140%;

  width:auto;
	font-weight:bold;
 margin-left:10%;
}

.btn-gradient-3d-orange:active {
  -webkit-transform: translateY(4px);
  transform: translateY(4px);
  box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2);
  border-bottom: none;

}

再利用ブロックの使い方

呼び出すのは登録した再利用ブロックを使えば爆速です。

投稿画面の入力欄に/b(※登録した任意のアルファベット)と入れるとメニューがすぐに出てきます。


3つの点のメニューを選択します。


通常のブロックへ変換を選択します。
編集を押してそのまま編集して保存すると上書きされるので注意

呼び出して、通常ブロックに戻して再利用するイメージです。
お湯をかけたら元に戻る感じw


通常ブロックに戻ったら、コードを編集すればOKです。
赤ラインの部分を修正すればテキストが変更できます。
リンクURLも忘れずに設定しましょう。

画像提供:Rawpixel.com – jp.freepik.com によって作成された banner ベクトル



注目こちらも合わせてどうぞ▼
アフィリエイトを始めるための手順を紹介しています。マナブログコピーのカスタマイズが終わったら『ASP登録』をしましょう。

note


注目こちらも合わせてどうぞ▼
アフィリエイト初心者向けに【月3,000円を稼ぐ着実なSEO】をテーマにnote執筆しました。マナブログコピーと合わせて運用すると効果大です。

note

人気記事【マナブログコピー(WordPressテーマ)】文字装飾プラグインの設定