【iPhone 15】最新情報・キャリア別の価格比較

WordPressのショートコードを使って光るCSS ボタンの作り方と応用デザインを丁寧に解説

光るCSS ボタンの作り方

本サイト内のコンテンツはNORILOGが独自に制作しています。メーカー等から商品提供を受けることもありますが、その場合は記事内に明記しております。コンテンツの内容や評価に関するランキングの決定には一切関与していません。メーカー等の指示による表示部分にはPRを表記します。記事内で紹介する商品を購入することで、当サイトに売り上げの一部が還元されることがあります。詳しくはサイト運営ポリシーをご覧ください。

カスタマイズおすすめ度:[star rating=”100″ type=”percent”]

こんにちは、NORI(@norilog4)です。他のブログ記事などで、光るボタンを見たことありませんか?この光るボタンをどうやって作っているのかわからない人も多いと思います。

この記事では、よくブログで見かける光るボタンの作り方を紹介します。ソースコードはコピペOK!簡単に導入できます。

SANGOのテンプレートを意識してデフォルトのボタンに色を合わせた形の、光るボタンにCSSを設定しています。

NORI

簡単に実装できると思いますのでチャレンジしてみてください。
MEMO

この記事で紹介している内容は、WordPress(ワードプレス)のテーマ、Sango(サンゴ)やPORIPU(ポリプ)に対応しています。

この記事の監修者

アニメーションで光るボタンのサンプル

この記事を読み終わると、以下のような光るアニメーションがついたボタンが作れます。ショートコードを使って実装しているので、AddQuicktagなどに登録しておくと記事を書くスピードもあがります。

上のボタンはこちらのソースコードで表示されています。

アニメーションで光るボタンを作るまでの流れ

この光るボタンが完成するまでの手順です。

STEP.1
CSSをコピペ
このボタンに必要なCSSをコピペして自分のブログのテーマ(子テーマ)のCSSに貼り付けて保存
STEP.2
function.phpへ追加
ショートコードで実装するためfunction.phpへコードの追加が必要です。WordPressの functions.php を安全に管理・追加できるプライグイン「Code Snippets」を使って実装します
STEP.3
ショートコードを貼り付け
投稿記事や固定ページにショートコードを貼り付けてテストを行う。
STEP.4
アイコン追加の応用
ボタンにアイコンを追加して表示する方法を伝授!
STEP.4
完成
これでいつでも光るボタンが使えます!

アニメーションで光るボタンの作り方

以下の手順を順番を追って行っていくことで、最終的には光るボタンを実装作ることができます。できない場合には貼り付けたコードが間違っているなどの可能性があるので、よく見直してみてください。

光るボタンのCSSをコピー&ペースト

以下のソースコードをまるっと全部コピーして、自分のブログのテーマ(子テーマ)のCSSに貼り付けて保存しましょう。これでCSSの設定は完了です。

function.phpへコードを追加

8年間、WordPressをいじってますが function.php を触っては画面を真っ白(エラー)にして来た経験から現在は functions.php を触る際には、安全に管理・追加できるプライグイン「Code Snippets」を使って実装しています。

WordPress おすすめプラグイン 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色の光るボタンが利用できます。

ショートコードで光るボタンの作り方

ショートコードを貼り付けて動作確認

以下のソースコードを記事または固定ページに追加して動作テストをしてみてください。このブログと同じように光っていれば問題なく設定できています。

赤色のボタン

黄色のボタン

青色のボタン

緑色のボタン

ボタンにアイコンを追加する方法【応用設定】

ボタンにアイコンを追加するには「Font Awsome(フォント オーサム)」が必要となります。

設定方法などについては以下の記事を参考にしてみてください。

【保存版】Font Awesomeの使い方:Webアイコンフォントを使おう

ボタンに入れるアイコンを選ぶ

今回はダウンロードするボタンを作って実装していきます。Font Awsome(フォント オーサム)の左上の検索ボックスに「download」と入力してエンターキーを押します。

Download(ダウンロード)に関連したアイコンが表示されるので、その中からアイコンを選んでクリックし i classから始まるコードをクリックしてコードをコピーします。

WordPress 光るボタン カスタマイズ アイコン追加

光るCSSアニメーションボタンにアイコンを追加

以下のようにテキストの前にコードを入れてあげます。

コード

<a target="_blank" rel="noopener noreferrer"><i class="fas fa-download"></i> ヘッダー画像テンプレートダウンロード</a>

実際のボタン

これで光るボタンにアイコンの追記ができます。アイコンはそのボタンに合わせたものを設定することで、「何のボタン」なのかがよりわかりやすくなります。(クリック後のアクションが想像できる)

WordPressで光るCSSアニメーションボタンの作り方まとめ

本記事は、WordPressで光るアニメーションボタンの作り方の解説記事です。

通常のHTMLでも表示はできますが、ショートコードで実装するとタグがみやすいので記事を書く際にも非常に楽になります。

NORI

この記事をみて実装してみてね!

質問や回答はコメント欄、またはTwitterなどをフォローしてリプライでお知らせください。

以上、NORI(@norilog4)でした。

初心者からCSSを学ぶおすすめの書籍
1冊ですべて身につくHTML & CSSとWebデザイン入門講座

WordPress超入門 AddQuicktagの使い方 【プラグイン】AddQuicktag 記事装飾をワンクリックで簡単に!使い方と設定方法を解説

コメントの通知/購読設定
受け取る通知
guest

0 件のコメント
Inline Feedbacks
全てのコメントを見る