WEB WING|Affinger5 WORDPRESS

【Affinger5|SNSボタンカスタマイズ】CSS公開!サイズ変更!LINEアイコンが分かりにくい?!を解決!

更新日:

SNSのボタンをカスタマイズするぞ!
Affinger5はSNS拡散用ボタンがついています。
とても便利だよね!
でもLINEアイコンがでSMSアイコンっぽく見えちゃう。
もう少し小さく控えめにしたいなー。
カスタマイズしてみましょう!

 

この記事を読むメリット

  • WING(Affinger5)のSNSリンクボタンをカスタマイズ出来る。
  • 小さくして、角丸の四角に変更。
  • 少し分かりにくい「ライン」アイコンを文字に変更!

 

それではさっそく頑張りましょう!

 

 

WING(AFFINGER5)はSNS拡散ボタンが常設!

何もしなくても、カラフルでとってもおしゃれ!

WING/AFFINGER5のSNSボタンをカスタマイズしたい!

 

アンダーラインが付いているのは、リンクテキストの全てにアンダーラインが入るようにしているからです!

特に指定をしていない方はアンダーライン無しで表示されているはずです!

 

AFFINGER5管理設定の指定

affinger5管理設定

Affinger5 管理から「SNS設定」を選んで各種設定。

WING/AFFINGER5のSNSボタンをカスタマイズしたい!

私は上記のように設定してます!

 

メモ

以前は記事の下にのみSNSボタンを設定していたのですが、
先輩方の助言を元に上にも表示するように変えました!

 

 

 

SNSに広がってもらうためにも記事の上に差し込むのが重要みたいですね!

 

上下に設定するなら、なおさら少し小さくSNSボタンを表記させたいな!

 

作業の流れ

  1. まずはアイコンを小さくする。
  2. LINEのアイコンを吹き出しから文字に変える。

 

まずはアイコンのサイズを小さく見せる

 

CSSなんじゃそら!っていう方は飛ばしてください!

サイズに関わる「CSS作業」をする時、
私はいつも「border:1px solid red;」を入れて作業しています。

border:1px solid red;

 

下記写真のように分かりやすい状態にして作業しています!

WING/AFFINGER5のSNSボタンをカスタマイズしたい!

 

どこにmarginが効いて、効かなかったかなど一発で分かります!

CSSを最後に公開していますが、まず自分でやってみたい方はチャレンジ!

赤ボーダーをつけて頑張ってみてくださいね!!

考え方としてはこのメモ見たい感じです!

オリジナルのサイズ展開にしたい方は
  1. 1つずつのアイコンのサイズを決める。
  2. 余白を決める。
  3. 全体のwidthを編み出す。
  4. 最後のアイコンの右側の余白だけ無くす。

 

こんな感じです!
CSSは少しずつ勉強すると楽しいですよ!一気にはNG笑

 

 

さて、本題へ!

「LINE」表記にする方法

まずCSSをみる前にどんな感じで出来たのかチェックしてください!

WING/AFFINGER5のSNSのLINEボタンをカスタマイズしたい!

どうですか?
結構かわいくて分かりやすい!

 

色の設定はAffinger5管理画面もしくはカスタマイザーで!

CSSで設定しなくても「優しい色」「通常配色」「単色」を選べます!

 

Affinger5の初期設定半端ないなー!

 

通常配色バージョン

WING/AFFINGER5のSNSのLINEボタンをカスタマイズしたい!

 

カスタマイザーで色を指定した単色バージョン

WING/AFFINGER5のSNSのLINEボタンをカスタマイズしたい!

カスタマイザーからの色の指定は「オプションカラー」項目の中間あたりです!

 

サイズの変更が出来たら・・・

LINEを文字表記に変更

CSSコード全文はこちら

/*SNSボタンのデザイン修正*/
.post .sns ul, .sns ul {
margin: 0 auto;
width: 193px;
}

.sns li {
float: left;
list-style: none;
width: 28px;
margin-right: 0px;
position: relative;
}
.post ul li:last-child {
padding-bottom: 0px;
padding-right: 0px;
margin-right: 0px!important;
}

i.fa-comment{
padding-bottom: 0px;
padding-right: 0px;
margin-right: 0px!important;
font-size:2px;

}
.sns li {
float: left;
list-style: none;
margin-right: 5px;
position: relative;
}
.sns li a {
text-decoration:none!important;
border-radius: 10%;/*丸型が良い方は50%のままで OK*/
box-sizing: border-box;
color: #fff;
font-size: 70%!important;
height: 28px;
width: 28px;
padding: 0;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
/*LINEのデザイン修正*/
i.fa-comment:before {
content:"LINE";
font-size:12px;
letter-spacing:1px;
font-family:'impact',sans-serif;
width:28px;
line-height:28px;
height:28px;
margin-top:2px;
}
/*SNSボタンのデザイン修正-----おわり*/

 

こちらをカスタマイザーのCSS編集にぶちこんじゃお!
出来たかな?

 

メモ

「LINE」のフォントを変えたり、サイズをもう少し大きくしたりしてみてくださいね!

 

常にサイトの枠に沿ってSNSを表記できるプラグインもオススメ!

AddToAny Share Buttons (シェアボタン)

使い方が、超簡単です!
ただ転送する速度が、記事への埋め込みボタンより少し遅くなります。
別記事はこちらです。
AddToAny設定
【超おすすめSNSシェア設置プラグイン】LINEも選べる!AddToAny設定|サイトの隅に常にいるアイコン!

SNSがいつも枠にくっついているサイトって可愛い。 思わずシェアしたくなる! 私にも出来る? 良いプラグインがありますよ!   この記事を読むメリット 常にSNSのアイコンが枠に付いてくる。 ...

続きを見る

 

反省とまとめ

吹き出しに文字を重ねてもっとLINEっぽくしたかったな!

できればこのザ・LINEに変えたかった・・・

LINEアイコン!

 

こんな感じー!これはまた今度!
またねー!

Copyright© うふふ.TOKYO , 2019 All Rights Reserved.