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

2016-03-28Web制作

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

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

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

スポンサーリンク

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

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)
ですが、余白はギリギリまでなくした方がベター。
少しでも余白があると他のアイコンと比較して小さめなアイコンになってしまいます。

 

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

おすすめ記事セレクション
シンプルなインテリアを目指す方へ → 買ってよかったホワイトの生活家電・生活用品まとめ
おしゃれな写真は誰でも撮れます → ブログ映えするオシャレな写真撮影&加工テクニック
デキる大人への第一歩 → 私のEvernoteの活用術・10個の事例【初心者でもできる活用法】
意識を変えるだけで貯まる! → 年収300万円のOLが8年で1000万円以上貯めた方法と習慣

この記事を読んだ人は他にこんな記事も読んでいます