トップページをサイト型に変更したので、今回は記事の下にもっと見るといったリンクボタンを置いて、さらに光らせてみたいなと思います！
- リンクできるボタンを設置する方法
- HTML/CSSのコード
- キラッと光らせる方法
- ボタンを反転させる方法
- アイコンをつける方法
Gutenberg（グーテンベルグ）なら簡単に作れます
このカスタマイズはワードプレスのブロックエディタGutenberg（グーテンベルグ）、さらにテーマCocoonならオリジナル機能で簡単に実装できます。
このボタンをHTMLとCSSを使って自作する方法なのでコードエディタなどHTMLで編集したいときに便利です。
リンクボタンのサンプル
サンプルとして自作したボタンを下に置いてみました。
一定間隔でキラッと光るのがお分かりいただけますか？(・∇・)
リンクボタン
このボタンを作っていくよ
リンクボタン作成にはaタグを使用する
さきほど書いた通りWordPressの有料テーマや無料テーマの「Cocoon」には標準でボタンが作成できる機能がついていますが、今回はテーマ独自機能に頼らずに自由なカスタマイズができるように、
HTMLの<a>タグにCSSで装飾し、ボタンの様に見せる方法
をご紹介します。
リンクボタンを作成するコード
HTML
HTMLでリンクを貼るには<a>タグを使い、このように記述します。
<a href="リンク先のURL" class="link-btn-1">リンクボタン</a>HTMLの書き方／ポイント
- <a href=”リンク先のURL“>←ダブルクォーテーションで囲んだ部分にリンク先のURLを書きます。
- <a>タグの中に半角スペースを空けてCSSを適用するためのクラス名（class=”link-btn-1″）を指定しておきます（クラス名は自分で分かりやすいように変更してもOK）
- <a></a>タグで挟まれた部分にボタンに表示する文字を書きます。
これでリンクの設定は終わり！この時点ではただのテキストリンクになっているので、あとはCSSでボタンのように装飾していきます。
CSS
CSSでは<a>タグ（テキストリンク）をボタンのように見せるために、細かく下記のスタイル設定をしていきます。
/***リンクボタンの設定***/
.link-btn-1 {
display:block;/*ブロック要素へ変換*/
margin:auto;/*ボタン中央寄せ*/
width: 250px;/*ボタンの幅*/
border:1px solid #666;/*枠線の太さ・種類・色*/
background-color:#666;/*ボタンの色*/
padding: .5rem;/*ボタンの高さ*/
color:#fff;/*文字の色*/
border-radius:30px;/*角の丸み*/
text-decoration: none;/*リンクの下線を消す*/
text-align: center;/*文字中央寄せ*/
overflow: hidden;/*はみ出た部分を表示しない*/
position: relative;/*位置（起点）*/
}
/*光らせる*/
.link-btn-1::before {
position: absolute;
content: '';
display: inline-block;
top: -180px;
left: 0;
width: 30px;
height: 100%;
background-color: #fff;
animation: kirari 3s ease-in-out infinite;
}
@keyframes kirari {
0% {transform: scale(0) rotate(45deg); opacity: 0; }
80% {transform: scale(0) rotate(45deg); opacity: 0.5; }
81% {transform: scale(4) rotate(45deg); opacity: 1; }
100% {transform: scale(50) rotate(45deg); opacity: 0; }
}
/*ホバーしたとき反転させる*/
.link-btn-1:hover{
background-color:transparent;
color:#666;
}
ブロック要素へ変換
<a>タグはデフォルトではインライン要素なので、これをブロック要素に変換します。
ボタンのデザイン
幅、高さ、色、丸み、はみ出た文字をどうするかなどの各種設定をします。
ボタンを光らせる
光らせるためにボタンの疑似要素「::before」に白いグラデーションの背景を設定し、アニメーションで「position」を移動させてキラッとした光を出しています。
ホバーアクションをつけるとき
マススオーバーしたときに変化をつけるホバーアクションを入れてもよいと思います。
ホバーしたときに反転
アイコンを使う場合（Font Awesome5）
アイコン（ボタンの右側に >>）を付ける場合はこちらのCSSを追加します。
.link-btn-1:after{
font-family: "Font Awesome 5 Free";
font-weight:bold;
content: "\f101";
margin-left:5px;
}ひとこと
このようにHTMLとCSSで作成できるので、ブログを書く上でボタンを作ってみたい方、キラリと光らせてみたいと思っている方はお試しください(゜∇^d)!!
Comment