光るボタンとBetter Font Awesome(プラグイン)を実装してみた

光るボタンとBetter Font Awesome(プラグイン)を実装してみた

サイトのクリック上昇に光るボタンを導入しよう

 

光ボタンとBetter Font Awesome

 

前から気になっていてやまとしのサイトにも導入しようと考えていた

光るボタンを導入することにしました。

少し問題を解決出来てない部分もありますが、いずれは解決できるよう努力

しようかと思っています。

他のテーマならちゃんと表示されるかも知れないので確認してください。

 

AMPページから閲覧にきた方はこちらの非AMPページで動作を確認ください。

 

非AMPページはこちらです。

 

アフィリエイトリンクには使えない場合がありますので、ご自身で確認して

使用してください。

確か動く広告など色々使えなくなったはずで、光るボタンもアフィリエイトリンク

などには使えなくなったと思いましたが、実際どこまでOKで使えるのかは

やまとしもまだ確認出来てませんが、とにかく光るボタンを使いたいだけの

自己満足が大部分ですので紹介していきます(笑)

 

参考にしたサイトページはこちらです。

 

 

こちらのページのページ中くらいの所にあるコードを使わせてもらい

スタイルCSSにコピペしましたが、ライオンメディアの場合は

追加CSSの方でもいいかも知れません。

かならずバックアップを取ってからコードを追加した方がいいでしょう。

他にも色んなサイトで光るボタンやエフェクトを紹介されてますが

個人的にはこのサイトのボタンが気にいりましたので採用しました。

 

光るボタンを設置してみる

 

管理画面をテキストに切り替えてHTMLコードを入力して

光ボタンを設置してみましたが、アイコン部分が表示されないし

テキストが青いです。

 

その時の画像がこちらです。

 

光るボタン失敗

 

右側にアイコンが表示されてませんしテキストが青いです。

それ以外はちゃんと表示されています。

アイコンにFont Awesomeを使用しているということで

ヘッダーにCDNで読み込むコードを入力しましたが表示されませんでした。

こちらのサイトのコードではなく他サイトのバージョンの新しい方の

コードを入力したのがいけなかったかも知れませんが、とりあえず他の

方法を考えることにしました。

 

Font Awesomeの公式ページはこちらです。

 

 

参考にしたページはこちらです。

 

 

 

とりあえず公式ページからFREEのアイコンはダウンロードしましたが

一応、保留にしてます。最新はバージョン5.2.0です。

 

Better Font Awesome(プラグイン)を導入

 

とりあえずに簡単にFont Awesomeのアイコンを読み込めて、投稿画面から

直接Font Awesomeのアイコンを使える便利なプラグインになっていますので

かなり簡単に使えるのが魅力です。

プラグインをあまり使いすぎには注意ですが、プラグインを停止や削除したので

プラグインで解決することにしましたが、プラグインを使わなくても良さそうなら

削除するかもしれません。

 

Font Awesomeのアイコンのことはブログを立ち上げた当初から知っていて

導入しようかと思っていたのですが、これを気に導入しようかと思います。

動くアイコンなど色々とありますので、使い道はあるかと思います。

 

Better Font Awesome

プラグイン新規追加より検索してインストール後に有効化してください。

次に設定画面ですがデフォルトで使用する予定です。

簡単に検索した感じではデフォルトでも良さそうなのと

いつでも停止出来るようにデフォルトにしました。

設定画面

次は投稿画面ですがこちらになります。

投稿画面

上部のInsert Iconからアイコンが挿入出来ます。

アイコン見本

英単語を入力することでアイコンの種類が表示されます。

このプラグインを導入後にブラウザの更新でアイコンが表示されるようになりました。

光るボタンの確認(見本)

 

それでは光るボタンの確認をしましょう。

まだテキストとアイコンの青い表示の修正が出来ていませんが、

やまとしも確認用に閲覧しますので・・・

 

まずは青と緑のアニメーションありです。

 

 

 

次にアニメーションなし

 

 

ネタ用フルアニメーション

 

 

ショートコードアルティメットと組み合わせて使用も出来るので

色々と組み合わせると面白そうです。

 

 

 

 

※動きはブラウザの更新で確認下さい。

 

関連記事

 

 

 

残念ながらテキストとアイコンが青なのは現時点では直せませんが

時間をかけて直していく予定です。

多分、テキストとアイコンの色を指定するコードを入力すればいいのでしょう。

色々とアレンジすればさらにアニメーションなども工夫出来そうですので

時間が空いたときに挑戦したいと思います。

 

光るボタンとBetter  Font Awesome(プラグイン)まとめ

 

光るボタンを設置することにより人目も引けますしクリック向上に

役立てることができるかも知れません。

アフィリエイトリンクの使用にはご自身で使用できるか確認してください。

まだ、テキストとアイコンが青く表示される問題がありますので

改善できるように努力しますが、記事投稿が優先になりますので

ご了承ください。

 

後、こちらのサイトの画像を光らせるのも使えるかもしれませんが、

光るボタンと両方のコードを入れるとエラーが出て警告が出ましたので

同時には使えないようなので注意が必要です。

ライオンメディアだとエラーが5つぐらい出ますので、

記述を変更する必要があります。

テキストとアイコンを白に出来ましたが、なんか小さくなったうえに

まだエラーがありますので、修正に時間がかかりますのと

閲覧した時によりデザインが変わっているかもです。

追記

追加CSSに入れなおしたら表示は直りましたが、

エラーはあるので時間をかけて修正するかもしれませんが難しいかもです。

 

 

 

 

エラー修正をする予定なので見た目が変わると思いますので

デフォルトの画像を貼っておきます。

出来ればもう少し小さくするかもしれないですし、

AMP対策でシンプルなデザインにするしかないかもです。

 

光るボタン(赤)

 

光るボタン(緑・青)

とりあえず全てのコードのエラーは消しましたが

見た目がまだ完全ではないので時間をかけて納得いく出来にしたいです。

新しく購入した書籍が役にたちました。

 

 

 

WordPressカテゴリの最新記事