WordPress Twenty-seventeen ソーシャルリンクメニューにLINEのアイコンが欲しい

WordPress4.7についてくるTwenty-seventeenのテンプレートいいですね。

固定ページも作りやすくブログページのカスタマイズもやりやすい、WordPressを一般的なホームページのように使う場合にはそれなりの工夫が必要だったのですが、ここまで作りこみやすくなったかと感心しました。

ところがですよ。標準だとフッターに表示されるソーシャルリンクメニューの選択枝にLINEがない。はてブもない。いわゆる日本で使われているリンク用のアイコンが用意されていないのです。がっかり。

リンク自体は作成できるもの、チェーン（リンクの意味だと思います）のアイコンが表示される、まったくもってなんのリンクかはわからないもの。

これは困ったということでいろいろ調べてみた結果、なんとかアイコンを設置することが出来ました。これがベストかどうかと言われると、そうでもないのですが、とりあえず現時点での情報として書き留めておきます。

ソーシャルリンク用のアイコンは個別画像ファイルではなくSVG形式

SVGを知らない方に簡単に説明するとテキストでベクトル形式のデータを記載しているということです。通常の画像のファイルのように1画像１ファイルではなく、複数のSVG情報が１つのファイルにまとめて保管されていました。

SVG画像のパス
/wp-content/themes/twentyseventeen/assets/images/svg-icons.svg

まずはこの中身をテキストエディターなどで開いてみます。試しにFacebookの情報を見ると以下のような感じで記載がありました。

この手順を見習ってico-lineを作ったらよさそうな検討がつくのですが、SVGファイルなんて作ったことがないしどうしようと思い検索をしてみると、LINE用のSVGファイルを作ってもらったという記事をみつけました。

「はてな」「LINE（ライン）」など、SVGのフリーアイコンを作っていただいたのでシェアします

私は白黒のLINEアイコン(SVG形式）を選んでダウロードしました。小さめのやつを選びました。初めは大きいのを選んだのですが、そうするとうまく自動リサイズ（縮小）が機能してくれませんでした。
具体的にはSVGのパラメータが「viewBox=”0 0 24 24″」程度でないとうまくいかなかったです。最初に参考にしたFacebookもそれくらいの数値ですよね。これが「0 0 300 300」とかを試すとつぶれてしまいました。
widthとheightのパラメータで指定することでキレイに多きくできるので、小は大を兼ねるということか、と勝手に理解しました。

LINEはここから一覧を見れますね。お好みのものをどうぞ。
https://icons8.com/web-app/for/all/line

ダウンロードしたファイルをfacebookのコードを参考に必要な部分だけ切り出して既存のsvg-icons.svgファイルに追記します。 idはicon-lineに置き換えですね。
これで画像の準備はできました。

画像アイコンを表示するCSSはソーシャルリンクメニューのURLを見て自動判断している

以下のphpファイルの中に設定が入っています。
/wp-content/themes/twentyseventeen/inc/icon-functions.php

ここのURLの一部を読み取って、css用のクラスを作り出す部分にLINEを追記します。youtube.com後に記載しました。

これでとりあえずアイコンは表示されるようになったのですが、小さい・・・アイコンのLINEの字がつぶれて見えない（泣）。

ソーシャルリンクメニューのアイコン自体を大きく表示する

小さくて見えないなら大きくするしかないだろうということで、アイコンのcssを調べていって見つけました。
オリジナルはこれの半分くらいの大きさでした。ようやくこれでLINEの字がギリギリ読めそう。

まだ新しいテンプレートのため参考となるページが少なかったので自分の備忘録と参考情報の共有のためにブログにアップしておきます。

このページの最下部にあるソーシャルリンクメニューも大きくなってますよね？少なくとも私にはこれくらいがLINEの字が見えているギリギリのサイズです。。