テーマにもともと搭載されていたSNSパーツが「ちょっと寂しいなぁ」と思ったのでカスタマイズすることにしました。
今回のカスタマイズに当たってFont Awesome というWebフォントのアイコンを使ってソーシャルブランドのSNSボタンのパーツを作ってみましたので、その使い方を紹介します。
ディフォルトSNSボタンと、目標のSNSパーツ
賢威8（当サイトテーマ）のディフォルトのSNSパーツはこちら。
少し質素で「あるだけ」って感じがします（苦笑）
機能的には結構しっかりしてて、シェア数のカウントとかもキッチリ取ってくるですが、現状でほぼシェアなどされていない当サイトに取ってカウントなど不要！
ってことで思い切って根こそぎ作り変えることにしました。
記事カード時のSNSボタン
テーマのテンプレート上、記事カードに同様のパーツが流用されていて、デザインはアイコンだけのシンプルなものになっています。
ということは、このデザインも作らなくてはいけないことになります。
目標とするSNSパーツをネットサーフィンで物色する
自分でパッとデザインとか思いつくタイプではないので、基本ネットを徘徊して「これイイな」と思ったパーツのデザインからパクインスピレーションをいただきます。
既に実装済みですが完成後はこんな感じ。
パッと目を引く感じなりましたね。
で、作っている最中にボタンのアイコンを表示しようとして少しつまずいた部分がありましたので、今回Font Awesomeの使い方についておさらいしてみようと思います。
Font Awesomeとは？
ウェブサイトやブログでWebアイコンフォントを表示できるようにしてくれるWebフォントサービスです。
噛み砕いて言うと、絵文字専用フォントですね。
種類はかなり豊富で、有料版/無料版に分かれていますが、無料版でも十分実用レベルのフォントが多数用意されています。
ブランドロゴのようなフォントも多数用意されており、今回のSNSボタンもそれらを使って実装します。もちろん無料版で使える範囲です。
Font Awesomeの使い方
組み込みのフォントではないのでFont Awesomeを使いたい場合は事前にフォントを読み込むという必要があります。
ワードプレステーマによってはディフォルトで読み込まれている場合があるので確認の仕方をお伝えします。
Font Awesomeが既に読み込まれているか確認する
例ではGoogleChromeを使って説明します。
どこでもいいのでサイト上のリンクの上でないところで右クリックしてみてください。
[ページのソースを表示]を選択。
このようにソースコードのページが開きますので更に[Ctrl + F]キーで検索窓を起動。
“awesome”と検索します。
ヒットすれば既にFontAwesomeを使う準備が出来ている可能性が高いです。
どんな文字列があれば読み込みできているのかは以下の導入法で確認してください。
Font AwesomeをCDNで読み込み準備する
CDNとは、ざっくりというと「Web上にある画像とか、ソースコードとかのデータ」を読み込んで自分のWebサイトに適用させる仕組みです。
わざわざ自分の使っているサーバーにアイコンのデータをアップロードしなくてもいいという便利な仕組みです。
今回はこちらのCDNを使います。
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
上記CDNを~タグ内に配置すれば利用する準備は完了です。
SVG画像形式で利用したい場合
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
こちらのスクリプトでも利用可能です。
Font Awesomeで使いたいアイコンを探す
使いたいアイコンの検索は公式サイトより可能です。
以下は無料版の範囲でツイッターのアイコンを検索しています。
全てを検索した結果アイコンのフォントが手に入りました。
今回作りたいSNSボタンに関係あるアイコンをすべて検索します。
<i class="fab fa-twitter fa-4x aqua"></i> <i class="fab fa-facebook-square fa-4x" style="color: #2066b1;"></i> <i class="fab fa-line fa-3x" style="color:#219900;"></i> <i class="fab fa-get-pocket fa-4x red"></i>
なんか一個足りませんが、一旦放っておいて先に進みます。
HTMLのソースコードは上記の通り。
“fa-4x” と言うのは4倍のフォントサイズに、と言う意味で、FontAwesomeの標準のクラスです。
後ろについているカラー名は既にこのテーマで定義されているクラス名です。
クラス名が定義された、ちょうどいい感じの色がない場合はインラインスタイルでももちろん適用できます。（フェイスブックとラインの例）
ここまで説明しておいてなんですが、今回このHTMLタグによる差し込みは使いません。
FontAwesomeをユニコードで使う
サイト上でアイコンを表示したい場合、「●●の直前」だったり「△△の直後」だったりすることが多いと思います。
そんな時に使うのがCSSの「疑似要素」という手法です。
CSSで定義した要素の直前に任意のコンテンツを配置したりできます。
具体的な使いどころの例を挙げるなら、標準では「・」が使われていることの多いリストなんかが多いですね。
- 疑似要素を配置しています。
- 通常「・」が表示されるところをチェックボックスに置き換えています。
- チェックボックス以外にもあらゆる文字やアイコンを配置できます。
CSSでの指定ですので、もちろんコード内でクラス指定で文字を呼び出すことはできないので、アイコンのユニコードを知る必要があります。
各アイコンのユニコードは以下の通り。
この位置で確認できます。
実際使うときはユニコードですので””(バックスラッシュ)を先頭につける必要があります。
疑似要素で配置するコード
実際に疑似要素を配置してみます。
元のHTMLは以下とします。
<ul class="test"> <li class="TW">ツイッター</li> <li class="FB">フェイスブック</li> <li class="HB">はてブ</li> <li class="LINE">ライン</li> <li class="PKT">ポケット</li> </ul>
CSSは以下。
ul.test{
list-style: none;
}
ul.test > li::before{
font-family: "Font Awesome 5 Brands";
font-weight: 400;
font-size: 2em;
margin-right: 10px;
}
ul.test > li.TW::before {
content: "f099";
color: #00acee;
}
ul.test > li.FB::before {
content: "f082";
color: #2066b1;
}
ul.test > li.HB::before {
content: "B!";
color: #fff;
background: #2f70be;
font-size: 1.6em;
font-weight: 900;
}
ul.test > li.LINE::before {
content: "f3c0";
color: #25af00;
}
ul.test > li.PKT::before {
content: "f265";
color: red;
}
こんな感じで疑似要素を配置できます。
やっと出てきた「はてブ」ですがFontAwesomeにはアイコンがありませんので、独自でそれっぽく見えるように作る必要があります。
- ツイッター
- フェイスブック
- はてブ
- ライン
- ポケット
リストの「・」を置き換えた結果がこの通りです。
はてブは単純にcontentを”B!”として実装してみました。
注意としてはFontAwesome無料版を使うときのfont-familyは”Font Awesome 5 Free”と指定することがほとんどですが、ブランドロゴなどは別のfont-family指定が必要です。
“Font Awesome 5 Brands”が正しい指定の仕方になります。
他にも、CSSでのアイコン呼び出しは必ずfont-weightを指定する必要があるところです。
font-weightがないと上手く読み込むことができず「□」←こんな感じの四角が表示されてしまいます。
指定出来るfont-weightは”400″ と “900” の2パターンで、それぞれ標準とソリッドタイプのアイコンに対応します。
まとめ
とりあえずブランドアイコンを使ってSNSボタンのパーツを作る事が出来ました。
ここまで出来れば後は、横並びにしたり背景色と転置したりの、細かい見た目を整えるだけで完成です。
コメント