![](https://koaramarch.com/wp-content/uploads/2020/01/necchusyou_face_boy2.jpg)
こんな方の要望に応える記事を書きました。
本記事の内容
- アフィリエイト広告バナーリンクの貼り方
- バナーリンクを中央ぞろえにする方法
- 押しの一言コメントを追加する方法
![](https://koaramarch.com/wp-content/uploads/2020/03/コアラ1.jpg)
アフィリエイトリンクの貼り方3ステップ【Gutenberg対応】
![アフィリエイトリンクの貼り方3ステップ【Gutenberg対応】](https://koaramarch.com/wp-content/uploads/2020/05/aaron-burden-GFpxQ2ZyNc0-unsplash-1-e1589114583939.jpg)
アフィリエイトの貼り方は、以下の3ステップです。
※Gutenbergに対応しています。
- 広告リンクをコピーする
- ブロックタイプを「カスタムHTML編集」にする
- ペーストする(貼り付ける)
今回は、僕の愛用のテーマ「スワロー」の広告バナーリンクを貼ってみます。
スワローは現在、A8.netで広告提携ができます。
![](https://koaramarch.com/wp-content/uploads/2020/03/コアラ1.jpg)
登録しない手はないので、まだの方はついでに登録してしまいましょう。
それでは順に解説していきます。
ステップ1:広告リンクをコピーする
貼り付けたい広告主と無事提携できましたら、広告リンクの作成ができるようになっているはずです。
▼広告リンクの作成より、今回は広告バナーリンクを選択し、広告リンクを表示をクリックします。
![](https://koaramarch.com/wp-content/uploads/2020/05/広告リンク作成-1024x452.jpg)
広告がいくつか表示されます。
▼貼り付けたい広告が見つかったら、そこの広告リンクのコードを全コピーします。
![](https://koaramarch.com/wp-content/uploads/2020/05/コメント-2020-05-10-163620_censored.jpg)
「素材をコピーする」ボタンをクリックすれば、簡単に全コピーできます。
ステップ2:ブロックタイプを「カスタムHTML」にする
▼投稿作成画面に戻って、貼り付けたい箇所のブロックタイプを「カスタムHTML」に変更します。
※「/h」と入力後Enterを押せば、簡単に変更できます。
![ステップ2:ブロックタイプを「カスタムHTML」にする](https://koaramarch.com/wp-content/uploads/2020/05/コメント-2020-05-07-212121-1.jpg)
なのでこのひと手間が必要なんですね。
ステップ3:ペーストする(貼り付ける)
先ほどコピーしたコードをCtrl + Vで貼り付けます。
▼プレビュー画面を確認。
![](http://koaramarch.com/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif)
![](https://www19.a8.net/0.gif?a8mat=3BBJ96+6M5ER6+3PSE+631SX)
![](https://koaramarch.com/wp-content/uploads/2020/03/コアラ1.jpg)
でも、この広告リンクを中央ぞろえにしたくないですか?
そんなときは、少しだけ手を加えてあげましょう。
と言っても簡単です。
発展その1:アフィリエイトリンクを中央ぞろえにする
はじめに、カスタムHTML編集にして、以下のコードを貼り付けておいてください。
<div style="text-align: center;">
(ここに広告バナーコード)
</div>
あとは、先ほどの広告リンクのコピーを(ここに広告バナーコード)というところに貼り付ければOK。
![](https://koaramarch.com/wp-content/uploads/2020/03/コアラ1.jpg)
コードを簡単に解説。
![アフィリエイトリンクの貼り方|中央ぞろえ](https://koaramarch.com/wp-content/uploads/2020/05/中央ぞろえコード解説.jpg)
rightにすれば、右揃えと言った感じですね。
▼中央ぞろえにできました。
これでもいいんですが、さらにバナーリンクの上のほうに押しの一言コメントをつけたいときもありますよね。
![](https://koaramarch.com/wp-content/uploads/2020/03/コアラ1.jpg)
発展その2:押しの一言コメントを追加する
![](https://koaramarch.com/wp-content/uploads/2020/05/コメント-2020-05-10-161715.jpg)
普通に文を書くように入力して書いてもいいのですが、あなたのブログの行間の取り方によっては、上図のように少し余白が気になるかもしれません。
この行間を埋めるためのコードがこちら。
<div style="text-align: center;">
<p style="color: #F44336">\(押しの一言を入れる)/<br>
(ここに広告バナーコード)
</p>
</div>
コードを簡単に解説。
![アフィリエイトリンクの貼り方|押しの一言](https://koaramarch.com/wp-content/uploads/2020/05/押しの一言解説-1.jpg)
▼できましたね!
ちなみに、僕の愛用中のワードプレステーマ「スワロー」は、とにかく初期設定が楽で、書くことに集中したい初心者ブロガーにはちょうど良いですよ。
価格も9,900円(税込)と有料テーマの中でも比較的安いのも特徴ですね。
![](https://koaramarch.com/wp-content/uploads/2020/03/コアラ1.jpg)
押しの一言はどんな言葉いい?
参考までに、押しの一言はこんな感じがいいかもです。
- 期間限定・特別感(30日間無料お試し可能)
- 権威を伝える(~~が愛用の~~)
- 対象者を伝える(ブログ初心者のための~)
このあたり、興味あれば以下の本がおすすめです。
メンタリストDaiGoさんも影響を受けているくらい、心理学とマーケティングの要素が詰まっています。
アフィリエイトリンクの貼り方を3ステップで解説【Gutenberg対応】まとめ
![アフィリエイトリンクの貼り方を3ステップで解説【Gutenberg対応】まとめ](https://koaramarch.com/wp-content/uploads/2020/04/david-travis-5bYxXawHOQg-unsplash-1.jpg)
アフィリエイトリンクは無事貼れましたか?
中央ぞろえにしたり、一言コメントの追加も簡単なコードで実現できますので、ぜひチャレンジしてみてください。
![](https://koaramarch.com/wp-content/uploads/2020/03/コアラ1.jpg)
・だけど、アフィリエイトの広告バナーリンクの貼り方がいまいち分からないです。
・エディタはGutenbergを使用中です。