WordPressでボタンリンクを作成

記事編集画面でリンクをボタン化する方法

テキストエディタに切り替えてボタンタイプのリンクを作成

WordPressでは簡単にリンクを挿入することができます。また、ボタンタイプのリンクを作成するには以下の方法で可能です。

normal-link

通常のリンクを作成する場合は、リンクにしたい文字列を選択した状態で画像のlinkボタンを押してリンク先を設定することで画像のようにハイパーリンクを設置でき、選択した文字列がリンクのHTMLコードに置き換わります。

  • 画像の上部はWordPressのテキストエディタ
  • 下部はプレビューの様子

になっています。

normal-link-preview

置き換わったHTMLのコードは以下の状態となりますが、

<a href="http://myblog.net/">normal link</a>

ボタン化するために下のように手動で書き換えます。

<a href="http://myblog.net/"><button>button link</button></a>

aタグの内側にbuttonタグを挿入しています。

button-link

ボタンリンクが表示されました。

画像のWordPressでは、テーマにtwentyfourteenを利用していますので、twentyfourteenのbuttonタグに設定されているcssが適用されます。

ボタンスタイルの変更

簡単にボタンの色を変更してみます。

<a href="http://myblog.net/"><button style="background-color: #248;">button link</button></a>

buttonタグにインラインでcssを適用すれば簡単にスタイルをカスタマイズできます。

button-color

テーマファイルのstyle.cssにカスタマイズしたcssを適用すれば好みのボタンリンクを作成できます。まずbuttonタグにスタイルを適用するclass属性を追加します。

<a href="http://myblog.net/"><button class="style-test">button link</button></a>

そして、style.cssに以下のようにcssを作成します。

button.style-test {
    font-size: 1.7em;
    border-style: none;
    font-weight: bold;
    padding: 15px 35px;
    background-color: #7fa62a;
    color: #fff;
}

button.style-test:hover {
    background-color: #2a7fa6;
    color: #fff;
}

ボタンリンクは画像のようになります。

customized-button-style