カスタマイズについて



バリバリの初心者マークの私が、自分でやったカスタマイズを記録として書いています。
にわかがニュアンスで書いたフワッフワした記事ですので参考程度にどうぞ!
そしてカスタマイズは自己責任でお願いいたします。
どうなるのか分からないので、バックアップやコピーはしっかり行って下さいね!

基本 ワードプレス

WPのSNSボタンをカスタマイズ

更新日:

アフィンガー5(WING)に移行して一番最初に目についたのがSNSシェアボタン!
設定でSNSボタンをシンプルにするとアフィンガー4では丸一択だったんですが、アフィンガー5では四角か丸か選べるようです。

4の時に丸、可愛いね!ってなってカスタマイズせずに置いてたんですが、5で初期が四角になっており、これはこれで…(ゴクッ)
となり、良いとこどりでプラグイン使わずCSSで見た目だけカスタマイズしようと思った訳です。

自分メモなので、カスタマイズは自己責任でオナシャス!
ちゃんと元のコピーはしておいてね!
そして超ド素人のカスタマイズなので、もっと効率的なのあるかもです。
気にならない方は目次より、気になるところを覗いてドーゾ。

少しでも可愛いくて、オシャレなSNSボタンが作れますように!

【基本】SNSボタンの設置について

SNSボタンは初期設定は項目ごとに色分けされた横長ボタンです。
これを、アフィンガー5管理→SNS設定からシンプル(四角or丸)にカスタマイズできます。
シンプルにしてしまうとプラグインなどによるシェア数が表示されなくなるらしいので、そこはご注意です!

色も一括で編集可能で、カスタマイザー(外観→カスタマイズ)の、「オプションカラー」で背景とアイコン、文字色が変更可能です。

これで満足な方はここから先は読む必要もないゴミなので、どうもお時間とらせてすみませぬ。
この先もゴミな可能性ありますが、CSSによる微妙な編集方法を書いていきますので興味ある方はお進み下さいー

どう装飾したいか

SNSの装飾に使うCSSは大きく分けると2種類です。

・全体で変えるCSS(2個)
・個別に変えるCSS(6個)

全体的にカラー変更したい場合は下記を使います。

一括で変える

.sns li a{
}
.sns li:last-child a{
}

説明すると、上がTwitter~はてブ!までを装飾するCSSで、
下がLINEを装飾するCSSです。
※右端のLINEだけ個別に余白(margin)が組まれていて、CSSが別になってしまうみたいです。(多分)

LINE、Twitterなど、個別にカラーを変更したい場合は下記を使います。
※アイコンはまた別ですので、アイコン色を変えるで説明します。

個別に変える

.sns .twitter a{
}
.sns .facebook a{
}
.sns .googleplus a{
}
.sns .pocket a{
}
.sns .hatebu a{
}
.sns .line a{
}

これは分かりやすく、ただ単に一個ずつ個別で指定してあげるだけですねー
段階追って全体でグラデーションだったり一個飛びで交互にカラー指定だったりするのも可愛いかなと思います。

装飾してみる

もう、分かってる人は上のコードで満足したのではないかなと思いますが、ここからは細かい装飾CSS例になりますよー
出来る事として浮かぶのは…

背景色の指定
透過する
枠線を付ける
丸みをつける/個別に丸にする(シンプル設定の時のみ)
アイコン色を変える

くらいですかね?
私の想像力が貧困な件については知りません。

背景色の指定

背景色ですが、全体で指定するならカスタマイザー(外観→カスタマイズ)で出来ます。
カスタマイザーのオプションカラーにSNSボタンがあるのでそちらからどうぞ。
背景色、アイコン色(+文字色)と一括で指定できます。

で、個別にしたい場合はCSSで指定することになります。

背景色を指定するCSSはbackground-colorです。
変えたいボタンの{}内に

background-color:#565656 !important;

といった形で書き込めばOKです。
#の後に指定したい色のナンバーを入れてください★
ナンバーの後の「!important」は消さないで下さいね!
cssを使ったカスタマイズする際にたまに見かけてるかもしれませんが、この指定が最優先だよ!って指令です。

透過する

背景の透過はbackground-colorで指定します。
指定するCSSはrgbaなのですが、少し注意点。
カラー指定はカラーコード(#を使ったもの)ではなく、RGBカラーを使います。
RGBカラーはイラレやフォトショなんかのお絵かきソフトでも確認できるし、WEBで「RGBカラー一覧」とかの検索でで出来ます。

で、指定したい場所の{}内に

background-color: rgba(222,227,57,0.70)!important;

といった具合で書き込みます。
rgbaの後にくる()内の説明ですが、
「,」で区切ってRGBカラーナンバーを入れます。
次に、例の場合は0.70となってますが、これが不透明度の指定です。
「1」が透明度無し、「0」が透明になりますのでお好きな濃さで指定してください。

同じように線の透過も可能です。
線の透過は

border: 4px solid rgba(222,227,57,0.70);

みたいな感じになります。
上記は線の太さ=4px、線の種類=solid(直線)、カラー+透明度=rgba(222,227,57,0.70)といった並びです。

枠線をつける

枠線を指定するCSSはborderです。
ですので、{}の中に下記のように入れればOK

border: 4px solid #565656;

4pxは線の太さ、次に書いてるsolid(直線)は線の種類、最後の#はカラー指定番号になります。

丸みをつける/個別に丸にする

丸みをつける指定CSSはborder-radiusです。

つけたいアイコンの{}内に下記のように入れます。

border-radius: 20%;

0%が直角になり、数字が増えるごとに丸くなっていきます。
正方形の(アフィンガー管理で SNSボタンをシンプルにするにしている)場合は50%で完全な丸(円)になりますよー!
したい人がいるかは分からないけど、□〇□〇□〇みたいな並びも個別に指定してあげれば可能ですよ。
その場合はアフィンガー管理のSNSボタンを丸くするのチェックは外して、指定したいやつにだけ、上記CSSで数値を指定してあげてね。

アイコン色を変える

アイコン色も個別カラーにしたい!って人は、下記コードを使ってカラー指定してください。

アイコン色

Twitter
.fa-twitter:befor{
}

Facebook
.sns .fa-facebook:before{
}

Google+1
.sns .fa-google-plus:before{
}

ポケット
.sns .fa-get-pocket:before{
}

はてブ!
.sns .st-svg-hateb:before{
}

LINE
.sns .fa-comment:before{
}

アイコンの色を変えたい物の{ }内に下記のように書いて下さい。

color:#ffffff;

#の後にはお好きなカラーコードを入れてどうぞ。

もし反映しない場合は

color:#ffffff !important;

で試してみて下さい。

で、これは試してないんだけど(最低)アイコンと文字のカラーも変えれると思う!

(下記の例えはLINEの場合です)
アイコン色を上記のカラーで指定して、
.sns .fa-comment:before{
}
の:beforeを取って
.sns .fa-comment{
}
にして、collarでいけると思うんだよねぇ…
この件は時間があるときにでも確認しておきます!

まとめ

SNSボタンの見た目的なアレンジは、私が思いつく限り書いてみましたが所詮にわか。
そう初心者の戯言メモです。
だが、それが少しでもお役に立てたなら嬉しいよ!

こんなパターンは?ってのがあったらお気軽にどうぞ。
答えられない可能性のが高いかもですが、答えようと努力だけはします!







-基本, ワードプレス

Copyright© 3ism+9ality , 2020 All Rights Reserved.