この記事では、CSSを使ってテキストリンクを装飾する方法をご紹介します。
ワードプレスにはテーマ独自にボタンを作る機能がありますが、あくまで普通のテキストリンクの装飾です。
この2スタイル
テキストリンクで作るボタンCSS
それでは以下に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:#757575; /*ボタンの色はここで設定*/
display:block; /*ブロック要素*/
margin:auto; /*ボタン中央寄せ*/
width: 300px; /*ボタンの幅*/
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%;
}
テキストリンクでボタンを設置する手順
- CSSをコピペする
- HTMLでテキストリンクを作成する
- HTML(ブロック)にクラスを追加する
- 完成
CSSをコピペする/テキストリンク装飾用
テキストリンクの装飾スタイルを書いておく部分です。通常は子テーマのスタイルシートにCSSをコピーします。
HTMLでテキストリンクを作成 + クラスを追加する
次に、 HTMLでテキストリンクを作成し、クラスを追加する工程です。
HTMLでリンクを作る方法は2通りあり、どちらでもOKです。
- ブロックエディタを使う 簡単
- 「カスタムHTML」にHTMLコードを直接入力する
①ブロックエディタを使う 簡単
- Step1ブロックエディタでテキストリンクを作成
ブロックエディタではテキストリンク作成からクラス追加までとても簡単にできます。
- リンクするテキストを選択
- 上部ツールバー→リンクアイコンをクリックしてリンク先URLを入力
- 矢印をクリックして確定
- Step2クラスを追加/「追加CSSクラス」に入力
ブロックエディタでクラスを追加するには、高度な設定→「追加CSSクラス」がとても便利。ブロックにCSSクラスを追加することでブロックを自由に装飾できます。
- テキストリンクのブロックをクリックする
- 右側サイドバー(ブロックタブ)の高度な設定→「追加CSSクラス」にクラス名を入力
\「追加CSSクラス」の簡単使い方/
HTMLの仕組み
例えば、ブロック(テキストリンク)を選択した状態で追加CSSクラスに「link-btn」と入力すると、自動的にクラスが追加されたHTMLが生成されます。
<p class="link-btn"><a href="リンク先URL">BUTTON</a></p>
<a>タグの中に直接クラスを追加する方法もありますが、当記事では「追加CSSクラス」を使えるようにあえて段落<p></p>を使っています。
②「カスタムHTML」にHTMLコードを直接入力
HTMLコードを直接入力してもOK。
ブロックメニューから「カスタムHTML」を選択し、下記コードを記述します。①のブロックエディタで生成されるコードとまったく同じものです。
<p class="link-btn"><a href="リンク先URL">BUTTON</a></p>
テキストリンクをオシャレに装飾/まとめ
テキストリンクにクラス名を追加するだけなのでとにかく簡単。ただのテキストリンクよりも視覚的に魅力的なリンクを使うことで、ユーザーの注目を引きやすくなります。
テキストリンクのボタンはサイト型トップページ作成の記事で使用。矢印のMOREボタンは当サイトのトップページで使用しています。ぜひ使ってみてくださいね!
この記事は以上です。
Comment コメントはこちらへ