雑記

プロフィールカードのSNSボタンの色だけを変更する CSS

プロフィールカードはJINでは標準装備されていて、プロフィールカードの下にSNSアイコンを表示させるかどうかをボタン1つで切り替えることが出来ます。

サイドバーにあるプロフィールカード下のSNSの背景とアクセントカラーは統一されていて、カスタマイズでアクセントカラーを変更すると、プロフィールカードのSNSの背景とフッターの下線は同じ色になります。

このプロフィールカード下のSNSアイコンとフッターの色を独立させて単体で色を変更させる方法を紹介します。

サイドバーのSNSボタンの色を独立させる方法

みるちゃブログではプロフィールカードをカスタマイズしていて、外枠を付けるCSSとSNSアイコンを表示させるCSSが異なっているので、アクセントカラーを変更するとSNSアイコンは青で外枠が赤という状態になってしまいます。
左がプロフィールカードのSNSアイコンで、右がフッターの下線になります。
アクセントカラーを青にするとSNSボタンもフッターも青になってしまいます。

外枠とSNSボタンの色が違うので少しダサいし、納得いかない。
独立させるにはSNSボタンだけの色を変更するよう指定しなくてはいけません。

プロフィールカードの下にSNSアイコンを表示させたい人は、

  1. 外観→カスタマイズ→ウィジェット→サイドバー→プロフィール
  2. 外観→ウィジェット→サイドバーor利用できるウィジェット→プロフィール

からSNSボタンを表示させることが出来ます。
SNSボタンの色を独立させるには下のCSSコードを追加CSSに貼ります。
もうこれだけで終わりです。

/**********************************
     プロフィールSNSカラー
 **********************************/
.my-profile .profile-sns-menu ul li a {color:#好きな色;/*①*/
background-color:#好きな色;}/*②*/
/*余白背景*/
.my-profile .profile-sns-menu{background-color:#好きな色!important}/*③*/

この「好きな色」にカラーコードを入れて下さい。
/*〇*/は分かりやすいようにしてあるだけなので、全て消して大丈夫です。

  1. アイコンの色を変更出来ます。
  2. アイコンの外枠の色を変更出来ます
  3. SNSボタンの背景の色を変更出来ます。

プロフィールカードに外枠をつけるCSS

この赤枠で囲ってる部分が外枠になります。
この外枠をつけるCSSコードが下記のコードになります。

/**********************************        
    プロフィール外枠
***********************************/
.my-profile{
border: solid 3px #好きな色;}

先程同様に「好きな色」に好みのカラーコードを入れます。
3pxと入力している部分が外枠の太さになります。自由に変更してみて下さい。