この記事で解決したいコト
◯ ボタンタイプのアフィリエイトリンクを作りたい！！
※ 恥ずかしながら「エディター」をすべて「エディタ」としてしまっております。。。許してください…（ ; ; ）
アフィリエイトリンクは、バナータイプであれば『カスタムHTML』を使って誰でも簡単に設定することができる！
だけどブロガーとしてちょっとレベルUPした感じのあるボタン型のアフィリエイトリンクを設定したい！！
『結論』→ やってみたらめちゃくちゃ簡単に作成できます！
途中、HTMLなどの専門用語も出てきます。
HTMLって聞くと、プログラミングの知識が無いと理解できないのでは？？？
と構えてしまいそうですが、大丈夫！！！
そもそもHTMLとかCSSがわからない人でも簡単に作業をできるようにしてくれたのが、この「ブロックエディタ（Gutenberg）」なんです！
目次
「Affinger6」＆「Gutenberg 用ブロックプラグイン2」
今回の設定の話をしておきます。
ボクは昔はCocoonを使ってましたが、今は「Affinger6」を使ってブログを作成してます。
そして「Gutenberg用ブロックプラグイン2」でブロックエディタを使ったやり方になります。
少し前までクラシックエディタを使ったボタン型のアフィリエイトリンクも利用していたのですが、自分好みにカスタマイズできるので断然『ブロックエディタ』を利用するこのやり方がオススメです！
ボタン型アフィリエイトリンクを作成する具体的手順
写真と箇条書きスタイルでなるだけ分かりやすくまとめてみました。
わかりづらいところがあれば、ご指摘くださいませ・・・。。
2種類のブロックを表示する
- 左上の＋ボタンをクリック
- カスタムボタンをクリック
- カスタムHTMLをクリック
↓↓↓ この状態になります
ボタンの装飾を決める
- ボタンにポイントあてる
- 右上の歯車をクリック→投稿ではなく、ブロックをクリックします
↓↓↓ ブロック内を下に進むと「テキスト名」「ボタン色」「文字色」などの変更が可能です！
※ アフィリエイトリンクではなく、他の記事をリンク先にする場合はURLをこの画面で設定して完成！
HTMLにして貼り付ける
- ボタンの装飾が決まったら、そのまま左上の点をクリックします。
→ 『HTMLとして編集』をクリックすると、上画像のようにボタンが文字列に変わります。 - 文字列全てをコピーし、下側の『カスタムHTML』（HTMLを入力…）部分に貼り付けます。
↓↓↓ こうなります
アフィリエイトリンクを貼り付ける
今回は【もしもアフィリエイト】のURLをお借りします。
- 提携しているアフィリエイトを選んだら「テキストタイプ」のURLを表示する
- 「自由テキスト」にしましょう！ボタン内の文字を自由に変更できます！
- ソース部分のURLを全てコピーします！
- 編集画面に戻って・・・
- ＜a href・・・〜・・・a＞ の部分は削除して、同じ場所にアフィリエイトURLを貼り付ける！
- （自由テキスト）の部分は、好きな文字に変更しましょう！→「アフィリエイトリンクの貼り方」に変更してます。
完成！
完成したら「下書き保存」した上で、プレビュー確認しましょう！
プレビュー画面からボタンをクリックして、アフィリエイトリンク先に画面遷移すれば無事完成です！！
ブログ初心者がボタン型アフィリエイトリンクを貼るための5ステップ 〜まとめ〜
今までアリフィリエイトを貼る時は、全てバナータイプを利用してました。
ボク自身ボタンタイプを作成するのは、正直大変そうなイメージがあったため後回しにしていたのですが…
一度作ってみるとめちゃ簡単です！
今回の記事でよく理解いただけたと思うので、是非この使い方マスターしてみてください！
初心者でも簡単に利用できる「Affinger」と「ブロックエディタ（Gutenberg）」がスゴイのよ。。。
今後もブログ初心者が少しずつステップアップしていくためのハウツーを記事にしていきます！
