Amazon詐欺メールが急増中 内容の詳細を解説

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

光るCSS ボタンの作り方

カスタマイズおすすめ度:

こんにちは、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の 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アニメーションボタンにアイコンを追加

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

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

実際のボタン

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

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

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

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

NORI

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

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

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

WordPress超入門 AddQuicktagの使い方WordPressの記事装飾をワンクリックで加速させるAddQuicktag 使い方と設定方法
コメントを閉じる

コメントを残す