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

2016-03-282020-05-08Web制作

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

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

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

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

Step1　画像を用意する

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

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

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

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

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

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

 

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

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

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

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

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

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

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

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

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

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

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

あとがき

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

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

2016.08.11 追記

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

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

 

関連記事Jetpackのあの機能はどこ？ という方は追加ウィジェットはどこ？ Jetpackの設定項目が分かりにくい人には旧タイプの一覧リストがあるよ！のページをご覧ください。