スマホ向けのシェアボタンを作るのにFont Awesome5を使ってみた

f:id:Medicmed:20180701082449p:plain

デフォルトシェアボタンよりもオシャレにしたいなぁっと思っていたので作ってみました。

f:id:Medicmed:20180618200755p:plain

スマホ用のシェアボタンを作るのに参考にしたのが、この「はてなブログPerfect GuideBook」

はてなブログ Perfect GuideBook

はてなブログ Perfect GuideBook

シェアボタンを作るHTML/CSSを書いていたのですが、「Google+」と「Pocket」の画像が上手く表示なくて困りました。

f:id:Medicmed:20180618201338p:plain

<!--Google+でシェア-->
<a class="google-plus-button" href="https://plus.google.com/share?url={URLEncodedPermalink}" title="このエントリーをGoogle+でシェア" target="_blank"><i class="fa fa-google-plus-"></i><span class="sns-name"><br>Google+</span></a>
<!--Pocketでシェア-->
<a class="pocket-button" href="http://getpocket.com/edit?url={URLEncodedPermalink}" title="このエントリーをPocketに追加" target="_blank"><i class="fa fa-get-pocket"></i><span class="sns-name"><br>Pocket</span></a>
</div>

どうしようか悩んで、ネットサーフィンしていたらFontAwesomeというフォントを使えば解決できそう!っていうことが分かりました。
FontAwesomeを使うと色々なアイコンを使うことできます。

例えばアンドロイドアイコン

アイコンにアニメーションを加えて回転させたり色々モーションを追加できます

FontAwesomeを使えるようにしよう!

公式サイトにアクセスします。

Font Awesome

f:id:Medicmed:20180618203731p:plain

このようなページが開くので一番上にある「Icons」の隣にある「Get Started」の方をクリックします。
f:id:Medicmed:20180618204002p:plain

現在の状態だと「A Web Fonts with CSS」での設定になってしまいます。
FontAwesome5をこれから使っていきたい方は、その隣にある「SVG with JS」の方を使うことがベターみたいです。
SVG with JS」の画面に切り替えて、次にやることは「CDN」を使えるようにする設定です。
手順はとても簡単でページの真ん中に書いてあるソースコードをコピペしてご自身のサイトに埋め込むだけです。

f:id:Medicmed:20180618204611p:plain
この黒い真ん中の画面に書いてあるコードを、はてなブログの「設定」→「詳細設定」→「headに要素を追加」という場所に貼り付けます。
f:id:Medicmed:20180618205014p:plain

これでFontAwesome5が使えるようになりました。
思ったより簡単で良かったです

今回使用した「CDN」について少し説明を加えたと思います。

CDNとは何か?

Contents Delivery Networkの略です。
wikipediaから引用すると

コンテンツデリバリネットワーク(Content Delivery Network, CDN)とは、Webコンテンツをインターネット経由で配信するために最適化されたネットワークのことである。
引用:コンテンツデリバリネットワーク – Wikipedia

みたいです。

GoogleさんもCDNを持っていてGoogleCDNとして有名だと思います。
jQueryなどをブログに使用する際にもGoogleCDNを使っています。
CDNを使用することで何が良いのか…を簡単に一言でいうと

ウェブページの表示速度が高速で安定する!

だと思います。
JavaScript等をブログにたくさん埋め込んでいたりするとウェブページの表示速度が落ちたりしますが、そういったことを軽減させてくれます。
ブログを収益化している方にとってはサイトの表示速度が遅いと死活問題になりますからね。
サイトのページパフォーマンスを測定してくれるサイトやアプリはいくつかありますが、Googleさんも提供してくれています。
「PageSpeed Insights」でモバイル/PCのそれぞれのページ速度を測定してくれます。

PageSpeed Insights

f:id:Medicmed:20180618211652p:plain

ウェブページの表示速度が遅いと読者の離脱率が上がりブログ収益低下に直結するので、色々勉強する必要があります。
SEO対策に限らずアフィリエイトブログの作り方など参考になります。

FontAwesome5を使用してシェアボタンを作成する!

今回上手くアイコンが表示されなかったのは「Google+」と「Pocket」のアイコンです。
FontAwesomeのサイトに戻って該当するアイコンを探してきます。
Iconsをクリックして「Google」と検索すると候補がいくつか表示され「Google+」のアイコンが見つかりました。

f:id:Medicmed:20180618212658p:plain
画像下にソースコードCDNの時と同じように黒い画面で表示されていますので、これを最初に作ったシェアボタンのソースコードにコピペすれば完了です。

f:id:Medicmed:20180618212847p:plain

「Pocket」のアイコンも同じように検索して見つかりますので、同様にソースコードをコピペします。
これで最初のようなスマホ用のシェアボタンが作成できます。
これからFontAwesome5を使用する方はぜひ参考にしてみてください。
終わり。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください