本サイト内のコンテンツはNORILOGが独自に制作しています。メーカー等から商品提供を受けることもありますが、その場合は記事内に明記しております。コンテンツの内容や評価に関するランキングの決定には一切関与していません。メーカー等の指示による表示部分にはPRを表記します。記事内で紹介する商品を購入することで、当サイトに売り上げの一部が還元されることがあります。詳しくはサイト運営ポリシーをご覧ください。
カスタマイズおすすめ度：[star rating=”100″ type=”percent”]
こんにちは、NORI（@norilog4）です。他のブログ記事などで、光るボタンを見たことありませんか？この光るボタンをどうやって作っているのかわからない人も多いと思います。
この記事では、よくブログで見かける光るボタンの作り方を紹介します。ソースコードはコピペOK！簡単に導入できます。
SANGOのテンプレートを意識してデフォルトのボタンに色を合わせた形の、光るボタンにCSSを設定しています。
NORI
この記事で紹介している内容は、WordPress（ワードプレス）のテーマ、Sango（サンゴ）やPORIPU（ポリプ）に対応しています。
Apple製品の他、カメラやドローンが好きです。趣味で2021年から登山やキャンプもはじめました。国交省全国包括許可承認取得済 三陸特/アマ無線4級/DJI CAMPスペシャリストを取得。運営者の詳しい情報はこちら
アニメーションで光るボタンのサンプル
この記事を読み終わると、以下のような光るアニメーションがついたボタンが作れます。ショートコードを使って実装しているので、AddQuicktagなどに登録しておくと記事を書くスピードもあがります。
[redshiny] ヘッダー画像テンプレートダウンロード[/redshiny] [yellowshiny] 商品をカートへ追加[/yellowshiny] [blueshiny] メッセンジャーでメッセージを送る[/blueshiny] [greenshiny] 植樹を行う（緑の募金サイト）[/greenshiny]上のボタンはこちらのソースコードで表示されています。
アニメーションで光るボタンを作るまでの流れ
この光るボタンが完成するまでの手順です。
アニメーションで光るボタンの作り方
以下の手順を順番を追って行っていくことで、最終的には光るボタンを実装作ることができます。できない場合には貼り付けたコードが間違っているなどの可能性があるので、よく見直してみてください。
光るボタンのCSSをコピー&ペースト
以下のソースコードをまるっと全部コピーして、自分のブログのテーマ（子テーマ）のCSSに貼り付けて保存しましょう。これでCSSの設定は完了です。
function.phpへコードを追加
8年間、WordPressをいじってますが function.php を触っては画面を真っ白（エラー）にして来た経験から現在は functions.php を触る際には、安全に管理・追加できるプライグイン「Code Snippets」を使って実装しています。
WordPressの functions.php を安全に管理・追加できるプライグイン「Code Snippets」
Code Snippetsへのコード追記方法
Code Snippets（コードスニペット）へは以下の動画の通り、以下で紹介するコードを赤色・黄色・青色・緑色それぞれ追加していきます。
ソースコードを追加後に Save Changes and Activate というボタンをクリック後、「Snippet added and activated.」と表示されると登録した色のボタンが、ショートコードで記事へ埋め込みすることが可能となります。
上の動画を参考にしたのコードをそれぞれ追加していきます。
赤色ボタンのショートコードを追加
黄色ボタンのショートコードを追加
青色ボタンのショートコードを追加
緑色ボタンのショートコードを追加
Code Snippetsへ4つのコードが全て完了した状態
Code Snippets（コードスニペット）へ各ボタン 赤色・黄色・青色・緑色 をすべて完了すると、以下の画像のようになっていれば問題ありません。これで4色の光るボタンが利用できます。
ショートコードを貼り付けて動作確認
以下のソースコードを記事または固定ページに追加して動作テストをしてみてください。このブログと同じように光っていれば問題なく設定できています。
赤色のボタン
[redshiny] ここにテキストを入力[/redshiny]
黄色のボタン
[yellowshiny] ここにテキストを入力[/yellowshiny]
青色のボタン
[blueshiny] ここにテキストを入力[/blueshiny]
緑色のボタン
[greenshiny] ここにテキストを入力[/greenshiny]
ボタンにアイコンを追加する方法【応用設定】
ボタンにアイコンを追加するには「Font Awsome（フォント オーサム）」が必要となります。
設定方法などについては以下の記事を参考にしてみてください。
【保存版】Font Awesomeの使い方：Webアイコンフォントを使おう
ボタンに入れるアイコンを選ぶ
今回はダウンロードするボタンを作って実装していきます。Font Awsome（フォント オーサム）の左上の検索ボックスに「download」と入力してエンターキーを押します。
Download（ダウンロード）に関連したアイコンが表示されるので、その中からアイコンを選んでクリックし i classから始まるコードをクリックしてコードをコピーします。
光るCSSアニメーションボタンにアイコンを追加
以下のようにテキストの前にコードを入れてあげます。
[redshiny]<a target="_blank" rel="noopener noreferrer"><i class="fas fa-download"></i> ヘッダー画像テンプレートダウンロード</a>[/redshiny]実際のボタン
[redshiny] ヘッダー画像テンプレートダウンロード[/redshiny]これで光るボタンにアイコンの追記ができます。アイコンはそのボタンに合わせたものを設定することで、「何のボタン」なのかがよりわかりやすくなります。（クリック後のアクションが想像できる）
WordPressで光るCSSアニメーションボタンの作り方まとめ
本記事は、WordPressで光るアニメーションボタンの作り方の解説記事です。
通常のHTMLでも表示はできますが、ショートコードで実装するとタグがみやすいので記事を書く際にも非常に楽になります。
NORI
質問や回答はコメント欄、またはTwitterなどをフォローしてリプライでお知らせください。
以上、NORI（@norilog4）でした。
初心者からCSSを学ぶおすすめの書籍
1冊ですべて身につくHTML & CSSとWebデザイン入門講座
(2025/01/20 05:25:24時点 Amazon調べ-詳細)
【プラグイン】AddQuicktag 記事装飾をワンクリックで簡単に！使い方と設定方法を解説
