記事編集画面でリンクをボタン化する方法
テキストエディタに切り替えてボタンタイプのリンクを作成
WordPressでは簡単にリンクを挿入することができます。また、ボタンタイプのリンクを作成するには以下の方法で可能です。
通常のリンクを作成する場合は、リンクにしたい文字列を選択した状態で画像のlinkボタンを押してリンク先を設定することで画像のようにハイパーリンクを設置でき、選択した文字列がリンクのHTMLコードに置き換わります。
- 画像の上部はWordPressのテキストエディタ
- 下部はプレビューの様子
になっています。
置き換わったHTMLのコードは以下の状態となりますが、
<a href="http://myblog.net/">normal link</a>
ボタン化するために下のように手動で書き換えます。
<a href="http://myblog.net/"><button>button link</button></a>
aタグの内側にbuttonタグを挿入しています。
ボタンリンクが表示されました。
画像のWordPressでは、テーマにtwentyfourteenを利用していますので、twentyfourteenのbuttonタグに設定されているcssが適用されます。
ボタンスタイルの変更
簡単にボタンの色を変更してみます。
<a href="http://myblog.net/"><button style="background-color: #248;">button link</button></a>
buttonタグにインラインでcssを適用すれば簡単にスタイルをカスタマイズできます。
テーマファイルの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;
}
ボタンリンクは画像のようになります。
