この記事で解決できるコト!
◯ HTMLとかCSSとかよくわからなくても、アフィリエイトリンクをボタン型にして貼り付けられるようになります!
ブログを書くならやっぱりアフィリエイトは貼りたい!
読者にもわかりやすくて見やすいのは、広告主が提供している「バナータイプ」
全然それでもいいんです。
初心者ですから。。
でも・・・!?
- 少しでもオシャレに見せたい!
- バリエーションを増やしたい!
- 記事に馴染むように設定したい!
そんな欲求に応える記事です!
目次
『ブロックエディター』の方がバリエーションは出せる!
『クラシックエディター』or『ブロックエディター』!!??
はい!よくわからん単語が出てきたと思ったあなた!
![](https://t-ozi.com/wp-content/uploads/2023/03/Rabbit_-PC-300x300.png)
意味はよくわからなくてもブログは書けますから!w
Classic Editor(クラシックエディター)
『Classic Editor(クラシックエディター)』は、WordPressチームがメンテナンスしている公式プラグインです。
「ブロックエディター」の前のタイプになっており、2022年でサポート体制が終了と言われておりましたが、2024年まではサポート体制が残るようです。
![](https://t-ozi.com/wp-content/uploads/2023/01/スクリーンショット-2023-01-25-22.12.14-300x221.png)
「ブロックエディター」が出ても、「クラシックエディター」に戻す利用者もいるくらいに、まだまだ使われているエディターです。
ブロックエディター(Gutenberg)
「クラシックエディター」の後に出てきた、新しいのエディターです。『ブロックエディター(Gutenberg:グーテンベルグ)』
どちらのエディターを使うかは、両方使ってみて自分が使いやすいと思う方でよいと思います。
ちなみにボクは、テーマは『Affinger6』&『Gutenberg 用ブロックプラグイン2』を利用しています。
「Gutenberg(ブロックエディター)でアフィリエイトリンクボタンの作成する」記事もあるので、こちらをご参考してください ↓↓↓
クラシックエディターで作るアフィリエイトリンク【ボタンにURLを付与する】
![クラシックエディタで作るアフィリエイトリンク](https://t-ozi.com/wp-content/uploads/2023/01/①-12.png)
上記が完成型です!(※ 色のセンスとかは気にしないでください。。。)
ポイント
- 超簡単だけど、2種類しか作れない
- ボタンの大きさや形には限度がある
- HTML・CSSの理解がなくても作成可能
既存のボタンを選択する
![クラシックエディタで作るアフィリエイトリンク](https://t-ozi.com/wp-content/uploads/2023/01/①-5-1.png)
- タブから『カスタムボタン』を選択
- 『ボタンA』を選択
※ ボタンBでも大丈夫! - 下のような画面になります。
![クラシックエディタで作るアフィリエイトリンク](https://t-ozi.com/wp-content/uploads/2023/01/①-6.png)
アフィリエイトリンクを貼る
![クラシックエディタで作るアフィリエイトリンク](https://t-ozi.com/wp-content/uploads/2023/01/①-7.png)
- ビジュアルになっていると思うので、『テキスト』をクリック!
- するとボタンだったものが、HTML化します。
- 「<a herf=・・・ 〜 ボタンA」の箇所にアフィリエイトリンクを貼り付けます。
※ アフィリエイトはバナータイプやテキストタイプなどありますが、必ず『テキストタイプ&自由テキスト』を選択すること!
![クラシックエディタで作るアフィリエイトリンク](https://t-ozi.com/wp-content/uploads/2023/01/①-8.png)
プレビューで確認する
![クラシックエディタで作るアフィリエイトリンク](https://t-ozi.com/wp-content/uploads/2023/01/①-9.png)
- 『テキストタイプ&自由テキスト』URLを貼り付けると、(自由テキスト)箇所があるので、好きな文字を入力します。
- 右上を『ビジュアル』に戻します。
- これでボタンは一旦完成!!👍
![クラシックエディタで作るアフィリエイトリンク](https://t-ozi.com/wp-content/uploads/2023/01/①-11.png)
ボタンA・Bの装飾をする
![クラシックエディタで作るアフィリエイトリンク、ボタンの装飾](https://t-ozi.com/wp-content/uploads/2023/01/①-12-1.png)
変更できるところ
・ 文字の色
・ ボタンの色(グラデーションカラー)
・ ボタンの角
装飾変更場所はこちら
![](https://t-ozi.com/wp-content/uploads/2023/01/①-13.png)
- ダッシュボードに戻る
- 左下『ランキング管理』をクリック
- ランキング管理画面から『CSS』をクリック
リンクボタン
![クラシックエディタで作るアフィリエイトリンク、ボタンの装飾](https://t-ozi.com/wp-content/uploads/2023/01/①-14.png)
↑↑↑この画面で装飾を変える!
※ 他のウィンドウでプレビュー画面を開きながら、変更をすると出来上がりを逐一確認できます!
これで完成!!
(※ プレビュー画面からボタンクリックして、アフィリエイト先に遷移するか確認しましょう!)
![クラシックエディタで作るアフィリエイトリンク、ボタンの装飾](https://t-ozi.com/wp-content/uploads/2023/01/①-12-2.png)
これが一番簡単!ボタン型のアフィリエイトリンクを作成する方法! 〜まとめ〜
自分なりのこだわりを出すためにも、アフィリエイトリンクも自分好みにするのは大事ですよね!
これだけでもブログ初心者としてはかなりの進歩したと自負できます!
もう少しのこだわりを出すなら『ブロックエディター』で作成するのがオススメ!!
「ブロックエディター」もHTMLとかCSSの知識なくても使うことができます!
ボクらまだまだビギナーですから・・・