WordPressでリンクボタンの作成方法【アニメもあるよ♪】

WordPress
ウサギさん
ブログのリンクボタンで、光るアニメーション付きボタンの作り方を知りたいの
モチ
光っていると目立つよね

今回はこんな悩みを解決します!

WordPressの有料テーマ等でよくある光るリンクボタンですが、有料テーマを使わなくても光るボタン用のHTML・CSSを追加するだけで簡単に実装可能です。

本記事では、僕が作成したHTML・CSSのコードを紹介しますので、コピペするだけですぐにブログで使うことができますよ♪

 記事でわかること

  • ・リンクボタンの作成方法
  • ・カラーバリエーションを増やす方法

 記事の信頼性

筆者のかがみ@cony_tas)はWeb/UIデザイナー歴8年になります。
ゲーム会社でさまざまなWebサイトやゲームUIを制作しています。

WordPressでリンクボタンの作成方法

リンクボタンのCSSを追加する前に、WordPressに子テーマを導入することをおすすめしています。

子テーマにCSSを追加することで、親テーマをアップデートしてしまってもCSSが消えることはありません。

よかったら下記の記事を参考に導入してみてください。

WordPressに子テーマを追加してCSSでカスタマイズしてみよう!

2020年2月21日

ボタンのサンプル

今回は下のようなアニメーション付きのリンクボタンを作成します。

アニメ用のクラスを外せばアニメーションを消すこともできますので、どちらでもお好きなほうをお使いください♪

HTMLコード

それでは実際にブログに実装してみましょう!

まずは、ボタンのHTMLからです。下記のコードをブログ記事中でリンクボタンを挿入したい箇所にコピペしてください。

<div class="linkBtn blue effect"> <a href="リンクURL">リンクはこちら</a> </div>

リンク先URLと、ボタンの文字は仮なので、お好きなものに書き換えてください。

また、ボタンのクラスですがそれぞれ以下のような役割があります。

  • linkBtn:ボタンの基本CSSを設定しているのでこれは外さないでください。
  • blue:カラーバリエーション。サンプルではblueですが、他にもyellow、red、pink、greenに変更するとボタンのカラーを変えることができます。
  • effect:アニメーション用クラスです。光るアニメーションが不要な方は外してください。

CSSコード

次にCSSの設定です。

下記のCSSをWordPressのカスタムCSSにコピペしてください。

記事の最初に紹介した子テーマを導入された方は、子テーマのstyle.cssにコピペして保存していただければOKです!

カスタムCSSを更新した後、追加したCSSがブラウザ上に反映されないことがあります。これはブラウザのキャッシュが原因の可能性があるので、キャッシュクリアをしてから再度確認してみてください。
.linkBtn { position: relative; width: 60%; margin: 20px auto; background: linear-gradient(to bottom, #b8b8b8, #adadad); border: 1px solid #ccc; border-radius: 5px; box-shadow: 0 2px 0 #a3a3a3; font-weight: bold; transition: all 200ms ease-out; } .linkBtn:hover { opacity: 0.7; } .linkBtn.blue { background: linear-gradient(to bottom, #46b2ff, #2794e2); border-color: #73b7f4; box-shadow: 0 2px 0 #167dd5; text-shadow: 0 0 3px #0e4ad0, 0 0 5px #0e4ad0; } .linkBtn.yellow { background: linear-gradient(to bottom, #fbe650, #ffcc2d); border-color: #fce87f; box-shadow: 0 2px 0 #e1ad1c; text-shadow: 0 0 3px #b16b02, 0 0 5px #b16b02; } .linkBtn.red { background: linear-gradient(to bottom, #ff5a5a, #ff2d2d); border-color: #fc7f7f; box-shadow: 0 2px 0 #d22a2a; text-shadow: 0 0 3px #b10202, 0 0 5px #b10202; } .linkBtn.pink { background: linear-gradient(to bottom, #ffa2c4, #ff80a1); border-color: #ffadc7; box-shadow: 0 2px 0 #db5b90; text-shadow: 0 0 3px #b62c51, 0 0 5px #b62c51; } .linkBtn.green { background: linear-gradient(to bottom, #5ff7e2, #19e0b6); border-color: #8af0d0; box-shadow: 0 2px 0 #4bcab9; text-shadow: 0 0 3px #00816e, 0 0 5px #00816e; } .linkBtn.effect::before { display: block; position: absolute; top: 0; left: 0; bottom: 0; width: 45%; height: 100%; margin: auto; background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,0.8)); content: ""; transform: skew(-45deg) translateX(-100%); animation: btn-effect 5000ms linear 0ms infinite normal both; } @keyframes btn-effect { 0% { transform: skew(-45deg) translateX(-150%); opacity: 0; } 5% { transform: skew(-45deg) translateX(0%); opacity: 1; } 20% { transform: skew(-45deg) translateX(250%); opacity: 0; } 100% { transform: skew(-45deg) translateX(250%); opacity: 0; } } .linkBtn a { display: block; width: 100%; height: 100%; padding: 10px; box-sizing: border-box; color: #fff; text-align: center; text-decoration: none; }

ボタンが表示されるか確認

HTMLとCSSを追加できたら、ブラウザ上でボタンが表示されるか確認してみましょう!

カラーバリエーションをテストですべて表示してみます。

ウサギさん
カラフルで綺麗なの~♪

CSSでボタンの横幅調整や、カラーのクラスを追加して好みのカラーボタンにカスタマイズすることもできますので、色々お試しくださいね!

最後に:WordPressでリンクボタンの作成方法

今回はWordPressで光るリンクボタンの作成方法をご紹介しました。

内部リンクのボタンや、アフィリエイトリンクのボタンに活用できると思いますので、良かったら使ってみてください♪

それでは、今回はこの辺で!

ウサギさん
最後までご覧いただきまして♪
モチ
ありがとうございますっ!

WordPressに子テーマを追加してCSSでカスタマイズしてみよう!

2020年2月21日

WordPressの子テーマからJavaScriptファイルを読み込む方法

2020年2月23日

WordPressテーマのスワローをレビュー

【 WordPress 】スワロー( SWALLOW )のレビュー【 メリット・デメリット 】

2020年3月17日

WordPressテーマ「スワロー」に目次を追加しよう!【プラグイン不要】

2020年2月2日