Qiitaアイコンを表示する | HUGOで個人Webサイトを作る(2)

個人Webサイト

先日勢いでHUGOのCoderテーマで作成した個人Webサイトを一つずつ良くしていきます。
https://amuyikam.work

前回はhome画面のプロフィール画像を変更しました。
今のhome画面はこんな感じです。

TwitterとGithubのアイコンしか並んでいないのが寂しい気がしますので、今回はこの横にQiitaのアイコンを並べます。

環境

hugo-coder
commit 903cfa04432002f855035fbf793be71bac370b9f

$ sw_vers
ProductName:    Mac OS X
ProductVersion: 10.14.2
BuildVersion:   18C54
$ go version
go version go1.11.2 darwin/amd64
$ hugo version
Hugo Static Site Generator v0.54.0/extended darwin/amd64 BuildDate: unknown

Qiitaアイコンを表示する

それでは始めましょう。

config.tomlにQiitaの記述を追加

GithubとTwitterの設定箇所はconfig.tomlにあり、urlを自分のプロフィールページのURLに変更したり、表示順序を入れ替えたり出来ます。
そこで無邪気にCoderテーマのデフォルトconfig.tomlを参考にしてそれっぽくQiitaを足してみましたが、画面上は何も変わりませんでした。

config.toml

[[params.social]]
    name = "Twitter"
    icon = "fab fa-twitter fa-2x"
    weight = 2
    url = "https://twitter.com/amuyikam/"
[[params.social]]
    name = "Qiita"
    icon = "fab fa-qiita fa-2x"
    weight = 3
    url = "https://qiita.com/amuyikam"

HTMLの確認

該当部分は themes/hugo-coder/layouts/partials/home.htmlにあります。
HUGOのテンプレートエンジンの文法はまだ覚束ないのですが、先程設定したconfig.comlのparams.socialに記述した情報でループを回してパラメータを埋めていっている空気を感じます。とすると、ここは変更する必要はなさそうです。

themes/hugo-coder/layouts/partials/home.html

    {{ with .Site.Params.social }}
    <ul>
      {{ range sort .}}
        {{ if .icon }}
          <li>
            <a href="{{ .url }}" aria-label="{{ .name }}">
              <i class="{{ .icon }}" aria-hidden="true"></i\
>
            </a>
          </li>
    {{ else }}
          <li>
            <a href="{{ .url }}" aria-label="{{ .name }}">{{ .name }}</a>
          </li>
    {{ end }}
      {{ end }}
    </ul>
    {{ end }}

上記テンプレートがレンダリングされた部分を見てみるとQiitaもhtmlに書き出されていることがわかります。html要素には正常になっているけれど、表示されていないという状態のようです。
class="fab fa-qiita fa-2x"が怪しいですね。

index.html

          <li>
            <a href="https://twitter.com/amuyikam/" aria-label="Twitter">
              <i class="fab fa-twitter fa-2x" aria-hidden="true"></i>
            </a>
          </li>



          <li>
            <a href="https://qiita.com/amuyikam" aria-label="Qiita">
              <i class="fab fa-qiita fa-2x" aria-hidden="true"></i>
            </a>
          </li>

fab fa-twitter fa-2xって何?

Font AwesomeというCSSで利用できるアイコン集があり、そのライブラリで定義されているclassのようです。
Font Awesomeは使い方がとても簡単で良い感じのアイコンが大量に用意されていてさらにその検索が使いやすい、とても有難いライブラリですね。すごい。

使い方

まずはheadの中に1行追加しますがhugo-coderで既に利用しているので、この読み込みは不要ですね。

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">

この画面で利用したいアイコンを検索します。
その後アイコンの個別ページで<i class="fab fa-twitter"></i>部分をクリックするとhtmlがコピーされます。後は表示したい箇所にそれを貼り付けると完了です。

検索時のsuggestionとかhtmlが用意されていてクリックでコピーとか、細かいところですが体験が良いのでフロント作る時は参考にしたい。

fa-qiitaが表示されない

2019/4現在でFont Awesomeに5000以上アイコンがあるのですが、Qiitaのアイコンは含まれていないためです。
検索しても出てきません。

Githubのissueで管理されているNew Icon Requestsにもありません。悲しい。 -> ひとまずRequest上げておきました

この時点でQiitaアイコンを使うためには2つ選択肢があります。

1. Font AwesomeにNew Icon Requestを送る
2. 自分でFont Awesome相当のCSSを作成する

Font Awesomeに登録されることでQiitaアイコンを誰もが使えるようになるのでNew Icon Requestを送る方が良いのですが、いつ採用されるか、そもそも採用されるかどうかもわからないため、ここではRequestを送りつつ自作することにします。

Font Awesome風カスタムアイコンの作成

隣のTwitterアイコンを見ると、.fa-twitter:beforeの中で画像を指定しています。
これを参考にして .fa-qiita:beforeを定義してやると良さそうです。

ただし、fa-の名前空間はFont Awesomeが利用しています。独自のclassでその名前空間を利用するのは混乱の元となるため、クラス名をicon-qiitaに変更しておきます。
(fa-qiitaのままでも構いません。好み次第かなと思います。)

config.toml

[[params.social]]
    name = "Qiita"
    icon = "fab icon-qiita fa-2x"
    weight = 3
    url = "https://qiita.com/amuyikam"

ここから、アイコンの表示までは次のステップが必要です。

1. カスタムCSSを定義する
2. カスタムCSSが読み込まれるよう設定する
3. アイコン画像が読み込まれるよう配置する

カスタムCSSを定義する

こちらの記事を参考にして、qiitaアイコンを表示するクラスを定義します。

.icon-qiita:before {
    content: "";
    background-image: url("/images/qiita.png");
    display: inline-block;
    width: 1em;
    height: 1em;
    background-size: contain;
    vertical-align: middle;
}

カスタムCSSを読み込ませる

hugo-coderテーマでは、以下のコードでconfig.tomlのparams.custom_cssで設定したcssファイルを読みに行くように書かれています。

themes/hugo-coder/layouts/_default/baseof.html

    {{ range .Site.Params.custom_css }}
      <link rel="stylesheet" href="{{ . | relURL }}">
    {{ end }}

テーマのデフォルトのconfig.tomlを見ると、既にcss/custom.cssを読むよう設定されていたため、このままこれを利用します。

config.toml

[params]
    custom_css = ["css/custom.css"]

CSSは静的ファイルなので、staticの下に置くと良さそうです。
先程のカスタムCSSをstatic/css/custom.cssに置いてhtmlから読み込まれるようにします。

$ cat static/css/custom.css 
.icon-qiita:before {
    content: "";
    background-image: url("/images/qiita.png");
    display: inline-block;
    width: 1em;
    height: 1em;
    background-size: contain;
    vertical-align: middle;
}

アイコン画像を配置する

最後に、画像を配置します。
Qiitaの画像はQiita ブランドガイドラインからダウンロードできます。この中からqiita-favicon.pngをstatic/images/qiita.pngに配置します。

$ cp ~/Downloads/Qiita/png/qiita-favicon.png ./static/images/qiita.png 

動作確認

これでQiitaアイコンが表示されるはずです。
hugo serverで開発用サーバを立ち上げてブラウザで確認してみましょう。

予定通り、QiitaアイコンをTwitterアイコンの横に並べることができました。🎉🎉🎉
ここまでの変更をGithubにpushして、netlifyが反映してくれているのを確認したら完了です。

Qiitaアイコンの使用について

ブランドガイドラインにあるように、Qiitaのブランドロゴ等を利用する際には指定事項、禁止事項を守る必要があります。
hugo-coderテーマのデザインではアイコンをモノクロでまとめてあるのですが、ブランドガイドラインの禁止事項により、 アイコンの色を変更することはできません。
同じように、ロゴ画像はpngよりもsvgファイルの方が良いのですが、禁止事項でとにかくロゴをいじるのが許可されていないためpngのままとしました。

まとめ

• hugo-coderのhome画面にQiitaアイコンを追加しました
• 実装はFont Awesome
• Font Awesomeに無いアイコンも並べられます

この方法で色々なSaaSのアイコンを並べることができます。楽しい。
どうせ白黒アイコンで統一できないならTwitterの方も色付きにしようかな。

参考