Jetpack共有ボタンに丸いLINEアイコンを追加する方法

WordPress

こんにちは、とみーです。

前回ははてブとfeedlyのボタンをプラグインで簡単に追加しました。

Jetpackの共有ボタンにはてなブックマークとfeedlyを追加するプラグイン

こんにちは、とみーです。今回はWordPressでいの一番にインストールしたいプラグインJetpackの機能の…

今回はJetpack共有のシステムとスタイルシートを使って、設定で「アイコンのみ」を選択した場合に表示される丸いアイコンを作ってみたいと思います。

スポンサーリンク

手順

Step1 画像を用意する

LINEロゴの画像を用意します。
公式で配布されていますが改変NGなため、私はニコニ・コモンズでダウンロードしました。

これをGimpで16×16ピクセルに縮小しました。

Step2 共有設定にLINEを追加する

WordPressのダッシュボードの設定 > 共有 をクリックします。

共有ボタンの「新サービス追加」で、以下のように入力します。

サービス名:LINE
共有URL:http://line.naver.jp/R/msg/text/%post_title%%0D%0A%post_url%
アイコンURL:アップロードしたアイコンのURL

20160328_01

LINEが追加されますので、下の方にドラッグします。

20160328_02

Step3 スタイルシートで背景色を設定する

LINEが表示されましたが、背景色が灰色なのでLINEのブランドカラーに変えたいと思います。

20160328_03

子テーマのstyle.cssに1行追加します。

結果・・・背景色が変更されましたが、微妙にベースラインが合っていません。

20160328_04

Step4 スタイルシートで位置を調整する

子テーマのstyle.cssに更に1行追加します。

見ているうちに同じなのかズレているのか、だんだんとわからなくなってきますが・・・これでいいかな?

20160328_05

あとがき

他はフラットデザインなのに、LINEのアイコンだけタイプが違うのが気になります。
どこかでフラットなアイコン発見したら差し替えようかと。

LINE以外を追加する場合は手順は同じですが、Step3の a.share-custom-line を a.share-custom-○○(恐らくStep2で入力したサービス名)に変更する必要があります。

2016.08.11 追記

差し替えました。

‘Circle Flat – free’ by Peijun Zhu

Download this icon for free on Iconfinder.com – Style: Flat – Categories: Social media – Available formats: SVG (vector), PNG, ICO, ICNS, Adobe Illustrator

サイズは無理に16×16に縮小する必要はないみたいです。(私は86×80)
余白はギリギリまでなくした方がベター。
少しでも余白があると、他のアイコンと比較して小さめなアイコンになってしまいます。