JINカスタマイズ｜SNSボタンを丸っこくする

JINが1.8にバージョンアップしたくらいから、SNSボタンが四角くなりましたね。

丸じゃなきゃいやぁぁぁァァアアアア！！

乱れ過ぎやで

BEFORE

AFTER

はい、まんるくてかんわい♪

FANBOX限定

FANBOXって何？

SNSボタンに色をつけてみました。

BEFORE

AFTER

限定コードはこちら

カスタマイズは自己責任でやろう

自己責任の意味がわからない方、初めてカスタマイズする方は、必ずこちらの記事を読んでくださいね。

関連カスタマイズは自己責任。ぼくはこんな風に思っています。

Contents

カスタマイズの
準備
1. CSSコードの追加方法
カスタマイズに必要な
CSSコード
うまくできたか
確認
くまからのお礼

カスタマイズの
準備

CSSコードの追加方法

おすすめは追加CSSからコードを追加する方法です。

はじまてカスタマイズする方は、こちらの記事を読んでくださいね。

関連ブログのカスタマイズを加速させる「追加CSS」の使い方

追加方法	難しさ
追加CSS
テーマエディター
FTPソフト

複数のカスタマイズをしたい方は、テーマエディターだと編集しやすくておすすめです。普段からFTPソフトを使ってる方はそちらからアップロードしてもカスタマイズできます。

カスタマイズに必要な
CSSコード

/*--------------------------------------
  JIN サイドバーSNSボタン
--------------------------------------*/
[class^="jin-ifont-"]:before, [class*=" jin-ifont-"]:before {
    font-size: 1em;
}
.my-profile .profile-sns-menu ul li a {
    width: 45px;
    height: 45px;
    color: #f8cbd1!important;
    margin: 0 5px;
    text-align: center;
    border-radius: 50%;
    background: white;
}
.my-profile .profile-sns-menu ul .pro-tw a {
    padding: 11px;
}
.my-profile .profile-sns-menu ul .pro-insta a {
    padding: 15px;
}
.my-profile .profile-sns-menu ul .pro-youtube a {
    padding: 14px;
}
.my-profile .profile-sns-menu ul .pro-contact a {
    padding: 13px;
}
@media (max-width: 767px){
.my-profile .profile-sns-menu ul .pro-insta a {
    padding: 15px 4.5px;
}
.my-profile .profile-sns-menu ul .pro-contact a {
    padding: 14px 4px;
}}
.widget .my-profile {
    padding-bottom: 125px;
}
@media (min-width: 1024px){
.sidebar_style6 .my-profile {
    padding-bottom: 125px !important;
}}