【スワロー】Font AwesomeでキレイなGitHubアイコンをプロフィール欄に追加する方法

テンプレート

このブログで利用しているテンプレートのスワローではデフォルトでプロフィールに掲載できるSNSアカウントは以下のようになっております。

デフォルトでプロフィールに掲載できるSNSアカウント
  • Google+
  • Twitter
  • Facebook
  • Instagram

これはWordPressの管理画面から設定をすることができます。

GitHubのアカウントも掲載したいなと思っていたのですが管理画面から設定することは無理のようです。

ということで、GitHubのアカウントも他のSNSと同じ感じでプロフィール欄に載せるられるようにカスタマイズしてみました！

今回はその方法について共有したいと思います。

なお、以前説明した方法でHTMLでプロフィールを作成している前提で話を進めていきますので、HTMLによるプロフィールの作成方法については以下の記事を参考にしてください。

関連記事
今回話す内容
  • GitHubアイコンをプロフィール欄に追加する方法
  • Font Awesomeの利用方法

完成形

特に説明はいらないという人のために完成イメージとソースコードを掲載しておきます。

カスタムHTML

<div class="author_sns">
    <ul>
        <li class="author-site"><a href="ブログURL" target="_blank" rel="noopener">WebSite</a></li>
        <li class="author-twitter"><a href="https://twitter.com/アカウント" target="_blank" rel="nofollow noopener">Twitter</a></li>
        <li class="author-facebook"><a href="https://www.facebook.com/アカウント" target="_blank" rel="nofollow noopener">Facebook</a></li>
+        <li class="author-github"><a href="https://github.com/アカウント" target="_blank" rel="nofollow noopener">Facebook</a></li> // この行を追加
    </ul>
</div>

追加するcss

.authorbox .author_sns li.author-github a::before{
    content: "\f09b";
}

どうやってキレイなアイコンが表示されている？

そもそもどうやってアイコンが表示されているのかについて説明をします。

スワローではFont Awesomeというアイコンフォントが利用できます。

アイコンフォントとは画像データはなくテキストとしてアイコンを埋め込むものです。

アイコンフォントには以下のようなメリットがあります。

アイコンフォントのメリット
  • 拡大してもぼやけない
  • 色やサイズが調整が容易
  • コードをHTMLに埋め込むだけで簡単にアイコンを作成することができる

アイコンフォントはスワローをはじめ、様々なWebサービスでも利用されています。

GitHubのアイコンもFont Awesomeに登録されているため、Githubアイコンのコードさえ分かれば簡単に表示できるようになるというロジックになります。

GitHubのアイコン用コードの取得

まずはFont Awesomeのサイトにいき、GitHubで検索します。

検索結果の詳細を見ると以下のようにコードがあるのがわかります。

このコードを埋め込むことでGitHubのアイコンフォントを利用できるようになります。

アイコンを利用するCSSを追加する

GitHubのアイコンのコードがわかったのでこれを利用するためにCSSを編集します。

以下のソースコードをstyle.cssに追加します。

このCSSの意味を簡単に説明をするとbeforeという擬似クラスを利用してcontentの内容(GitHubアイコン)をauthor-githubというliタグ内に存在するaタグの直前に表示するというものになっています。

追加するcss

.authorbox .author_sns li.author-github a::before{
    content: "\f09b";
}

HTMLを編集する

先ほど作成したauthor-githubクラスをliタグをHTMLに追加します。

これで「GitHub」という文字の直前にGitHubアイコン(content)が埋め込まれるようになります。

カスタムHTML

<div class="author_sns">
    <ul>
        <li class="author-site"><a href="ブログURL" target="_blank" rel="noopener">WebSite</a></li>
        <li class="author-twitter"><a href="https://twitter.com/アカウント" target="_blank" rel="nofollow noopener">Twitter</a></li>
        <li class="author-facebook"><a href="https://www.facebook.com/アカウント" target="_blank" rel="nofollow noopener">Facebook</a></li>
+        <li class="author-github"><a href="https://github.com/アカウント" target="_blank" rel="nofollow noopener">GitHub</a></li> // この行を追加
    </ul>
</div>

これでプロフィール欄のカスタマイズは終了です。

お疲れ様でした！

スワローの公式ページはこちらから
RECOMMEND