今回はテキストリンクをボタン風に装飾する方法をご紹介します。
WordPressの有料テーマや無料テーマの「Cocoon」には標準でボタンを作れる機能がありますが、今回のカスタマイズはテキストリンクをCSSで装飾し、ボタン風に見せる方法。
あくまで普通のテキストリンクの装飾です。
今回はこの2スタイル
テキストリンクでボタンを設置する手順
- Step1CSSをコピペする
装飾スタイルを記述。子テーマのスタイルシートにCSSをコピーしておきます。
\Cocoonの方はこちらをご覧ください/ - Step2HTMLでテキストリンクを作成する
記事編集画面でリンク先URLを入力しテキストリンクを作ります。
ブロックエディタのリンク機能(リンクアイコンをクリック→URLを入力)を使うと、リンクするための<a>タグが段落<p>タグの中に入ったこのようなHTMLができあがります。
※カスタムHTMLに直接コードを書いてもOK
<p><a href="リンク先URL">BUTTON</a></p>
- Step3HTMLにクラスを追加する
装飾したい段落<p>の中にクラス(class=”クラス名”)を追加します。これだけ!
<p class="link-btn"><a href="リンク先URL">BUTTON</a></p>
HTMLの書き方
HTMLの書き方は2通りあります。
- 「カスタムHTML」にHTMLコードをコピペ
- ブロックエディタ機能でテキストリンクを作り、「追加CSSクラス」を使ってクラスを追加(こちらの方がコード不要で簡単)
1)「カスタムHTML」にHTMLコードをコピペ
ブロックメニューから「カスタムHTML」を選択し、<a>タグを使った下記のコードを記述します。
<p class="クラス名"><a href="リンク先URL">表示するテキスト</a></p>
2)ブロックエディタ/リンク+追加CSSクラスを使う
「カスタムHTML」に直接記述でも問題ありませんが、ブロックエディタでは高度な設定→「追加CSSクラス」を使って簡単にクラスを追加できます。
- リンクするテキストを選択
- リンクアイコンをクリックしてリンク先URLを入力(矢印をクリックして確定)
- 画面右側サイドバー(ブロックメニュー)の高度な設定→「追加CSSクラス」にクラス名を入力

例えばテキストリンクをボタン風にする場合。
ブロック(テキストリンク)を選択した状態で追加CSSクラスに「link-btn」と入力するだけですぐに反映されます。
<p class="link-btn"><a href="リンク先URL">BUTTON</a></p>

「追加CSS」クラスを覚えると時短になりかなり便利ですよ~。
<a>タグの中に直接クラスを追加する方法もありますが、
<a class="link-btn" href="リンク先URL">BUTTON</a>
当記事では「追加CSS」を使えるようにあえて段落<p></p>を使っています。
それでは以下に2つのスタイル(ボタン風、矢印風)のHTMLとCSSを掲載しますのでご利用ください。
CSSの分かる方は色や形を変えたりデザインの変更は自由におこなってくださいね。
テキストリンクで作るボタン①/ボタン風
See the Pen link-btn by はっちゃん (@hacchan) on CodePen.
ふつーのボタンは汎用性バツグン。
ブロックエディタが使えないウィジェット等でも活躍します。
マウスオーバー時にカラー反転するようにしています。
クラス名 | link-btn |
<p class="link-btn"><a href="リンク先URL">BUTTON</a></p>
/*ボタン風*/
.link-btn a{
--link-btn-color:#333; /*ボタンの色はここで設定*/
display:block; /*ブロック要素にする*/
margin:auto; /*ボタン中央寄せ*/
width: 200px; /*ボタンの幅*/
border:1px solid var(--link-btn-color); /*枠線の太さ・種類・色*/
background:var(--link-btn-color); /*ボタンの色*/
padding: 0.5em 2em; /*ボタンの高さ*/
color:#fff; /*文字の色*/
border-radius:1px; /*角の丸み*/
text-decoration: none; /*リンクの下線を消す*/
text-align: center; /*文字中央寄せ*/
transition: all .3s; /*なめらかな動きに*/
}
/*マウスオーバー時に反転させる*/
.link-btn a:hover{
background:initial;
color:var(--link-btn-color);
}
テキストリンクで作るボタン②/矢印風
See the Pen more-btn by はっちゃん (@hacchan) on CodePen.
この矢印、シンプルで可愛くありませんか??
オシャレなサイトでよく使われているイメージがあり個人的にお気に入りです。
マウスオーバー時に矢印が少し右に動くようにしています。
クラス名 | more-btn |
<p class="more-btn"><a href="リンク先URL">MORE</a></p>
/* 矢印風----------------------------------------------*/
.more-btn {
--more-btn-color:#333;/*矢印と文字の色はここで設定*/
text-align: center;/*ボタン中央寄せ(右寄せにしたいときはrightに変更)*/
}
.more-btn a {
position: relative; /*位置(ここを基準に)*/
padding: 0 3em 0 .5em; /*内側余白調整(上右下左)*/
color: var(--more-btn-color); /*リンク文字色*/
text-decoration: none; /*リンク下線を消す*/
outline: none; /*枠線を消す*/
}
.more-btn a::before,
.more-btn a::after{
content: ''; /*矢印部分作成*/
position: absolute; /*位置(下線と矢印を配置する)*/
background: var(--more-btn-color); /*矢印の色*/
height: 1px; /*線の太さ*/
transition: all .3s; /*なめらかな動き*/
}
.more-btn a::before {
bottom: -10px; /*下線の下からの距離*/
left: 0%; /*左からの距離*/
width: 90%; /*ボタンの幅*/
}
.more-btn a::after {
bottom: -5px; /*矢印の下からの距離*/
right: 10%; /*右からの距離*/
width: 15px; /*矢印部分の幅*/
transform: rotate(35deg); /*角度調整*/
}
/*マウスオーバー時の動き*/
.more-btn a:hover::before{
left: 10%;
}
.more-btn a:hover::after {
right:0%;
}
ひとこと
テキストリンクのボタンはサイト型トップページ作成の記事で使用。
矢印のMOREボタンは実際の当サイトのトップページ、サイトマップ、お問い合わせページでも使っています。サイドバーにも追加したり、テキストリンクにクラス名を追加するだけなのでとにかく簡単。

矢印どうやって作るんですか?
問い合わせをいただくことが多いので公開しておきます。
今回は以上です。他の記事も見て行ってくださいね。
Comment