WordPressでテキストリンクをボタン化させる方法
内藤勲メルマガ【登録特典プレゼント中!】 個人ビジネスのための時間と場所にとらわれない!便利ツールの使い方

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

WordPressの使い方

内藤です。

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

例えば、こんな感じ ↓

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

ボタンにするのに画像を用意するのは面倒ですよね。
今回は画像を使わずに、ボタン化する方法です。

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

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

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="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;/* 反転背景色 */
}

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

試してみてくださいね

 

内藤勲メルマガ
登録特典プレゼント中!
個人ビジネスのための時間と場所にとらわれない!
便利ツールの使い方(一部ツールの解説動画付き)
お名前とメールアドレスを入力して登録ボタンを押してください

※お名前はアルファベットでの登録はできません。
Gmailがおすすめです。

WordPressの使い方

コメント

タイトルとURLをコピーしました