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

2016-03-28Web制作

サイトURLが変更になりました!
https://0edition.net/
お手数ですがブックマーク・RSSの再登録お願いします。

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

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

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

スポンサーリンク

手順

Step1 画像を用意する

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

これをGimpで16×16ピクセルに縮小して保存。

WordPressのメディアの新規追加や、FTP等でサーバにアップロードします。

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

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

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

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

 

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

20160328_02

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

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

20160328_03

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

.sd-social-icon .sd-content ul li a.share-custom-line{ background-color: #00C300 !important; }

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

20160328_04

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

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

.sd-social-icon .sd-content ul li[class*=share-] a.sd-button.share-custom{ top: 4px !important; }

見ているうちに同じなのかズレているのか、だんだんとわからなくなってきますね・・・。

20160328_05

まだズレてる! という方はtop: 〇pxの数値を増やしたり減らしたりして調整してみてください。

あとがき

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

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

2016.08.11 追記

アイコンを差し替えました。

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

こちらの記事もおすすめです