はじめWordPress Gutenbergでボタンリンクってどうやって使うの？
ボタンブロックの使い方が知りたい。
本記事は上記のような悩みを持っている方に向けて記事を書いています。
こんにちは！ツヨシ（@24shi_web）です。
2017年1月よりブログを始め、現在は専業ブロガーとして活動しています。
WordPress Gutenbergのボタンブロックの使い方がどうしてもわからないと悩んでいましたか？
この記事を読めば、WordPress Gutenbergのボタンブロックの使い方を理解することができますよ。
お洒落なサイトが誰でも作れる！
ブログを書くのが楽になるテーマ「SWELL」
- 誰でも簡単にオシャレなブログが作れます！
- WordPressの使いやすさがアップします！
- キャッシュ機能とページ高速遷移機能で初心者も簡単にWordPressの高速化が可能です！
- アフィリンクの一元管理機能が標準装備されてます！
＼一度使うと他のテーマには戻れません！／
※実際に私の当ブログは「SWELL」を使って運営しており、大満足のテーマです！
1.WordPress Gutenberg ボタンブロック（ボタンリンク）の使い方
さて、早速ですがWordPress Gutenbergのボタンブロック（ボタンリンク）の使い方の手順は以下の通りです。
- ボタンブロックの選択
- ボタン内のテキストとリンクを入力
- ボタンの書式設定
- nofollow・target=”_blank”の設定
具体的に一つずつ解説していきますね。
1-1.ボタンブロックを選択
まずは、ボタンブロックを選択します。
※↑ちなみに「/（スラッシュ）」+「ブロック名」で呼び出すことが可能です。
Gutenbergを使っていくなら、この入力方法をマスターすることで記事作成の効率化につながります。
1-2.ボタン内のテキストとリンクを入力
次にボタン内のテキストとリンクを入力していきます。
ちなみに、ボタンリンクをアフィリリンクにしたい場合は、リンクのみを入力していきます。
↓A8のアフィリリンクを具体例に出すとここの部分です。
https://px.a8.net/svt/ejp?a8mat=XXXXXX+XXXXXXX+XX+XXXXXXXあくまでもリンクのみを入力するという事です。
1-3.ボタンの書式設定
次にボタンリンクの書式設定を行います。WordPress Gutenbergではボタンの以下のデザインを変更することが可能です。
- ボタンデザインの変更
- テキスト&背景色の変更
①ボタンデザインの変更
WordPress Gutenbergでは、2つのボタンデザインを変更することが可能です。
- 塗りつぶし
- アウトライン
また、さらにボタンの丸みも変更することが可能です。
お好みのデザインに設定しましょう。
②テキスト・背景色の変更
次にボタン内のテキストと背景色を変更していきます。
あらかじめ5色程度表示されていますが、それ以外の色を使いたい場合、「カスタムカラー」を選択します。
ちなみに、WordPressでの色指定は基本「HTMLカラーコード」で指定してあげるのがおすすめです。
HTMLカラーコードは以下のサイトを見て決めるのがおすすめですよ。
1-4.nofollow・target=”_blank”の設定
最後にアフィリリンクであればnofollow、アフィリリンク以外の別サイトへのリンクで別タブで開きたいのであれば「target=”_blank”」 （新規タブで開く） を設定してあげればOKです。
ちなみに、アフィリリンクに「target=”_blank”」（新規タブで開く）を設定するのはやめておきましょう。
2019年9月頃よりほぼすべてのASPより「target=”_blank」は削除されております。
また、この問題について詳しく知りたい方は以下のA8.netの記事をご覧ください。
広告リンクコードの変更についてのお知らせと改変について（A8.net）
アフィリリンクには 「target=”_blank”」（新規タブで開く） を設定しないと覚えておけばOKです。
2.WordPress Gutenbergで「動くボタンリンク」の作り方
はじめWordPress Gutenbergのボタンリンクはちょっと地味で嫌だ。
このように考えている方も多いでしょう。
その場合、画像+HTML・CSSで「動くボタンリンク」を表示させることも可能です。
↓具体的にはこのようなボタンです。
実際に上記のボタンの作り方についてお話していきます。
※ちなみに、こちらの動くボタンはウェブスターマーケティング株式会社の記事を参考にしています。
2-1.素材をダウンロード（又は作成する）し、サーバー内にアップロード
まずは、ボタンリンクの素材をこちらのページからダウンロードしましょう。（または自身で作成する）
2-2.CSSコードを追記する
次に以下のCSSコードをスタイルシート（Style.css）に追記していきます。
追記する場所は「外観→テーマエディター→スタイルシート」又は、「外観→カスタマイズ→追加CSS」のどちらかでOKです。
/* btnAnime04 */
@-moz-keyframes plnpln1 {
0% { -moz-transform: skewX(9deg); }
10% { -moz-transform: skewX(-8deg); }
20% { -moz-transform: skewX(7deg); }
30% { -moz-transform: skewX(-6deg); }
40% { -moz-transform: skewX(5deg); }
50% { -moz-transform: skewX(-4deg); }
60% { -moz-transform: skewX(3deg); }
70% { -moz-transform: skewX(-2deg); }
80% { -moz-transform: skewX(1deg); }
90% { -moz-transform: skewX(0deg); }
100% { -moz-transform: skewX(0deg); }
}
@-o-keyframes plnpln1 {
0% { -o-transform: skewX(9deg); }
10% { -o-transform: skewX(-8deg); }
20% { -o-transform: skewX(7deg); }
30% { -o-transform: skewX(-6deg); }
40% { -o-transform: skewX(5deg); }
50% { -o-transform: skewX(-4deg); }
60% { -o-transform: skewX(3deg); }
70% { -o-transform: skewX(-2deg); }
80% { -o-transform: skewX(1deg); }
90% { -o-transform: skewX(0deg); }
100% { -o-transform: skewX(0deg); }
}
@-webkit-keyframes plnpln1 {
0% { -webkit-transform: skewX(9deg); }
10% { -webkit-transform: skewX(-8deg); }
20% { -webkit-transform: skewX(7deg); }
30% { -webkit-transform: skewX(-6deg); }
40% { -webkit-transform: skewX(5deg); }
50% { -webkit-transform: skewX(-4deg); }
60% { -webkit-transform: skewX(3deg); }
70% { -webkit-transform: skewX(-2deg); }
80% { -webkit-transform: skewX(1deg); }
90% { -webkit-transform: skewX(0deg); }
100% { -webkit-transform: skewX(0deg); }
}
@-moz-keyframes arrow1 {
0% { -moz-transform: translateX(0px); }
45% { -moz-transform: translateX(20px); }
50% { -moz-transform: translateX(25px); }
55% { -moz-transform: translateX(20px); }
95% { -moz-transform: translateX(0px); }
100% { -moz-transform: translateX(0px); }
}
@-o-keyframes arrow1 {
0% { -o-transform: translateX(0px); }
45% { -o-transform: translateX(20px); }
50% { -o-transform: translateX(25px); }
55% { -o-transform: translateX(20px); }
95% { -o-transform: translateX(0px); }
100% { -o-transform: translateX(0px); }
}
@-webkit-keyframes arrow1 {
0% { -webkit-transform: translateX(0px); }
45% { -webkit-transform: translateX(20px); }
50% { -webkit-transform: translateX(25px); }
55% { -webkit-transform: translateX(20px); }
95% { -webkit-transform: translateX(0px); }
100% { -webkit-transform: translateX(0px); }
}
.btnAnime04 {
position: relative;
display:block;
width:100%;
max-width:600px;
padding:10px;
padding-left:10%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin-left:auto;
margin-right:auto;
}
.btnAnime04-animate{
-webkit-animation-duration:2s;
-moz-animation-duration:2s;
-ms-animation-duration:2s;
-o-animation-duration:2s;
animation-duration:2s;
-webkit-animation-timing-function: ease-in;
-moz-animation-timing-function: ease-in;
-o-animation-timing-function: ease-in;
animation-timing-function: ease-in;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
animation-iteration-count: infinite;
margin-left:auto;
margin-right:auto;
z-index: 8;
-webkit-animation-name: plnpln1;
-moz-animation-name: plnpln1;
-o-animation-name: plnpln1;
animation-name: plnpln1;
width:100%;
}
.btnAnime04-arrow {
position: absolute;
top:25%;
left:-5px;
-webkit-animation-duration:1s;
-moz-animation-duration:1s;
-ms-animation-duration:1s;
-o-animation-duration:1s;
animation-duration:1s;
-webkit-animation-timing-function: ease-in;
-moz-animation-timing-function: ease-in;
-o-animation-timing-function: ease-in;
animation-timing-function: ease-in;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-name: arrow1;
-moz-animation-name: arrow1;
-o-animation-name: arrow1;
animation-name: arrow1;
z-index: 9;
width:20%;
max-width:100px;
}
.btnAnime04:hover img{
opacity:1;
}以上のコードを追記したら準備は完了です。
2-2.カスタムHTMLブロックにhtmlコードを入力
そして、記事編集画面に戻り、カスタムHTMLブロックを選択し、以下のhtmlコードを入力します。
<a class="btnAnime04" href="❶"><img class="btnAnime04-arrow" src="❷" alt="" /><img class="btnAnime04-animate" src="❸" alt="公式サイトはこちら" /></a> そして、❶～❸の箇所に自身で以下のURLを入力していきます。
- アフィリリンクのURL
- 矢印画像のURL
- ボタン画像のURL
以上で、動くボタンリンクの完成です。
また、他にも様々なデザインが紹介されているのでご自身で以下の記事を確認してみてください。
まとめ
今回は、WordPress Gutenbergのボタンブロック（ボタンリンク）の使い方についてお話してきました。
アフィリリンクをボタンリンクにしたいと思う方もいるかと思うので是非参考にしてみてください。
以上です。
【PR】現役ブロガーの実践ノウハウをこっそり教えちゃいます。
当サイトでは、私が月7桁稼ぐまでに至ったノウハウ・現在実践しているノウハウを「ツヨシウェブSHOP」で有料コンテンツとして販売しております。実際にブログで月7桁稼いだ実績を持っており、また現在もブログ収益で生活をしていますので情報の信頼性は高いと感じています。
しかし、有料コンテンツで提供している情報は「楽して稼ぐ！」というものにはなっておらず、これから私と同じようにブログ・発信者として生活していきたい方に向けて書いておりますので「継続的に作業できる方のみ」ご購入いただければ幸いです。
また、コンテンツには自信を持って提供させて頂いておりますので、もし購入後ご不満がございましたら「返金対応」させて頂きます。
月7桁をを達成したサイト設計方法です！
初心者のための「サイト設計方法」月7桁を実現するブログの作り方を解説。
- 見込み客→キーワード選定→サイト導線が重要。
- 「成約から近い見込み客」の考え方について解説。
- 狙うべきキーワードについて解説。
- サイト導線の考え方について解説。
＼月7桁を達成したサイト設計方法が学べます！／
- 初心者のための「サイト設計方法」月7桁を実現するブログの作り方を解説。
- 見込み客→キーワード選定→サイト導線が重要。
- 「成約から近い見込み客」の考え方について解説。
- 狙うべきキーワードについて解説。
- サイト導線の考え方について解説。
＼月7桁を達成したサイト設計方法が学べます！／
- 初心者のための「サイト設計方法」月7桁を実現するブログの作り方を解説。
- 案件を選ぶ際の7つのポイントが学べます。
- 購入されやすい商品の特徴。
- 案件選びで重要な見るべきポイント。
- 案件を取り組む際に確認すべき事項。
＼アフィリ案件を選ぶ秘訣が学べます！／
