WordPressでテキストリンクをボタン化させる方法

内藤です。

記事中のリンクをボタンのように表示させたいなんてことはないでしょうか?

例えば、こんな感じ ↓

内藤勲メルマガの登録はこちら

画像を使わずに、ボタン化する方法です。
全部のリンクをボタン化したいわけじゃないけど、特定のリンクはボタンのようにしたい!なんてこともあると思います。

ちょうど質問頂いたので、やり方を紹介しますね

リンクをボタン化する方法

1.CSSでリンクをボタン化

まず、特定のリンクの見栄えを変えてボタン化する準備をします。

外観 → カスタマイズ から

「追加CSS」を開きます

ここに以下を入れます

a.button{
   display:block;
   padding:20px;
   margin:0 auto;
   color:#337ab7;/* 文字色 */
   text-align:center;
   font-size:20px;
   font-weight: bold;
   border-radius: 0px;   
   text-decoration: none;
   width: 100%;
   border: 3px solid #337ab7;/*枠*/
}
/* マウスオーバー時 */
a.button:hover{
   color:#ffffff!important;
   background: #337ab7;/* 反転背景色 */
}

貼り付けたら、「公開」をクリックして保存します。

2.リンクの設定

次に、記事の編集画面でリンクを作ります。この時エディタを「テキスト」にしておきます。

ボタン化したい文字を選択して「link」ボタンを押します

そして、リンク先のURLを設定します。外部サイトにリンクさせる時には、「リンクを新しいタブで開く」にチェックを入れておきましょう。

リンクを追加すると、こんな感じになります

これを、以下のように、リンクの開始タグのところに「class="button"」 を入れます。

<a href="https://1lejend.com/stepmail/kd.php?no=HSyJqOtcEv" rel="noopener" target="_blank" class="button">内藤勲メルマガの登録はこちら</a>

これでこのリンクの箇所を特定し、このリンクの部分だけ見栄えを変えられるようになります。

一度設定すれば、 あとは2の操作だけすれば、このようなボタンを簡単につくれます。

内藤勲メルマガの登録はこちら

文字色や枠の色を変えたい場合

ボタンの文字色や枠の色を変えたい場合は、1で追加したCSSを編集します。
もう一度載せておきますね

a.button{
   display:block;
   padding:20px;
   margin:0 auto;
   color:#337ab7;/* 文字色 */
   text-align:center;
   font-size:20px;
   font-weight: bold;
   border-radius: 0px;   
   text-decoration: none;
   width: 100%;
   border: 3px solid #337ab7;/*枠*/
}
/* マウスオーバー時 */
a.button:hover{
   color:#ffffff!important;
   background: #337ab7;/* 反転背景色 */
}

・文字色を変えたい場合は

a.button{
   display:block;
   padding:20px;
   margin:0 auto;
   color:#337ab7;/* 文字色 */
   text-align:center;
   font-size:20px;
   font-weight: bold;
   border-radius: 0px;   
   text-decoration: none;
   width: 100%;
   border: 3px solid #337ab7;/*枠*/
}

このカラーコードを変えます。
※カラーコードは検索するとこのようなサイトが沢山出てきますので、好みに合わせて変えてください。

・枠の色を変えたい場合

a.button{
   display:block;
   padding:20px;
   margin:0 auto;
   color:#337ab7;/* 文字色 */
   text-align:center;
   font-size:20px;
   font-weight: bold;
   border-radius: 0px;   
   text-decoration: none;
   width: 100%;
   border: 3px solid #337ab7;/*枠*/
}

この部分のカラーコードを変えると枠の色が変わります。

3pxは線の太さ、solidは実線を意味します。

・マウスオーバーした時の文字色を変えたい場合

/* マウスオーバー時 */
a.button:hover{
   color:#ffffff!important;
   background: #337ab7;/* 反転背景色 */
}

この部分のカラーコードを変えると、マウスオーバーした時の文字の色が変わります。

マウスオーバー時の背景を変える場合は

/* マウスオーバー時 */
a.button:hover{
   color:#ffffff!important;
   background: #337ab7;/* 反転背景色 */
}

この部分のカラーコードを変えると、マウスオーバーした時の中の背景色が変わります。

試してみてくださいね

個人ビジネスのためのWEB集客の教科書

個人でビジネスをしている方向けに、SNS、ブログ、メルマガを組み合わせたWeb集客法をまとめています。

・売り込まずに喜んで買ってもらえる仕組み作り
・資産型ブログの作り方
・「あなたから欲しい」と言ってもらえるファンの作り方

など、101ページ(PDF)にわたって解説しています。